"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[2085],{22085:(t,o,a)=>{a.r(o);var r=a(50493),e=a(16682),i=a(94430),n=a(56765),d=a(28120),c=a(27805),p=a(77675);let l=class extends((0,d.$)(p.h)(p.B4)){constructor(){super(...arguments),this.applications=[]}get context(){return{title:"applications",help:"auth/application"}}render(){var t=this.applications||[];return i.dy`
      <div>
        <h2>Registered Applications</h2>
        <p page-description>
          What type of app are you building?<br />Choose the app type that best suits the audience you’re building for.
        </p>
        <mwc-button
          raised
          @click=${t=>(0,p.c4)("application-register")}
          label="register new application"
        ></mwc-button>
      </div>

      <!-- <div> -->
      <table>
        <tr>
          <th>app name</th>
          <th>API health</th>
          <th>Installs</th>
          <th>status</th>
        </tr>
        ${t.map((t=>i.dy`
            <tr>
              <td>
                <a href=${`application/${t.id}`}>
                  <strong>${t.name}</strong>
                  ${t.description}
                </a>
              </td>
              <td>OK</td>
              <td class="text-align-center">1</td>
              <td>draft</td>
            </tr>
          `))}
      </table>

      <mwc-button outlined @click=${t=>(0,p.c4)("app-bindings")} label="bound applications .."></mwc-button>
      <!-- </div> -->
    `}async pageUpdated(t,o,a){this.active&&(this.applications=(await this.fetchApplications()).items)}async fetchApplications(){const t=await c.Lp.query({query:e.ZP`
        query {
          applications {
            items {
              id
              name
              description
            }
            total
          }
        }
      `});if(!t.errors)return t.data.applications}};l.styles=[i.iv`
      :host {
        background-color: var(--main-section-background-color);
        padding: var(--padding-wide);

        overflow: auto;
      }

      [outlined] {
        float: right;
        margin-top: var(--margin-default);
      }

      h2 {
        margin: var(--title-margin);
        font: var(--title-font);
        color: var(--title-text-color);
      }
      [page-description] {
        margin: var(--page-description-margin);
        font: var(--page-description-font);
        color: var(--page-description-color);
      }
      table {
        margin: var(--margin-wide) 0;
        width: 100%;
        border-collapse: collapse;
      }
      tr {
        background-color: var(--tr-background-color);
      }
      tr:nth-child(odd) {
        background-color: var(--tr-background-odd-color);
      }
      tr:hover {
        background-color: var(--tr-background-hover-color);
      }
      th {
        border-top: var(--th-border-top);
        border-bottom: var(--td-border-bottom);
        padding: var(--th-padding);

        font: var(--th-font);
        color: var(--th-color);
        text-transform: var(--th-text-transform);
        text-align: left;
      }
      td {
        padding: var(--td-padding);
        border-bottom: var(--td-border-bottom);
        font: var(--td-font);
        color: var(--td-color);
      }
      td a {
        font: var(--td-font);
        text-decoration: none;
        color: var(--theme-black-color);
      }
      td a strong {
        color: var(--secondary-text-color);
        font: bold 16px var(--theme-font);

        display: block;
        text-decoration: none;
      }

      .text-align-center {
        text-align: center;
      }
      .text-align-right {
        text-align: right;
      }
    `],(0,r.gn)([(0,n.Cb)({type:Array}),(0,r.w6)("design:type",Array)],l.prototype,"applications",void 0),l=(0,r.gn)([(0,n.Mo)("applications-page")],l)}}]);