doctype html
html(lang="de")
  head
    meta(charset="utf-8")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    title ESP-ID zu Sensornummer
    link(rel="stylesheet", href="/styles.css")
  body
    h1 ESP-ID → Sensornummer
    // Tab Navigation
    div.tabs
      button.tab-btn#tabInput.active(type="button" onclick="showTab('input')") Eingabe
      button.tab-btn#tabList(type="button" onclick="showTab('list')") Liste

    // Eingabe-Tab
    div#tabInputContent.tab-content
      div.card
        form#entryForm
          label(for="sensorNumber") Sensornummer:
          input#sensorNumber(type="text" placeholder="Nur Zahlen erlaubt")

          label(for="espId") ESP-ID:
          input#espId(type="text")

          label(for="name") Bezeichnung:
          input#name(type="text")

          label(for="description") Beschreibung:
          textarea#description

          label(for="address") Anschrift:
          input#address(type="text" placeholder="Wird automatisch ausgefüllt" readonly)

          button#saveBtn(type="button") Speichern
          div#result

    // Listen-Tab
    div#tabListContent.tab-content(style="display:none")
      div.controls
        button#refreshBtn Aktualisieren
        |  Seite:
        input#page(value="1")
        |  Limit:
        input#limit(value="10")

      table#entriesTable
        thead
          tr
            th SensorNr
            th ESP-ID
            th Bezeichnung
            th Beschreibung
            th Anschrift
            th Datum
            th Aktionen
        tbody
    script(type="module" src="/global.js")
    script.
      function showTab(tab) {
        document.getElementById('tabInputContent').style.display = tab === 'input' ? '' : 'none';
        document.getElementById('tabListContent').style.display = tab === 'list' ? '' : 'none';
        document.getElementById('tabInput').classList.toggle('active', tab === 'input');
        document.getElementById('tabList').classList.toggle('active', tab === 'list');
      }