{% extends "base.html" %}
{% import "_empty.html" as empty %}
{% 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 data-live-list hidden></div>
<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" data-cell="meta">{{ plan_counts.get(project.id, 0) }}<span class="m-only"> plans</span></span>
        <span class="path path-tail" data-cell="meta" title="{{ project.project_root or '' }}/{{ project.plan_directory }}">
          {{ project.plan_directory }}</span>
        <span data-cell="meta">
          {# Filled by app.js from /projects/freshness-mix. Computing it here
             walked every plan in every project, several git processes each,
             in front of the first byte of this page. #}
          <span class="dots" data-mix="{{ project.id }}"><span class="sub">—</span></span>
        </span>
        <span class="when" data-cell="meta">{{ 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>
      {% include "_pager.html" %}
    </div>
  </div>
  {% else %}
  {% call empty.state('project', 'No projects yet') %}
    <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>
  {% endcall %}
  {% endif %}

  {% if recent_activity %}
  <div class="card">
    <div class="card-head">Recent activity</div>
    {% for item in recent_activity %}
    <div class="grid-row cols-activity">
      <span data-cell="chip"><span class="vtag {% if loop.first %}vtag-current{% endif %}">v{{ item.plan_file.current_version }}</span></span>
      <span><a class="name" href="/plans/{{ item.plan_file.id }}">{{ item.plan_file.name }}.md</a>
        <span class="when">updated in {{ item.project.name }}</span></span>
      <span class="when" data-cell="meta">{{ item.updated_at | relative_time }}</span>
    </div>
    {% endfor %}
  </div>
  {% endif %}


</div>
{% endblock %}