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") Eingabe
      button.tab-btn#tabList(type="button") 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 disabled)

          .twobuttons 
            button#saveBtn(type="button") Speichern
            button#cancelBtn(type="button") Abbrechen
          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="50")
        span#gzahl

      table#entriesTable
        colgroup 
          col.col-sensornumber
          col.col-espid
          col.col-bezeichnung
          col.col-beschreibung
          col.col-date
          col.col-aktionen
        thead
          tr
              th(id="thSensorNr" data-sort="sensorNr" style="cursor:pointer") SensorNr <span id="sortArrowSensorNr">↑</span>
              th(id="thEspId" data-sort="espId" style="cursor:pointer") ESP-ID <span id="sortArrowEspId">↑</span>
              th Bezeichnung
              th Beschreibung
              th(id="thDate" data-sort="date" style="cursor:pointer") Datum <span id="sortArrowDate">↑</span>
              th Aktionen
        tbody
  script(type="module" src="/global.js")