{% extends "base.html" %}
{% import "_icon.html" as ico %}
{% import "_empty.html" as empty %}
{% import "_cli_only.html" as terminal %}
{% block title %}{{ project.name }}{% endblock %}

{% block topbar_back %}
<a class="btn back" href="/projects" aria-label="Back to projects" title="Back to projects"><span aria-hidden="true">←</span></a>
{% endblock %}

{% block topbar_main %}
<nav class="crumbs" aria-label="Breadcrumb">
    <a href="/projects">Projects</a><span class="sep">/</span>
    <span class="here">{{ project.name }}</span>
  </nav>
{% endblock %}

{% block topbar_actions %}
<div class="listctl" id="listctl">
<label class="sr-only" for="plans-filter">Filter</label>
    <input class="input input-sm" type="search" id="plans-filter" data-list-filter
           placeholder="Filter plans…" autocomplete="off" spellcheck="false">
    <label class="sr-only" for="plans-sort">Sort</label>
    <select class="btn btn-sm" id="plans-sort" data-list-sort>
      <option value="updated:desc">Sort: Recently updated</option>
      <option value="name:asc">Sort: Name</option>
      <option value="version:desc">Sort: Version</option>
    </select>
</div>
    <form method="post" action="/projects/{{ project.id }}/delete">
      <button class="btn btn-danger hold-confirm" type="submit" data-hold-confirm="1200"
              title="Press and hold to delete {{ project.name }}. Plan files on disk are left alone.">Delete project</button>
    </form>
    <a class="btn btn-primary" href="/projects/{{ project.id }}/plans/new">New plan</a>
{% endblock %}

{% block content %}
<div data-live-list hidden></div>
<div class="pane">

  {% if said %}<div class="notice info" role="status">{{ said }}</div>{% endif %}

  {# The page's title, not a card. The name was boxed and 18px, three pixels
     above the bar's title and read twice; a thing's title is a .page-title
     in the pane, with the crumb trail above it. #}
  <div class="page-head">
    <div>
      <h1 class="page-title">{{ project.name }}</h1>
      {% if project.description %}<p class="page-sub">{{ project.description }}</p>{% endif %}
    </div>
    <dl class="stat-inline">
      <div><dt>Plans</dt><dd class="mono tnum">{{ total }}</dd></div>
      <div><dt>Plan directory</dt><dd class="mono">{{ project.plan_directory }}</dd></div>
    </dl>
    {% if project.project_root %}
    <div class="filebar">
      <span>Project root:</span><span class="p">{{ project.project_root }}</span>
      {% if project.auto_gitignore %}<span class="ok">.gitignore managed {{ ico.icon('check', 13) }}</span>{% endif %}
    </div>
    {% endif %}
  </div>

  <div class="card card-pad">
    <h2 class="card-title" style="margin-bottom:2px">Sharing and sync</h2>
    {% if sharing.workspace_id %}
    <div class="kv"><span>Workspace</span><b class="mono">{{ sharing.workspace_id }}</b></div>
    <div class="kv"><span>Your role</span><b>{{ sharing.role or 'no access yet' }}</b></div>
    {% if not sharing.role and sharing.reason %}<p class="hint">{{ sharing.reason }}</p>{% endif %}
    {% else %}
    <div class="kv"><span>Workspace</span><b>none, so these plans stay on this machine</b></div>
    {% endif %}
    {{ terminal.row(cli_only("Bind a repository to a workspace"), 'flanner join <workspace-id> --project "' ~ project.name ~ '"') }}
    <form method="post" action="/mesh/pushes" class="switch-row">
      <input type="hidden" name="back" value="/projects/{{ project.id }}">
      <input type="hidden" name="accept" value="{{ 'off' if sharing.accepting else 'on' }}">
      <div class="body">Accept pushes · {{ 'on' if sharing.accepting else 'off' }}
        <span>Set for this device, so for every project on it. A push adds versions to
          history and never overwrites what you have.{% if sharing.locked %}
          {{ sharing.env }} is set where flanner web runs, and this page cannot override it.{% endif %}</span></div>
      <button class="btn btn-sm" type="submit" style="margin-left:auto"
              {% if sharing.locked %}disabled title="Set by {{ sharing.env }}"{% endif %}>
        {{ 'Refuse pushes' if sharing.accepting else 'Accept pushes' }}</button>
    </form>
  </div>

  {% if plan_files %}
  <div class="card" data-listgroup>
    <div class="card-head">Plans <span class="note">{{ total }}</span></div>
    <div class="tablewrap">
      <div class="grid-head cols-plans">
        <span>Plan</span><span>Version</span><span>Links</span><span>Author</span><span>Updated</span>
      </div>
      <div data-list>
      {% for plan_file in plan_files %}
      <div class="plan-file-card" data-list-item
           data-name="{{ plan_file.name }}"
           data-version="{{ plan_file.current_version }}"
           data-updated="{{ plan_file.updated_at.isoformat() if plan_file.updated_at }}">
        <span><a class="name" href="/plans/{{ plan_file.id }}">{{ plan_file.name }}.md</a></span>
        <span data-cell="chip"><span class="vtag">v{{ plan_file.current_version }}</span></span>
        <span data-cell="meta">
          {% set lc = linear_counts.get(plan_file.id|string) %}
          {% if lc %}<span class="pill pill-quiet linear-marker">Linear ×{{ lc }}</span>{% else %}
          <span class="sub">—</span>{% endif %}
        </span>
        <span class="when" data-cell="meta">{{ plan_file.created_by or 'user' }}</span>
        <span class="when" data-cell="meta">{{ plan_file.updated_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('plan', 'No plans in this project') %}
    <p>Your agents will fill this in, or you can write the first one yourself.</p>
    <a class="btn btn-primary" href="/projects/{{ project.id }}/plans/new">New plan</a>
  {% endcall %}
  {% endif %}


</div>
{% endblock %}