{% extends "base.html" %}
{% block title_suffix %} — Library{% endblock %}
{% block content %}

  {% if flash %}
  <article class="notice-banner" style="margin-bottom: 1.5rem;">
    <strong>Import complete</strong>
    <p>{{ flash }}</p>
  </article>
  {% endif %}

  <section class="hero">
    <div class="hero-left">
      <div class="eyebrow"><span class="bar"></span>{{ eyebrow_date }} — Dashboard</div>
      <h1>Your <span class="ember">library</span>.</h1>
      <p class="lede">{{ subtitle }}.</p>
    </div>
    <div class="hero-right">
      <div class="metrics-strip">
        {% if counts.clean %}<span class="m" title="{{ counts.clean }} clean — working tree matches HEAD and is in sync with the last fetch"><span class="pip clean"></span><span class="count">{{ '%02d' % counts.clean }}</span> <span class="lbl">clean</span></span>{% endif %}
        {% if counts.dirty %}<span class="m" title="{{ counts.dirty }} with local changes — modified, staged, or untracked files"><span class="pip dirty"></span><span class="count">{{ '%02d' % counts.dirty }}</span> <span class="lbl">local changes</span></span>{% endif %}
        {% if counts.conflict %}<span class="m" title="{{ counts.conflict }} in conflict — working tree is dirty AND behind remote; resolve locally before pulling"><span class="pip conflict"></span><span class="count">{{ '%02d' % counts.conflict }}</span> <span class="lbl">conflict</span></span>{% endif %}
        {% if counts.diverged %}<span class="m" title="{{ counts.diverged }} diverged — local and remote both have commits the other doesn't; rebase or merge to reconcile"><span class="pip diverged"></span><span class="count">{{ '%02d' % counts.diverged }}</span> <span class="lbl">diverged</span></span>{% endif %}
        {% if counts.missing %}<span class="m" title="{{ counts.missing }} missing — tracked in gitstow but not found on disk (or unreadable); re-clone or remove"><span class="pip missing"></span><span class="count">{{ '%02d' % counts.missing }}</span> <span class="lbl">missing</span></span>{% endif %}
        {% if counts.behind %}<span class="m" title="{{ counts.behind }} behind upstream — remote has commits you don't"><span class="pip behind"></span><span class="count">{{ '%02d' % counts.behind }}</span> <span class="lbl">behind</span></span>{% endif %}
        {% if counts.ahead %}<span class="m" title="{{ counts.ahead }} ahead of upstream — you have local commits not yet pushed"><span class="pip ahead"></span><span class="count">{{ '%02d' % counts.ahead }}</span> <span class="lbl">ahead</span></span>{% endif %}
        {% if counts.frozen %}<span class="m" title="{{ counts.frozen }} frozen — intentionally skipped by 'Pull all'"><span class="pip frozen"></span><span class="count">{{ '%02d' % counts.frozen }}</span> <span class="lbl">frozen</span></span>{% endif %}
      </div>
      <button type="button" class="info-btn" title="How to read this dashboard" onclick="document.getElementById('help-dialog').showModal()" aria-label="Help">?</button>
    </div>
  </section>

  {# Every control here acts on repos in a workspace — the filters, the bulk
     buttons, and the clone form behind "+ Add repo". With no workspace
     configured there is nothing for any of them to act on, so the whole bar
     goes rather than offering buttons whose only possible answer is the hint. #}
  {% if workspaces %}
  <div class="action-bar">
    <select id="ws-filter" title="Show only one workspace's repos">
      <option value="">All workspaces</option>
      {% for ws in workspaces %}<option value="{{ ws.label }}">{{ ws.label }}</option>{% endfor %}
    </select>
    <input type="search" id="repo-search" placeholder="Search repos, tags…" aria-label="Search repos and tags" title="Filter rows by repo name or tag">
    <label class="inline" title="Hide rows for frozen repos"><input type="checkbox" id="hide-frozen" aria-label="Hide frozen repos"> Hide frozen</label>
    <div class="spacer"></div>
    <button class="btn btn-ghost btn-sm"
            title="Re-read local state now — re-reads repos.yaml and runs 'git status' on each repo. Does NOT run 'git fetch'."
            hx-get="/"
            hx-select="main"
            hx-target="main"
            hx-swap="outerHTML">↻ Refresh</button>
    <button class="btn btn-outline btn-sm"
            title="Fetch all remotes in parallel — updates ahead/behind counts without merging. Includes frozen repos."
            hx-post="/repos/fetch-all"
            hx-target="#pull-summary"
            hx-swap="outerHTML"
            hx-sync="this:drop">⟳ Fetch all</button>
    <a href="/add" class="btn btn-outline btn-sm" title="Clone a new repo into a workspace">+ Add repo</a>
    <button class="btn btn-primary btn-sm"
            title="Pull every non-frozen repo in parallel. Shows a summary panel with per-repo results."
            hx-post="/repos/pull-all"
            hx-target="#pull-summary"
            hx-swap="outerHTML"
            hx-sync="this:drop"
            hx-confirm="Pull every non-frozen repo?">↓ Pull all</button>
  </div>

  <article id="pull-summary" hidden></article>
  {% endif %}

  {% if repos %}
  <div class="table-wrap">
    <div class="table-scroll">
    <table class="ledger">
      <thead>
        <tr>
          <th style="width: 2.8rem;" title="Row number">№</th>
          <th style="width: 7.5rem;" title="State of the working tree and relationship to upstream remote">Status</th>
          <th title="Repository name — click to open details">Repository</th>
          <th title="Which gitstow workspace manages this repo">Workspace</th>
          <th class="col-branch" title="Current local branch">Branch</th>
          <th title="Commits ahead (↑) / behind (↓) upstream — reflects your last fetch, not live remote">Remote Δ</th>
          <th class="col-tags" title="Your tags + workspace auto-tags">Tags</th>
          <th class="col-lastpull" title="When gitstow last pulled this repo (not the last git fetch)">Last pull</th>
          <th style="text-align: right;" title="Pull + more-actions menu">Actions</th>
        </tr>
      </thead>
      <tbody hx-get="/dashboard/rows"
             hx-trigger="every 30s"
             hx-swap="innerHTML">
        {% for repo in repos %}{% include "partials/repo_row.html" %}{% endfor %}
      </tbody>
    </table>
    </div>
  </div>

  <p id="filter-empty" class="filter-empty" hidden>No repos match the current filters.</p>

  <small style="display: block; margin-top: 1.2rem; color: var(--muted-soft); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem;">
    auto-refresh 30s · click repo name → details · pull runs in place · <a href="#" onclick="document.getElementById('help-dialog').showModal(); return false;" style="color: var(--muted); text-decoration: underline;">what does this dashboard show?</a>
  </small>

  {% elif not workspaces %}

  {% with lede="A workspace is the directory gitstow clones into. Add one before adding repos — from the workspaces page, or from a terminal:", cta=True, centered=True %}
  {% include "partials/no_workspaces.html" %}
  {% endwith %}

  {% else %}

  <article class="card" style="text-align: center; padding: 3rem 2rem;">
    <h4 style="margin-bottom: 0.75rem;">Your library is empty.</h4>
    <p style="color: var(--muted); margin-bottom: 1.25rem;">Add your first repository to get started.</p>
    <a href="/add" class="btn btn-primary">+ Add repo</a>
  </article>

  {% endif %}

  <dialog id="help-dialog" class="help-dialog">
    <form method="dialog" class="help-form">
      <header class="help-head">
        <h2>Reading the dashboard</h2>
        <button type="submit" class="help-close" aria-label="Close" title="Close (or press Esc)">×</button>
      </header>

      <section>
        <h4>Statuses</h4>
        <dl class="help-grid">
          <dt><span class="status status-clean"><span class="dot"></span>clean</span></dt>
          <dd>Working tree matches HEAD; no uncommitted changes. In sync with your last fetch.</dd>

          <dt><span class="status status-dirty"><span class="dot"></span>local changes</span></dt>
          <dd>Uncommitted local changes — the label shows the composition (modified/staged/untracked). Commit or stash modified/staged work before pulling. Untracked-only repos can still pull.</dd>

          <dt><span class="status status-conflict"><span class="dot"></span>conflict</span></dt>
          <dd>Working tree is dirty AND behind remote, or local and remote have diverged. Resolve locally before pulling.</dd>

          <dt><span class="status status-behind"><span class="dot"></span>behind</span></dt>
          <dd>Remote has commits you don't. The Pull button turns orange and shows the count.</dd>

          <dt><span class="status status-ahead"><span class="dot"></span>ahead</span></dt>
          <dd>You have local commits not yet pushed. Pull does nothing here — consider <code>git push</code>.</dd>

          <dt><span class="status status-frozen"><span class="dot"></span>frozen</span></dt>
          <dd>Intentionally skipped by "Pull all". Lock icon marks the row. Unfreeze from the ⋯ menu.</dd>
        </dl>
      </section>

      <section class="section">
        <h4>The Pull button</h4>
        <dl class="help-grid">
          <dt><button type="button" class="btn btn-primary btn-sm" onclick="return false;">↓ Pull 5</button></dt>
          <dd><strong>Orange</strong> — repo is behind. Click to fast-forward by the shown count.</dd>

          <dt><button type="button" class="btn btn-ghost btn-sm" onclick="return false;">Pull</button></dt>
          <dd><strong>Ghost</strong> — already up to date, or has local changes/ahead. The button still works; it just won't change anything useful.</dd>

          <dt><button type="button" class="btn btn-ghost btn-sm" disabled>Pull</button></dt>
          <dd><strong>Disabled</strong> — repo is frozen, in conflict, diverged from remote, or missing on disk. Pull is blocked until you resolve.</dd>
        </dl>
      </section>

      <section class="section">
        <h4>The Remote Δ column</h4>
        <p>Ahead (<code>↑ N</code>), behind (<code>↓ N</code>), or even (<code>—</code>) relative to upstream. <strong>These counts reflect your last <code>git fetch</code>, not live remote state.</strong> Click <strong>Fetch all</strong> to refresh them without merging, or <strong>Pull all</strong> to fetch and merge. A <code>local</code> badge means the repo has no upstream remote at all — bulk pulls skip it.</p>
      </section>

      <section class="section">
        <h4>Auto-refresh (every 30s)</h4>
        <p>Refresh re-reads <strong>local state only</strong>: your <code>~/.gitstow/repos.yaml</code> registry plus <code>git status</code> on each tracked repo. It catches:</p>
        <ul>
          <li>New repos added via the CLI (<code>gitstow add</code> in another terminal)</li>
          <li>Local commits, branch switches, dirty files you just edited</li>
        </ul>
        <p style="margin-top: 0.75rem;">It does <strong>NOT</strong> run <code>git fetch</code> — so "behind" and "ahead" counts won't update unless you use <strong>Fetch all</strong> or <strong>Pull all</strong>.</p>
      </section>

      <section class="section">
        <h4>Actions</h4>
        <dl class="help-grid">
          <dt>Pull</dt><dd>Pull from remote (fast-forward only).</dd>
          <dt>↓ Pull all</dt><dd>Pull every non-frozen repo in parallel. Automatically fetches first, then merges.</dd>
          <dt>⟳ Fetch all</dt><dd>Fetch all remotes in parallel — updates ahead/behind counts without merging. Includes frozen repos.</dd>
          <dt>+ Add repo</dt><dd>Clone a new repo into a workspace.</dd>
          <dt>↻ Refresh</dt><dd>Re-read local state now (same as the 30-second auto).</dd>
          <dt>Hide frozen</dt><dd>Collapse rows for frozen repos.</dd>
          <dt>⋯</dt><dd>Per-row menu: view details, open folder, copy URL/path/local path, freeze/unfreeze, edit tags, remove.</dd>
          <dt>Shutdown (footer)</dt><dd>Stop the gitstow server and close the dashboard.</dd>
        </dl>
      </section>

      <footer class="help-foot">
        <button type="submit" class="btn btn-primary">Got it</button>
      </footer>
    </form>
  </dialog>

{% endblock %}
{% block body_extra %}
  <script src="/static/dashboard.js"></script>
  <script>
    document.addEventListener('click', (e) => {
      document.querySelectorAll('details.menu[open]').forEach(d => {
        if (!d.contains(e.target)) d.removeAttribute('open');
      });
    });
    // Close dialog when clicking its backdrop (native <dialog> doesn't do this by default)
    const helpDialog = document.getElementById('help-dialog');
    if (helpDialog) {
      helpDialog.addEventListener('click', (e) => {
        if (e.target === helpDialog) helpDialog.close();
      });
    }
  </script>
{% endblock %}