{% extends "base.html" %}
{% block title %}{{ project.name }} · Project · CalMiner{% endblock %}

{% block head_extra %}
  <link rel="stylesheet" href="/static/css/projects.css" />
{% endblock %}

{% block content %}
  <nav class="breadcrumb">
    <a href="{{ url_for('projects.project_list_page') }}">Projects</a>
    <span aria-current="page">{{ project.name }}</span>
  </nav>

  <header class="page-header">
    <div>
      <h1>{{ project.name }}</h1>
      <p class="text-muted">{{ project.operation_type.value.replace('_', ' ') | title }}</p>
    </div>
    <div class="header-actions">
      <a class="btn" href="{{ url_for('projects.edit_project_form', project_id=project.id) }}">Edit Project</a>
      <a class="btn primary" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">New Scenario</a>
    </div>
  </header>

  <section class="project-metrics">
    <article class="metric-card">
      <h2>Total Scenarios</h2>
      <p class="metric-value">{{ scenario_stats.total }}</p>
      <span class="metric-caption">Across this project</span>
    </article>
    <article class="metric-card">
      <h2>Active</h2>
      <p class="metric-value">{{ scenario_stats.active }}</p>
      <span class="metric-caption">Currently live analyses</span>
    </article>
    <article class="metric-card">
      <h2>Draft</h2>
      <p class="metric-value">{{ scenario_stats.draft }}</p>
      <span class="metric-caption">Awaiting validation</span>
    </article>
    <article class="metric-card">
      <h2>Archived</h2>
      <p class="metric-value">{{ scenario_stats.archived }}</p>
      <span class="metric-caption">Historical references</span>
    </article>
  </section>

  <div class="project-layout">
    <section class="card">
      <h2>Project Overview</h2>
      <dl class="definition-list">
        <div>
          <dt>Location</dt>
          <dd>{{ project.location or '—' }}</dd>
        </div>
        <div>
          <dt>Description</dt>
          <dd>{{ project.description or 'No description provided.' }}</dd>
        </div>
        <div>
          <dt>Created</dt>
          <dd>{{ project.created_at.strftime('%Y-%m-%d %H:%M') }}</dd>
        </div>
        <div>
          <dt>Updated</dt>
          <dd>{{ project.updated_at.strftime('%Y-%m-%d %H:%M') }}</dd>
        </div>
        <div>
          <dt>Latest Scenario Update</dt>
          <dd>{{ scenario_stats.latest_update.strftime('%Y-%m-%d %H:%M') if scenario_stats.latest_update else '—' }}</dd>
        </div>
      </dl>
    </section>

    <section class="card">
      <header class="card-header">
        <h2>Scenarios</h2>
        <a class="btn" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
      </header>
      {% if scenarios %}
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Status</th>
                <th>Currency</th>
                <th>Primary Resource</th>
                <th class="text-right">Actions</th>
              </tr>
            </thead>
            <tbody>
              {% for scenario in scenarios %}
                <tr>
                  <td>{{ scenario.name }}</td>
                  <td>{{ scenario.status.value.title() }}</td>
                  <td>{{ scenario.currency or '—' }}</td>
                  <td>{{ scenario.primary_resource.value.replace('_', ' ') | title if scenario.primary_resource else '—' }}</td>
                  <td class="text-right">
                    <a class="table-link" href="{{ url_for('scenarios.view_scenario', scenario_id=scenario.id) }}">View</a>
                    <a class="table-link" href="{{ url_for('scenarios.edit_scenario_form', scenario_id=scenario.id) }}">Edit</a>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <p class="empty-state">No scenarios yet. <a href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Create the first scenario.</a></p>
      {% endif %}
    </section>
  </div>
{% endblock %}