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

{% block topbar_main %}
<h1>Projects</h1>
{% endblock %}

{% block topbar_actions %}
<div class="listctl" id="listctl">
<label class="sr-only" for="list-filter">Filter</label>
    <input class="input input-sm" type="search" id="list-filter" data-list-filter
           placeholder="Filter projects…" autocomplete="off" spellcheck="false">
    <form method="get" action="/projects" id="sort-form">
      <label class="field-label" for="sort" style="display:none">Sort</label>
      <select class="btn" name="sort" id="sort" onchange="this.form.requestSubmit()">
        <option value="updated" {% if sort != 'name' %}selected{% endif %}>Sort: Recently updated</option>
        <option value="name" {% if sort == 'name' %}selected{% endif %}>Sort: Name</option>
      </select>
    </form>
</div>
    <a class="btn btn-primary" href="/projects/new">New project</a>
{% endblock %}

{% block content %}
<div class="pane">

  <div class="stat-grid">
    <div class="stat"><div class="v tnum">{{ total_projects }}</div><div class="k">Projects</div></div>
    <div class="stat"><div class="v tnum">{{ total_plans }}</div><div class="k">Plan files</div></div>
    <div class="stat"><div class="v tnum">{{ updated_this_week }}</div><div class="k">Updated this week</div></div>
  </div>

  {% if projects %}
  <div class="card" data-listgroup>
    <div class="tablewrap">
      <div class="grid-head cols-projects">
        <span>Project</span><span>Plans</span><span>Plan directory</span>
        <span>Freshness</span><span>Updated</span>
      </div>
      <div data-list>
      {% for project in projects %}
      <div class="grid-row cols-projects" data-list-item
           data-name="{{ project.name }}"
           data-files="{{ plan_counts.get(project.id, 0) }}"
           data-updated="{{ (project.updated_at or project.created_at).isoformat() if (project.updated_at or project.created_at) }}">
        <span>
          <a class="name" href="/projects/{{ project.id }}">{{ project.name }}</a>
          {% if project.description %}<div class="sub">{{ project.description }}</div>{% endif %}
        </span>
        <span class="path tnum">{{ plan_counts.get(project.id, 0) }}</span>
        <span class="path" title="{{ project.project_root or '' }}/{{ project.plan_directory }}">
          {{ project.plan_directory }}</span>
        <span>
          {% set mix = freshness_mix.get(project.id) %}
          {% if mix %}
          <span class="dots">
            {% if mix.fresh %}<span class="d d-fresh"></span>{{ mix.fresh }}{% endif %}
            {% if mix.aging %}<span class="d d-aging"></span>{{ mix.aging }}{% endif %}
            {% if mix.suspect %}<span class="d d-suspect"></span>{{ mix.suspect }}{% endif %}
            {% if mix.stale %}<span class="d d-stale"></span>{{ mix.stale }}{% endif %}
          </span>
          {% else %}<span class="sub">—</span>{% endif %}
        </span>
        <span class="when">{{ project.updated_at | relative_time if project.updated_at
                              else project.created_at | relative_time }}</span>
      </div>
      {% endfor %}
      </div>
      <div class="empty-filter" data-list-empty hidden>Nothing matches that filter.</div>
    </div>
  </div>
  {% else %}
  <div class="card empty">
    <h2>No projects yet</h2>
    <p>Point flanner at a repository and it takes over the plan files your agents write there.</p>
    <a class="btn btn-primary" href="/projects/new">New project</a>
  </div>
  {% endif %}

  {% if recent_activity %}
  <div class="card">
    <div class="card-head">Recent activity</div>
    <div style="padding: 4px 18px 10px">
      {% for item in recent_activity %}
      <div style="display:flex; align-items:center; gap:10px; padding:9px 0;
                  {% if not loop.first %}border-top:1px solid var(--divider);{% endif %}
                  font-size:12.5px">
        <span class="vtag {% if loop.first %}vtag-current{% endif %}">v{{ item.plan_file.current_version }}</span>
        <a class="name" href="/plans/{{ item.plan_file.id }}">{{ item.plan_file.name }}.md</a>
        <span style="color:var(--text-3)">updated in {{ item.project.name }}</span>
        <span style="margin-left:auto; color:var(--text-4); font-size:11.5px">
          {{ item.updated_at | relative_time }}</span>
      </div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  {% if total_pages and total_pages > 1 %}
  <div class="footnote" style="justify-content:center">
    {% if page > 1 %}<a class="btn btn-sm" href="/projects?page={{ page - 1 }}&sort={{ sort }}">Previous</a>{% endif %}
    <span>page {{ page }} / {{ total_pages }} ({{ total_projects }} total)</span>
    {% if page < total_pages %}<a class="btn btn-sm" href="/projects?page={{ page + 1 }}&sort={{ sort }}">Next</a>{% endif %}
  </div>
  {% endif %}

</div>
{% endblock %}