{#
  OTS Signage Modern Theme - Dashboard Page Override
  Modern dashboard with KPI cards, status panels, and quick actions
#}
{% extends "authed.twig" %}

{% block pageTitle %}Dashboard{% endblock %}

{% block content %}
<div class="ots-theme dashboard-page">
  {# KPI Cards Row #}
  <section class="kpi-section">
    <div class="kpi-card">
      <div class="kpi-header">
        <h3 class="kpi-label">Displays</h3>
        <span class="kpi-icon-box">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><path d="M12 17v4"/><path d="M8 21h8"/>
          </svg>
        </span>
      </div>
      <div class="kpi-body">
        <div class="kpi-number">1</div>
        <div class="kpi-meta">100% Displays Online</div>
      </div>
      <div class="kpi-footer">
        <span class="badge badge-success">1</span>
        <span class="text-xs text-muted">Online</span>
      </div>
    </div>

    <div class="kpi-card">
      <div class="kpi-header">
        <h3 class="kpi-label">Schedules</h3>
        <span class="kpi-icon-box">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4"/><path d="M8 2v4"/><line x1="3" y1="10" x2="21" y2="10"/>
          </svg>
        </span>
      </div>
      <div class="kpi-body">
        <div class="kpi-number">0</div>
        <div class="kpi-meta">Scheduled events</div>
      </div>
      <div class="kpi-footer">
        <span class="badge badge-secondary">0</span>
        <span class="text-xs text-muted">Upcoming</span>
      </div>
    </div>

    <div class="kpi-card">
      <div class="kpi-header">
        <h3 class="kpi-label">Users</h3>
        <span class="kpi-icon-box">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
          </svg>
        </span>
      </div>
      <div class="kpi-body">
        <div class="kpi-number">2</div>
        <div class="kpi-meta">OTS Signs users</div>
      </div>
      <div class="kpi-footer">
        <span class="badge badge-info">2</span>
        <span class="text-xs text-muted">Active</span>
      </div>
    </div>
  </section>

  {# Main Panels Row #}
  <section class="dashboard-panels">
    <article class="panel panel-full">
      <div class="panel-header">
        <h3>Display Status</h3>
        <a href="{{ baseUrl }}/display" class="link-secondary">View all →</a>
      </div>
      <div class="panel-body">
        <div class="empty-state-compact">
          <p class="text-muted">You have 1 display configured. Last check-in: just now</p>
          <a href="{{ baseUrl }}/display" class="btn btn-outline btn-sm">Manage Displays</a>
        </div>
      </div>
    </article>

    <article class="panel panel-full">
      <div class="panel-header">
        <h3>Upcoming Schedules</h3>
        <a href="{{ baseUrl }}/schedule" class="link-secondary">View all →</a>
      </div>
      <div class="panel-body">
        <div class="empty-state-compact">
          <p class="text-muted">No schedules found. Create a schedule to get started.</p>
          <a href="{{ baseUrl }}/schedule/add" class="btn btn-outline btn-sm">Create Schedule</a>
        </div>
      </div>
    </article>
  </section>

  {# Quick Actions Section #}
  <section class="quick-actions-grid">
    <h3 class="section-title">Quick Actions</h3>
    <div class="action-cards">
      <a href="{{ baseUrl }}/schedule/add" class="action-card">
        <div class="action-icon">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4"/><path d="M8 2v4"/><line x1="3" y1="10" x2="21" y2="10"/>
          </svg>
        </div>
        <span class="action-label">Create Schedule</span>
      </a>
      <a href="{{ baseUrl }}/display" class="action-card">
        <div class="action-icon">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><path d="M12 17v4"/><path d="M8 21h8"/>
          </svg>
        </div>
        <span class="action-label">Manage Displays</span>
      </a>
      <a href="{{ baseUrl }}/user/add" class="action-card">
        <div class="action-icon">
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
          </svg>
        </div>
        <span class="action-label">Add User</span>
      </a>
    </div>
  </section>
</div>
{% endblock %}