<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CANCOM Simple Signage – Admin Dashboard</title>
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script>
(() => {
  const stored = window.localStorage.getItem("signage-theme");
  const theme = stored === "dark" || stored === "light" ? stored : "light";
  document.documentElement.setAttribute("data-bs-theme", theme);
})();
</script>
<link rel="stylesheet"
      href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<script defer
        src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
{% include "_styles.html" %}
</head>
<body>
<div class="page">

{% set brand_subtitle = "Admin Dashboard" %}
{% set site_dropdown_url_prefix = "/admin/" %}
{% include "_header.html" %}

<div class="navbar-expand-md">
  <div class="collapse navbar-collapse show">
    <div class="navbar navbar-dark nav-surface">
      <div class="container-xl">
        <div class="d-flex flex-wrap gap-2 py-2">
          <a class="btn btn-white" href="/admin/{{ current_site }}"><i class="ti ti-arrow-left me-1"></i>Zurück</a>
          <a class="btn btn-white active" href="/admin/dashboard"><i class="ti ti-dashboard me-1"></i>Admin Dashboard</a>
          <a class="btn btn-white" href="/admin/users"><i class="ti ti-users me-1"></i>Userverwaltung</a>
          <a class="btn btn-white" href="/admin/help"><i class="ti ti-help me-1"></i>Hilfe</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="page-wrapper">
  <div class="container-xl mt-4">

    <div class="row g-3">
      <div class="col-6 col-lg">
        <div class="card card-sm">
          <div class="card-body p-3 pb-0">
            <div class="d-flex gap-3">
              <div class="text-secondary mt-1"><i class="ti ti-building-community" style="font-size:2.2rem;"></i></div>
              <div class="flex-grow-1">
                <div class="fs-1 fw-bold d-flex align-items-center gap-2">{{ site_count }}{% if site_trend > 0 %}<span class="text-green d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-up"></i>+{{ site_trend }}</span>{% elif site_trend < 0 %}<span class="text-red d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-down"></i>{{ site_trend }}</span>{% endif %}</div>
                <div class="text-secondary small">Standorte</div>
              </div>
            </div>
            <div id="spark-sites" class="mx-n3" style="height:36px;"></div>
          </div>
        </div>
      </div>
      <div class="col-6 col-lg">
        <div class="card card-sm">
          <div class="card-body p-3 pb-0">
            <div class="d-flex gap-3">
              <div class="text-secondary mt-1"><i class="ti ti-devices" style="font-size:2.2rem;"></i></div>
              <div class="flex-grow-1">
                <div class="fs-1 fw-bold d-flex align-items-center gap-2">{{ screen_count }}{% if screen_trend > 0 %}<span class="text-green d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-up"></i>+{{ screen_trend }}</span>{% elif screen_trend < 0 %}<span class="text-red d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-down"></i>{{ screen_trend }}</span>{% endif %}</div>
                <div class="text-secondary small">Screens</div>
              </div>
            </div>
            <div id="spark-screens" class="mx-n3" style="height:36px;"></div>
          </div>
        </div>
      </div>
      <div class="col-6 col-lg">
        <div class="card card-sm">
          <div class="card-body p-3 pb-0">
            <div class="d-flex gap-3">
              <div class="text-secondary mt-1"><i class="ti ti-users" style="font-size:2.2rem;"></i></div>
              <div class="flex-grow-1">
                <div class="fs-1 fw-bold d-flex align-items-center gap-2">{{ user_count }}{% if user_trend > 0 %}<span class="text-green d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-up"></i>+{{ user_trend }}</span>{% elif user_trend < 0 %}<span class="text-red d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-down"></i>{{ user_trend }}</span>{% endif %}</div>
                <div class="text-secondary small">User</div>
              </div>
            </div>
            <div id="spark-users" class="mx-n3" style="height:36px;"></div>
          </div>
        </div>
      </div>
      <div class="col-6 col-lg">
        <div class="card card-sm">
          <div class="card-body p-3 pb-0">
            <div class="d-flex gap-3">
              <div class="text-secondary mt-1"><i class="ti ti-shield" style="font-size:2.2rem;"></i></div>
              <div class="flex-grow-1">
                <div class="fs-1 fw-bold d-flex align-items-center gap-2">{{ admin_count }}{% if admin_trend > 0 %}<span class="text-green d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-up"></i>+{{ admin_trend }}</span>{% elif admin_trend < 0 %}<span class="text-red d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-down"></i>{{ admin_trend }}</span>{% endif %}</div>
                <div class="text-secondary small">Admins</div>
              </div>
            </div>
            <div id="spark-admins" class="mx-n3" style="height:36px;"></div>
          </div>
        </div>
      </div>
      <div class="col-6 col-lg">
        <div class="card card-sm">
          <div class="card-body p-3 pb-0">
            <div class="d-flex gap-3">
              <div class="text-secondary mt-1"><i class="ti ti-star" style="font-size:2.2rem;"></i></div>
              <div class="flex-grow-1">
                <div class="fs-1 fw-bold d-flex align-items-center gap-2">{{ superuser_count }}{% if superuser_trend > 0 %}<span class="text-green d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-up"></i>+{{ superuser_trend }}</span>{% elif superuser_trend < 0 %}<span class="text-red d-flex align-items-center gap-1" style="font-size:0.8rem;"><i class="ti ti-trending-down"></i>{{ superuser_trend }}</span>{% endif %}</div>
                <div class="text-secondary small">Superuser</div>
              </div>
            </div>
            <div id="spark-superusers" class="mx-n3" style="height:36px;"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="card mt-4">
      <div class="card-header">
        <h3 class="card-title"><i class="ti ti-history me-1"></i>Verlauf</h3>
      </div>
      <div class="card-body p-0">
        <div class="list-group list-group-flush">
          {% for entry in history %}
          <div class="list-group-item d-flex align-items-center gap-3 py-2">
            <span class="d-flex align-items-center">
              {% if entry.action == "site_created" %}
                <span class="avatar avatar-xs bg-green" data-bs-toggle="tooltip" title="Standort angelegt"><i class="ti ti-building-community text-white"></i></span>
              {% elif entry.action == "site_deleted" %}
                <span class="avatar avatar-xs bg-red" data-bs-toggle="tooltip" title="Standort gelöscht"><i class="ti ti-building-community text-white"></i></span>
              {% elif entry.action == "screen_created" %}
                <span class="avatar avatar-xs bg-green" data-bs-toggle="tooltip" title="Screen angelegt"><i class="ti ti-devices text-white"></i></span>
              {% elif entry.action == "screen_deleted" %}
                <span class="avatar avatar-xs bg-red" data-bs-toggle="tooltip" title="Screen gelöscht"><i class="ti ti-devices text-white"></i></span>
              {% elif entry.action == "user_created" %}
                <span class="avatar avatar-xs bg-green" data-bs-toggle="tooltip" title="User angelegt"><i class="ti ti-user-plus text-white"></i></span>
              {% elif entry.action == "user_deleted" %}
                <span class="avatar avatar-xs bg-red" data-bs-toggle="tooltip" title="User gelöscht"><i class="ti ti-user-minus text-white"></i></span>
              {% elif entry.action == "user_updated" %}
                <span class="avatar avatar-xs bg-blue" data-bs-toggle="tooltip" title="User bearbeitet"><i class="ti ti-user-edit text-white"></i></span>
              {% elif entry.action == "user_password_reset" %}
                <span class="avatar avatar-xs bg-warning" data-bs-toggle="tooltip" title="Passwort zurückgesetzt"><i class="ti ti-key text-white"></i></span>
              {% elif entry.action == "password_changed" %}
                <span class="avatar avatar-xs bg-purple" data-bs-toggle="tooltip" title="Passwort geändert"><i class="ti ti-key text-white"></i></span>
              {% elif entry.action == "background_uploaded" %}
                <span class="avatar avatar-xs bg-blue" data-bs-toggle="tooltip" title="Hintergrund hochgeladen"><i class="ti ti-photo text-white"></i></span>
              {% elif entry.action == "background_deleted" %}
                <span class="avatar avatar-xs bg-yellow" data-bs-toggle="tooltip" title="Hintergrund zurückgesetzt"><i class="ti ti-photo-off text-white"></i></span>
              {% elif entry.action == "customer_added" %}
                <span class="avatar avatar-xs bg-teal" data-bs-toggle="tooltip" title="Kunde hinzugefügt"><i class="ti ti-users text-white"></i></span>
              {% elif entry.action == "user_login" %}
                <span class="avatar avatar-xs bg-lime" data-bs-toggle="tooltip" title="Anmeldung"><i class="ti ti-login text-white"></i></span>
              {% elif entry.action == "user_logout" %}
                <span class="avatar avatar-xs bg-secondary" data-bs-toggle="tooltip" title="Abmeldung"><i class="ti ti-logout text-white"></i></span>
              {% else %}
                <span class="avatar avatar-xs bg-secondary" data-bs-toggle="tooltip" title="{{ entry.action }}"><i class="ti ti-info-circle text-white"></i></span>
              {% endif %}
            </span>
            <span class="text-secondary small text-nowrap" style="min-width:8.5rem;">{{ entry.timestamp }}</span>
            <span class="flex-grow-1">{{ entry.detail }}</span>
            <span class="text-secondary small text-nowrap">{{ entry.user }}</span>
          </div>
          {% else %}
          <div class="list-group-item text-center text-muted py-4">
            <i class="ti ti-inbox ti-lg d-block mb-1"></i>
            Noch keine Aktivitäten aufgezeichnet
          </div>
          {% endfor %}
        </div>
      </div>
    </div>

  </div>
</div>

{% include "_footer.html" %}
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
  if (!window.ApexCharts) return;

  function spark(id, data, color) {
    new ApexCharts(document.getElementById(id), {
      chart: { type: "area", height: 32, width: "100%", sparkline: { enabled: true }, animations: { enabled: false } },
      series: [{ data: data }],
      stroke: { width: 1.5, curve: "straight" },
      fill: { opacity: 0.25 },
      colors: [color],
      tooltip: { enabled: false }
    }).render();
  }

  spark("spark-sites", {{ site_spark | tojson }}, "var(--ccm-primary, #da002d)");
  spark("spark-screens", {{ screen_spark | tojson }}, "var(--ccm-primary, #da002d)");
  spark("spark-users", {{ user_spark | tojson }}, "var(--ccm-primary, #da002d)");
  spark("spark-admins", {{ admin_spark | tojson }}, "var(--ccm-primary, #da002d)");
  spark("spark-superusers", {{ superuser_spark | tojson }}, "var(--ccm-primary, #da002d)");
});
</script>

</body>
</html>