{% extends 'base.html' %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<section class="content-section dashboard-page">
  <div class="surface-card command-palette skeleton-on-load">
    <div class="command-palette__header">
      <p class="tiny-label mb-1">Command Palette</p>
      <h2 class="h6 fw-semibold mb-0">Quick Navigate</h2>
    </div>
    <div class="input-group command-palette__group">
      <span class="input-group-text"><i class="bi bi-search" aria-hidden="true"></i></span>
      <input
        type="text"
        class="form-control"
        placeholder="Try: security, dashboard, sign out"
        list="dashboard-command-options"
        data-command-palette
        data-password-url="{% url 'accounts:change_password' %}"
        data-dashboard-url="{% url 'accounts:dashboard' %}"
        data-logout-url="{% url 'accounts:logout' %}"
      >
      <button class="btn btn-brand" type="button" data-command-run>Run</button>
    </div>
    <datalist id="dashboard-command-options">
      <option value="Security settings"></option>
      <option value="Return dashboard"></option>
      <option value="Sign out"></option>
    </datalist>
  </div>

  <div class="dashboard-hero surface-card skeleton-on-load">
    <div class="dashboard-hero__content">
      <p class="tiny-label mb-2">Workspace</p>
      <h2 class="h4 fw-bold mb-2">Welcome, {{ welcome_name }}</h2>
      <p class="text-muted mb-0">Your CRM foundation is live. Workflow modules can be plugged in here without changing auth or shell architecture.</p>
    </div>
    <div class="dashboard-hero__chips" aria-hidden="true">
      <span class="status-pill status-pill--blue">Secure Auth</span>
      <span class="status-pill status-pill--teal">Role Ready</span>
      <span class="status-pill status-pill--orange">CRM Extensible</span>
    </div>
  </div>

  <div class="row g-3">
    <div class="col-6 col-xl-3">
      <article class="surface-card dashboard-stat h-100 skeleton-on-load">
        <div class="dashboard-stat__icon dashboard-stat__icon--blue"><i class="bi bi-people-fill" aria-hidden="true"></i></div>
        <p class="dashboard-stat__label">New Leads</p>
        <h3 class="dashboard-stat__value">0</h3>
        <p class="dashboard-stat__meta">Awaiting lead module</p>
      </article>
    </div>
    <div class="col-6 col-xl-3">
      <article class="surface-card dashboard-stat h-100 skeleton-on-load">
        <div class="dashboard-stat__icon dashboard-stat__icon--teal"><i class="bi bi-list-task" aria-hidden="true"></i></div>
        <p class="dashboard-stat__label">Open Tasks</p>
        <h3 class="dashboard-stat__value">0</h3>
        <p class="dashboard-stat__meta">Awaiting workflow setup</p>
      </article>
    </div>
    <div class="col-6 col-xl-3">
      <article class="surface-card dashboard-stat h-100 skeleton-on-load">
        <div class="dashboard-stat__icon dashboard-stat__icon--orange"><i class="bi bi-receipt-cutoff" aria-hidden="true"></i></div>
        <p class="dashboard-stat__label">Pending Invoices</p>
        <h3 class="dashboard-stat__value">0</h3>
        <p class="dashboard-stat__meta">Awaiting finance module</p>
      </article>
    </div>
    <div class="col-6 col-xl-3">
      <article class="surface-card dashboard-stat h-100 skeleton-on-load">
        <div class="dashboard-stat__icon dashboard-stat__icon--rose"><i class="bi bi-bell-fill" aria-hidden="true"></i></div>
        <p class="dashboard-stat__label">SLA Alerts</p>
        <h3 class="dashboard-stat__value">0</h3>
        <p class="dashboard-stat__meta">No active alerts</p>
      </article>
    </div>
  </div>

  <div class="row g-3">
    <div class="col-xl-8">
      <article class="surface-card dashboard-panel h-100 skeleton-on-load">
        <header class="dashboard-panel__header">
          <h3 class="h6 fw-semibold mb-1">Workspace Placeholder</h3>
          <p class="text-muted mb-0">Each block has a dedicated next-step action so operations teams can move quickly.</p>
        </header>
        <div class="dashboard-empty-grid" aria-label="Dashboard empty slots">
          <div class="dashboard-empty-slot">
            <h4 class="dashboard-empty-slot__title">Queue Performance</h4>
            <p class="dashboard-empty-slot__text">Track SLA and aging trends once lead queues are added.</p>
            <button type="button" class="btn btn-outline-secondary btn-sm">Connect Queue Module</button>
          </div>
          <div class="dashboard-empty-slot">
            <h4 class="dashboard-empty-slot__title">Engineer Assignment</h4>
            <p class="dashboard-empty-slot__text">Visualize workload balance and routing efficiency.</p>
            <button type="button" class="btn btn-outline-secondary btn-sm">Enable Routing Rules</button>
          </div>
          <div class="dashboard-empty-slot">
            <h4 class="dashboard-empty-slot__title">Conversion Funnel</h4>
            <p class="dashboard-empty-slot__text">Monitor stage conversion and drop-off points.</p>
            <button type="button" class="btn btn-outline-secondary btn-sm">Add Pipeline Stages</button>
          </div>
          <div class="dashboard-empty-slot">
            <h4 class="dashboard-empty-slot__title">Operational Heatmap</h4>
            <p class="dashboard-empty-slot__text">Identify demand spikes and staffing gaps.</p>
            <button type="button" class="btn btn-outline-secondary btn-sm">Create KPI Report</button>
          </div>
        </div>

        <div class="dashboard-cta mt-3">
          <div class="dashboard-cta__icon" aria-hidden="true"><i class="bi bi-rocket-takeoff-fill"></i></div>
          <div class="dashboard-cta__content">
            <h4 class="h6 fw-semibold mb-1">Start Your First CRM Module</h4>
            <p class="text-muted mb-3">Use this space to plug in lead queues, customer timelines, and workflow automation next.</p>
            <div class="d-flex flex-wrap gap-2">
              <a class="btn btn-outline-secondary btn-sm" href="{% url 'accounts:change_password' %}">
                <i class="bi bi-shield-check me-1" aria-hidden="true"></i> Security Settings
              </a>
            </div>
          </div>
        </div>
      </article>
    </div>

    <div class="col-xl-4">
      <article class="surface-card dashboard-panel h-100 skeleton-on-load">
        <header class="dashboard-panel__header">
          <h3 class="h6 fw-semibold mb-1">Quick Actions</h3>
          <p class="text-muted mb-0">Core account controls</p>
        </header>

        <div class="d-grid gap-2">
          <a class="btn btn-brand" href="{% url 'accounts:change_password' %}"><i class="bi bi-key-fill me-1" aria-hidden="true"></i> Change Password</a>
          <a class="btn btn-outline-secondary" href="{% url 'accounts:logout' %}"><i class="bi bi-box-arrow-right me-1" aria-hidden="true"></i> Sign Out</a>
        </div>
      </article>
    </div>
  </div>
</section>
{% endblock %}