class AddCard extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <style>
        :host{display:block}section{height:100%;box-sizing:border-box}.row{display:flex;gap:8px;align-items:end}.row>*{flex:1}
      </style>
      <section>
        <h3>Add API</h3>
        <div class="row">
          <div><label>A</label><input id="a" type="number" value="1"></div>
          <div><label>B</label><input id="b" type="number" value="2"></div>
        </div>
        <button id="add">Add</button>
        <pre id="out"></pre>
      </section>`;
    this.querySelector('#add').addEventListener('click', () => this.addNums());
  }

  async addNums() {
    const a = +this.querySelector('#a').value;
    const b = +this.querySelector('#b').value;
    this.querySelector('#out').textContent = await window.App.req('POST', '/api/add', {a, b});
  }
}

customElements.define('add-card', AddCard);