class StatusCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <style>
        :host{display:block}section{height:100%;box-sizing:border-box}button+button{margin-left:6px}
      </style>
      <section>
        <h3>Status</h3>
        <button id="ping">Ping</button>
        <button id="me" class="secondary">Me</button>
        <pre id="out"></pre>
      </section>`;
    this.querySelector('#ping').addEventListener('click', () => this.call('GET', '/api/ping'));
    this.querySelector('#me').addEventListener('click', () => this.loadMe());
  }

  async call(method, url) {
    this.querySelector('#out').textContent = await window.App.req(method, url);
  }

  async loadMe() {
    await this.call('GET', '/api/me');
  }
}

customElements.define('status-card', StatusCard);