<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/bootstrap-icons/bootstrap-icons.min.css" />
  </head>
  <body class="bg-light">
    <nav class="navbar navbar-dark bg-dark position-relative px-3">
      <!-- 🟢 ZENTRIERTER TITEL -->
      <div
        class="position-absolute top-50 start-50 translate-middle d-flex align-items-center gap-2 text-white"
      >
        <i class="bi bi-speedometer2 fs-4"></i>
        <span class="fw-semibold fs-5">Dashboard</span>
      </div>

      <!-- 🔴 RECHTS: LOGOUT -->
      <div class="ms-auto">
        <a href="/logout" class="btn btn-outline-light btn-sm"> Logout </a>
      </div>
    </nav>

    <div class="container-fluid mt-4">
      <!-- Flash Messages -->
      <%- include("partials/flash") %>

      <!-- =========================
         OBERER BEREICH
    ========================== -->
      <div class="mb-4">
        <h3>Willkommen, <%= user.username %></h3>

        <div class="d-flex flex-wrap gap-2 mt-3">
          <a href="/waiting-room" class="btn btn-outline-primary">
            🪑 Wartezimmer
          </a>

          <% if (user.role === 'arzt') { %>
          <a href="/admin/users" class="btn btn-outline-primary">
            👥 Userverwaltung
          </a>
          <% } %>

          <a href="/patients" class="btn btn-primary"> Patientenübersicht </a>

          <a href="/medications" class="btn btn-secondary">
            Medikamentenübersicht
          </a>

          <% if (user.role === 'arzt') { %>
          <a href="/services" class="btn btn-secondary"> 🧾 Leistungen </a>
          <% } %>

          <a href="/services/open" class="btn btn-warning">
            🧾 Offene Leistungen
          </a>

          <% if (user.role === 'arzt') { %>
          <a href="/services/logs" class="btn btn-outline-secondary">
            📜 Änderungsprotokoll (Services)
          </a>
          <% } %> <% if (user.role === 'arzt') { %>
          <a href="/admin/company-settings" class="btn btn-outline-dark">
            🏢 Firmendaten
          </a>
          <% } %> <% if (user.role === 'arzt') { %>
          <a href="/admin/invoices" class="btn btn-outline-success">
            💶 Abrechnung
          </a>
          <% } %>
        </div>
      </div>

      <!-- =========================
         UNTERE HÄLFTE – MONITOR
    ========================== -->
      <div class="waiting-monitor">
        <h5 class="mb-3">🪑 Wartezimmer-Monitor</h5>

        <div class="waiting-grid">
          <% const maxSlots = 21; for (let i = 0; i < maxSlots; i++) { const p =
          waitingPatients && waitingPatients[i]; %>

          <div class="waiting-slot <%= p ? 'occupied' : 'empty' %>">
            <% if (p) { %>
            <div class="name"><%= p.firstname %> <%= p.lastname %></div>
            <div class="birthdate">
              <%= new Date(p.birthdate).toLocaleDateString("de-DE") %>
            </div>
            <% } else { %>
            <div class="placeholder">
              <img
                src="/images/stuhl.jpg"
                alt="Freier Platz"
                class="chair-icon"
              />
            </div>
            <% } %>
          </div>

          <% } %>
        </div>
      </div>
    </div>
  </body>
</html>
