"use strict";(self.webpackChunk_aidoop_aidoop_r=self.webpackChunk_aidoop_aidoop_r||[]).push([[2955],{92955:(t,r,o)=>{o.r(r);var a=o(50493),e=o(16682),n=o(94430),i=o(56765),d=o(28120),c=o(27805),l=o(37077),s=o(77675);let b=class extends((0,d.$)(s.h)(s.B4)){constructor(){super(...arguments),this.clients=[]}get context(){return{title:"clients"}}render(){var t=this.clients||[];return n.dy`
      <div>
        <h2>Registered Oauth2 Clients</h2>
        <p page-description>
          What type of oauth2 client are you building?<br />Choose the platform type that best suits the audience you’re
          building for.
        </p>
        <a href="oauth2-client-register" button-primary>register new oauth2 client</a>
      </div>

      <div>
        <table>
          <tr>
            <th>app name</th>
            <th>API health</th>
            <th>Installs</th>
            <th>status</th>
          </tr>
          ${t.map((t=>n.dy`
              <tr>
                <td>
                  <a href=${`oauth2-client/${t.id}`}>
                    <strong>${t.name}</strong>
                    ${t.description}
                  </a>
                </td>
                <td class="text-align-center">OK</td>
                <td class="text-align-right">1</td>
                <td class="text-align-center">draft</td>
              </tr>
            `))}
        </table>
      </div>
    `}async pageUpdated(t,r,o){var a;this.active&&(this.clients=(null===(a=await this.fetchOauth2Clients())||void 0===a?void 0:a.items)||[])}async fetchOauth2Clients(){const t=await c.Lp.query({query:e.ZP`
        query {
          oauth2Clients {
            items {
              id
              name
              description
            }
            total
          }
        }
      `});if(!t.errors)return t.data.oauth2Clients;(0,l.h4)({level:"error",message:"fetch oauth2 clients fail"})}};b.styles=[n.iv`
      :host {
        display: flex;
        flex-direction: column;
        background-color: var(--main-section-background-color);
        padding: var(--padding-wide);

        overflow: auto;
      }

      [button-primary] {
        background-color: var(--button-primary-background-color);
        border: var(--button-border);
        border-radius: var(--button-border-radius);
        margin: var(--button-margin);
        padding: var(--button-primary-padding);
        color: var(--button-primary-color);
        font: var(--button-primary-font);
        text-transform: var(--button-text-transform);

        text-decoration: none;
      }
      [button-primary]:hover {
        background-color: var(--button-primary-active-background-color);
        box-shadow: var(--button-active-box-shadow);
      }
      [button] {
        background-color: var(--button-background-color);
        border: var(--button-border);
        border-radius: var(--button-border-radius);
        margin: var(--button-margin);
        padding: var(--button-padding);
        color: var(--button-color);
        font: var(--button-font);
        text-transform: var(--button-text-transform);

        margin-right: 0;
        float: right;
        text-decoration: none;
      }
      [button]:hover {
        border: var(--button-activ-border);
        box-shadow: var(--button-active-box-shadow);
      }
      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);
      }
      div {
        margin: var(--margin-wide) 0;
      }
      table {
        background-color: var(--theme-white-color);
        width: 100%;
        border-collapse: collapse;
      }
      th {
        background-color: rgba(var(--primary-color-rgb), 0.1);
        border-top: var(--th-border-top);
        border-bottom: var(--border-dark-color);
        padding: var(--th-padding);

        font: var(--th-font);
        color: var(--secondary-color);
        text-transform: var(--th-text-transform);
      }
      td {
        padding: var(--td-padding);
        border-bottom: var(--border-dark-color);
        line-height: 1.1;
      }
      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,a.gn)([(0,i.Cb)({type:Array}),(0,a.w6)("design:type",Array)],b.prototype,"clients",void 0),b=(0,a.gn)([(0,i.Mo)("oauth2-clients")],b)}}]);