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
      if isAdmin
        button.tab-btn#tabUser(type="button" onclick="showTab('user')") User

  // 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
        #version Version: #{version} vom #{vdate}

  // 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

  // User-Tab (nur für Admins)
  if isAdmin
    div#tabUserContent.tab-content(style="display:none")
      div.card
        h2 Neuen User anlegen
        form#userForm
          label(for="username") Benutzername:
          input#username(type="text" required)
          label(for="password") Passwort:
          input#password(type="password" required)
          label(for="role") Rolle:
          select#role
            option(value="user") User
            option(value="admin") Admin
          .twobuttons 
            button#userSaveBtn(type="button") Anlegen
            button#userCancelBtn(type="button") Abbrechen
          div#userResult
        #version Version: #{version} vom #{vdate}

  script(type="module" src="/global.js")