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

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

{% block topbar_actions %}
<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">
    <div class="card-head">Projects
      <span class="note">{{ projects | length }} shown</span>
      <a class="btn btn-sm" style="margin-left:auto" href="/projects">all {{ total_projects }} projects</a></div>
    <div class="tablewrap">
      {% for project in projects %}
      <div class="grid-row cols-recent">
        <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) }} plans</span>
        <span class="path">{{ project.plan_directory }}</span>
        <span class="when">{{ project.created_at.strftime('%d %b %Y') if project.created_at }}</span>
      </div>
      {% endfor %}
    </div>
  </div>
  {% else %}
  <div class="card empty">
    <h2>Nothing here yet</h2>
    <p>Create a project and flanner takes over the plan files your agents write in it.</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)">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 %}

</div>
{% endblock %}