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

      <table>
        <tr>
          <th>appliance name</th>
          <th>API health</th>
          <th>Installs</th>
          <th>status</th>
        </tr>
        ${t.map((t=>n.dy`
            <tr>
              <td>
                <a href=${`appliance/${t.id}`}>${t.name}</a>
                ${t.description}
              </td>
              <td>OK</td>
              <td class="text-align-center">1</td>
              <td>draft</td>
            </tr>
          `))}
      </table>
    `}async pageUpdated(){this.active&&(this.appliances=(await this.fetchAppliances()).items)}async fetchAppliances(){const t=await p.Lp.query({query:o.ZP`
        query {
          appliances {
            items {
              id
              name
              description
            }
            total
          }
        }
      `});if(!t.errors)return t.data.appliances}};l.styles=[n.iv`
      :host {
        background-color: var(--main-section-background-color);
        padding: var(--padding-wide);

        overflow: auto;
      }

      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 {
        width: 100%;
        margin: var(--margin-wide) 0;
        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 {
        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;
      }

      @media screen and (max-width: 480px) {
        :host {
          padding: var(--padding-default);
        }
      }
    `],(0,r.gn)([(0,i.Cb)({type:Array}),(0,r.w6)("design:type",Array)],l.prototype,"appliances",void 0),l=(0,r.gn)([(0,i.Mo)("appliance-home")],l)}}]);