{% extends "base.html" %} {% block title %}Dashboard · CalMiner{% endblock %} {%
block head_extra %}
<link rel="stylesheet" href="/static/css/dashboard.css" />
{% endblock %} {% block content %}
<section class="page-header dashboard-header">
  <div>
    <h1>Welcome back</h1>
    <p class="page-subtitle">
      Monitor project progress and scenario insights at a glance.
    </p>
  </div>
  <div class="header-actions">
    <a class="btn primary" href="{{ url_for('projects.create_project_form') }}"
      >New Project</a
    >
    <a class="btn" href="#">Import Data</a>
  </div>
</section>

<section class="dashboard-metrics">
  <article class="metric-card">
    <h2>Total Projects</h2>
    <p class="metric-value">{{ metrics.total_projects }}</p>
    <span class="metric-caption">Across all operation types</span>
  </article>
  <article class="metric-card">
    <h2>Active Scenarios</h2>
    <p class="metric-value">{{ metrics.active_scenarios }}</p>
    <span class="metric-caption">Ready for analysis</span>
  </article>
  <article class="metric-card">
    <h2>Pending Simulations</h2>
    <p class="metric-value">{{ metrics.pending_simulations }}</p>
    <span class="metric-caption">Awaiting execution</span>
  </article>
  <article class="metric-card">
    <h2>Last Data Import</h2>
    <p class="metric-value">{{ metrics.last_import or '—' }}</p>
    <span class="metric-caption">UTC timestamp</span>
  </article>
</section>

<section class="dashboard-grid">
  <div class="grid-main">
    <div class="card">
      <header class="card-header">
        <h2>Recent Projects</h2>
        <a
          class="btn btn-link"
          href="{{ url_for('projects.project_list_page') }}"
          >View all</a
        >
      </header>
      {% if recent_projects %}
      <table class="table">
        <thead>
          <tr>
            <th>Project</th>
            <th>Operation</th>
            <th>Updated</th>
          </tr>
        </thead>
        <tbody>
          {% for project in recent_projects %}
          <tr>
            <td class="table-cell-actions">
              <a
                class="table-link"
                href="{{ url_for('projects.view_project', project_id=project.id) }}"
                >{{ project.name }}</a
              >
              <button
                class="btn btn-ghost"
                data-export-trigger
                data-export-target="projects"
                title="Export projects dataset"
              >
                <span aria-hidden="true">⇩</span>
                <span class="sr-only">Export</span>
              </button>
            </td>
            <td>
              {{ project.operation_type.value.replace('_', ' ') | title }}
            </td>
            <td>
              {{ project.updated_at.strftime('%Y-%m-%d') if project.updated_at
              else '—' }}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p class="empty-state">
        No recent projects.
        <a href="{{ url_for('projects.create_project_form') }}"
          >Create one now.</a
        >
      </p>
      {% endif %}
    </div>

    <div class="card">
      <header class="card-header">
        <h2>Simulation Pipeline</h2>
      </header>
      {% if simulation_updates %}
      <ul class="timeline">
        {% for update in simulation_updates %}
        <li>
          <span class="timeline-label"
            >{{ update.timestamp_label or '—' }}</span
          >
          <div>
            <strong>{{ update.title }}</strong>
            <p>{{ update.description }}</p>
          </div>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      <p class="empty-state">
        No simulation runs yet. Configure a scenario to start simulations.
      </p>
      {% endif %}
    </div>
  </div>

  <aside class="grid-sidebar">
    <div class="card">
      <header class="card-header">
        <h2>Scenario Alerts</h2>
      </header>
      {% if scenario_alerts %}
      <ul class="alerts-list">
        {% for alert in scenario_alerts %}
        <li>
          <strong>{{ alert.title }}</strong>
          <p>{{ alert.message }}</p>
          {% if alert.link %}
          <a class="btn btn-link" href="{{ alert.link }}">Review</a>
          {% endif %}
          <button
            class="btn btn-ghost"
            data-export-trigger
            data-export-target="scenarios"
            title="Export scenarios dataset"
          >
            <span aria-hidden="true">⇩</span>
            <span class="sr-only">Export</span>
          </button>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      <p class="empty-state">
        All scenarios look good. We'll highlight issues here.
      </p>
      {% endif %}
    </div>

    <div class="card">
      <header class="card-header">
        <h2>Resources</h2>
      </header>
      <ul class="links-list">
        <li>
          <a href="https://github.com/" target="_blank">CalMiner Repository</a>
        </li>
        <li>
          <a href="https://example.com/docs" target="_blank">Documentation</a>
        </li>
        <li><a href="mailto:support@example.com">Contact Support</a></li>
      </ul>
    </div>
  </aside>
</section>
{% endblock %}