{% extends "base.html" %}
{% block title %}Projects · CalMiner{% endblock %}

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

{% block content %}
  <section class="page-header">
    <div>
      <h1>Projects</h1>
      <p class="text-muted">Manage mining projects and explore their scenarios.</p>
    </div>
    <div class="actions">
      <input
        type="search"
        class="form-control"
        placeholder="Filter projects..."
        data-project-filter
        aria-label="Filter projects"
      />
  <a class="btn btn--primary" href="{{ url_for('projects.create_project_form') }}">New Project</a>
    </div>
  </section>

  {% if projects %}
    <section class="projects-grid" data-project-table>
      {% for project in projects %}
        <article class="project-card" data-project-entry>
          <header class="project-card__header">
            <h2 class="project-card__title">
              <a href="{{ url_for('projects.view_project', project_id=project.id) }}">{{ project.name }}</a>
            </h2>
            <span class="project-card__type badge">{{ project.operation_type.value.replace('_', ' ') | title }}</span>
          </header>

          <p class="project-card__description">
            {{ project.description or 'No description provided yet.' }}
          </p>

          <dl class="project-card__meta">
            <div>
              <dt>Scenarios</dt>
              <dd><span class="badge badge-pill">{{ project.scenario_count }}</span></dd>
            </div>
            <div>
              <dt>Location</dt>
              <dd>{{ project.location or '—' }}</dd>
            </div>
            <div>
              <dt>Updated</dt>
              <dd>{{ project.updated_at.strftime('%Y-%m-%d') if project.updated_at else '—' }}</dd>
            </div>
          </dl>

          <footer class="project-card__footer">
            <div class="project-card__links">
              <a class="btn btn--link" href="{{ url_for('projects.view_project', project_id=project.id) }}">View Project</a>
              <a class="btn btn--link" href="{{ url_for('scenarios.create_scenario_form', project_id=project.id) }}">Add Scenario</a>
              <a class="btn btn--link" href="{{ url_for('projects.edit_project_form', project_id=project.id) }}">Edit</a>
            </div>
            <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>
          </footer>
        </article>
      {% endfor %}
    </section>
  {% else %}
    <p>No projects yet. <a href="{{ url_for('projects.create_project_form') }}">Create your first project.</a></p>
  {% endif %}
{% endblock %}