{% extends "base.html" %}
{% block title_suffix %} — {{ repo.key }}{% endblock %}
{% block container_style %} style="max-width: 860px;"{% endblock %}
{% block content %}

  <p class="breadcrumb"><a href="/">← Library</a> / {{ repo.key }}</p>

  <div class="drawer-head">
    <div>
      <div style="font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.55rem;">
        in workspace <span class="ws ws-{{ repo.ws_slot }}" style="font-size: 0.78rem;">{{ repo.workspace }}</span>
      </div>
      <h2 class="big-name">{{ repo.key }}</h2>
      <div style="display: flex; gap: 1.25rem; margin-top: 0.85rem; flex-wrap: wrap;">
        {% if not repo.exists %}
          <span class="status status-conflict"><span class="dot"></span>missing on disk</span>
        {% else %}
          {% if repo.frozen %}
            <span class="status status-frozen"><span class="dot"></span>frozen</span>
          {% elif repo.dirty > 0 and repo.behind > 0 %}
            <span class="status status-conflict"><span class="dot"></span>conflict</span>
          {% elif repo.dirty > 0 %}
            <span class="status status-dirty"><span class="dot"></span>{{ repo.dirty }} dirty</span>
          {% else %}
            <span class="status status-clean"><span class="dot"></span>clean</span>
          {% endif %}
          {% if repo.behind > 0 %}<span class="status status-behind"><span class="dot"></span>{{ repo.behind }} behind</span>{% endif %}
          {% if repo.ahead > 0 %}<span class="status status-ahead"><span class="dot"></span>{{ repo.ahead }} ahead</span>{% endif %}
        {% endif %}
      </div>
    </div>
    <div style="display: inline-flex; gap: 0.45rem; flex-wrap: wrap;">
      <button class="btn btn-primary btn-sm">↓ Pull now</button>
      <button class="btn btn-outline btn-sm"
              title="Reveal this repo in your file manager"
              hx-post="/repos/{{ repo.workspace }}/{{ repo.key }}/open-folder"
              hx-swap="none"
              data-toast="Opened {{ repo.key }} in file manager">Open folder</button>
      <button class="btn btn-outline btn-sm js-copy"
              data-copy="{{ repo.remote_url }}"
              data-copy-label="remote URL"
              title="Copy remote URL: {{ repo.remote_url }}"
              {% if not repo.remote_url %}disabled{% endif %}>Copy URL</button>
      <button class="btn btn-outline btn-sm js-copy"
              data-copy="{{ repo.key }}"
              data-copy-label="repo path"
              title="Copy repo key: {{ repo.key }}">Copy path</button>
      <button class="btn btn-outline btn-sm js-copy"
              data-copy="{{ repo.local_path }}"
              data-copy-label="local path"
              title="Copy absolute local path: {{ repo.local_path }}">Copy local path</button>
    </div>
  </div>

  <section>
    <h4>Metadata</h4>
    <dl class="meta-grid">
      <dt>Remote</dt>     <dd>{{ repo.remote_url or '—' }}</dd>
      <dt>Local path</dt>  <dd>{{ repo.local_path }}</dd>
      <dt>Branch</dt>      <dd>{{ repo.branch }}</dd>
      {% if repo.commit and repo.commit.hash %}
      <dt>Last commit</dt> <dd>{{ repo.commit.hash }} · {{ repo.commit.date }} · "{{ repo.commit.message }}"</dd>
      {% endif %}
      <dt>Disk size</dt>   <dd>{{ repo.disk_size }}</dd>
      <dt>Last pull</dt>   <dd>{{ repo.last_pulled }}</dd>
    </dl>
  </section>

  <section class="section" id="tags">
    <h4>Tags</h4>
    <form method="POST" action="/repos/{{ repo.workspace }}/{{ repo.key }}/tag">
      {% if repo.tags %}
      <div class="tag-editor" style="margin-bottom: 0.6rem;">
        {% for tag in repo.tags %}<span class="tag-pill">{{ tag }}</span>{% endfor %}
      </div>
      {% endif %}
      <input type="text" name="tags" value="{{ repo.tags | join(', ') }}" placeholder="comma, separated, tags">
      <div style="margin-top: 0.75rem;">
        <button type="submit" class="btn btn-primary btn-sm">Save tags</button>
      </div>
    </form>
    <small style="display: block; margin-top: 0.65rem; color: var(--muted-soft); font-size: 0.84rem;">
      Comma-separated. Replaces the existing tag list. Workspace auto-tags merge back in on the next sync.
    </small>
  </section>

  <section class="section">
    <h4>Freeze</h4>
    <div class="freeze-row">
      <input type="checkbox" id="freeze"{% if repo.frozen %} checked{% endif %}
             hx-post="/repos/{{ repo.workspace }}/{{ repo.key }}/freeze"
             hx-trigger="change"
             hx-swap="none">
      <label for="freeze">Freeze this repo — it stays visible with a lock icon, and "Pull all" skips it.</label>
    </div>
  </section>

  <div class="danger-zone">
    <h4>Danger zone</h4>
    <p>Remove this repo from gitstow. Choose whether to also delete it from disk.</p>
    <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
      <form method="POST" action="/repos/{{ repo.workspace }}/{{ repo.key }}/remove" style="margin: 0;" onsubmit="return confirm('Remove {{ repo.key }} from the registry? Files on disk will NOT be deleted.');">
        <button type="submit" class="btn btn-danger">Remove from registry only</button>
      </form>
      <form method="POST" action="/repos/{{ repo.workspace }}/{{ repo.key }}/delete" style="margin: 0;" onsubmit="return confirm('DELETE {{ repo.key }} from disk AND unregister?\n\nThis cannot be undone.');">
        <button type="submit" class="btn btn-danger-solid">Remove + delete folder</button>
      </form>
    </div>
  </div>

{% endblock %}