{# Edit modal content — rendered as innerHTML of <dialog id="edit-modal"> #}
<header class="flex items-center justify-between gap-3 px-5 py-4 border-b"
        style="border-color: var(--color-border);">
  <div class="min-w-0 flex-1">
    <div class="flex items-center gap-2">
      <h2 class="text-sm font-semibold truncate" style="color: var(--color-fg);">Edit install</h2>
      {% if r.removed_at %}
        {% with tone="remove", label="uninstalled" %}{% include "components/pill.html" %}{% endwith %}
      {% elif r.metadata_complete == 0 %}
        <span class="text-xs px-1.5 py-0.5 rounded-full leading-none font-medium"
              style="background-color: var(--color-accent-soft, rgba(251,191,36,0.15)); color: var(--color-accent, #f59e0b);">incomplete</span>
      {% else %}
        <span class="text-xs px-1.5 py-0.5 rounded-full leading-none font-medium"
              style="background-color: var(--color-bg-muted); color: var(--color-fg-faint);">installed</span>
      {% endif %}
    </div>
    <p class="text-xs font-mono truncate mt-0.5" style="color: var(--color-fg-faint);">{{ r.command }}</p>
  </div>
  <button type="button"
          onclick="document.getElementById('edit-modal').close()"
          class="btn btn-ghost text-xs shrink-0"
          aria-label="Close">✕</button>
</header>

<form hx-post="/installs/{{ r.id }}"
      hx-target="#row-{{ r.id }}"
      hx-swap="outerHTML"
      class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm px-5 py-4">
  <label class="flex flex-col gap-1">
    <span class="text-xs font-medium" style="color: var(--color-fg-muted);">Display name</span>
    <input class="input" name="display_name" value="{{ r.display_name or '' }}">
  </label>
  <label class="flex flex-col gap-1">
    <span class="text-xs font-medium" style="color: var(--color-fg-muted);">Project</span>
    <input class="input" name="project" value="{{ r.project or '' }}" list="edit-modal-projects">
  </label>
  <label class="flex flex-col gap-1 md:col-span-2">
    <span class="text-xs font-medium" style="color: var(--color-fg-muted);">What does it do</span>
    <textarea class="input" name="what_it_does" rows="2">{{ r.what_it_does or '' }}</textarea>
  </label>
  <label class="flex flex-col gap-1 md:col-span-2">
    <span class="text-xs font-medium" style="color: var(--color-fg-muted);">{% if r.removed_at %}Removal reason{% else %}Why install{% endif %}</span>
    <textarea class="input" name="why" rows="2">{{ r.why or '' }}</textarea>
  </label>
  <label class="flex flex-col gap-1">
    <span class="text-xs font-medium" style="color: var(--color-fg-muted);">Purpose</span>
    <select class="input" name="disposition">
      {% for p in purposes %}
        <option value="{{ p.key }}" {% if r.disposition == p.key %}selected{% endif %}>{{ p.label }}</option>
      {% endfor %}
    </select>
  </label>
  <label class="flex flex-col gap-1">
    <span class="text-xs font-medium" style="color: var(--color-fg-muted);">Notes</span>
    <input class="input" name="notes" value="{{ r.notes or '' }}">
  </label>
  <input type="hidden" name="metadata_complete" value="1">
  <input type="hidden" name="csrf_token" value="{{ request.cookies.get('why_csrf', '') if request else '' }}">
  <div class="md:col-span-2 flex gap-2 justify-end pt-1">
    <button type="button"
            onclick="document.getElementById('edit-modal').close()"
            class="btn">Cancel</button>
    <button class="btn btn-primary" type="submit">Save</button>
  </div>
</form>

{# ── Read-only metadata ─────────────────────────────────────────────────────── #}
<div class="border-t px-5 py-4" style="border-color: var(--color-border); background-color: var(--color-bg-muted);">
  <dl class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-3 text-xs">
    <div>
      <dt class="font-medium uppercase tracking-wide mb-0.5" style="color: var(--color-fg-muted);">Run from</dt>
      <dd class="font-mono truncate" title="{{ r.install_dir }}" style="color: var(--color-fg);">{{ r.install_dir or "—" }}</dd>
    </div>
    <div>
      <dt class="font-medium uppercase tracking-wide mb-0.5" style="color: var(--color-fg-muted);">Installed to <span class="normal-case font-normal">(best-effort)</span></dt>
      <dd class="font-mono truncate" title="{{ r.resolved_path or '' }}" style="color: var(--color-fg);">{{ r.resolved_path or "—" }}</dd>
    </div>
    <div>
      <dt class="font-medium uppercase tracking-wide mb-0.5" style="color: var(--color-fg-muted);">Installed at</dt>
      <dd class="font-mono" style="color: var(--color-fg);">{{ r.installed_at[:10] }} {{ r.installed_at[11:16] }}</dd>
    </div>
    {% if r.reinstall_count and r.reinstall_count > 0 %}
    <div>
      <dt class="font-medium uppercase tracking-wide mb-0.5" style="color: var(--color-fg-muted);">Reinstalled</dt>
      <dd class="font-mono" style="color: var(--color-fg);">{{ r.reinstall_count }}×</dd>
    </div>
    {% endif %}
    {% if r.source_url %}
    <div class="md:col-span-2">
      <dt class="font-medium uppercase tracking-wide mb-0.5" style="color: var(--color-fg-muted);">Source URL</dt>
      <dd class="font-mono truncate" title="{{ r.source_url }}" style="color: var(--color-fg);">{{ r.source_url }}</dd>
    </div>
    {% endif %}
    {% if r.removed_at %}
    <div>
      <dt class="font-medium uppercase tracking-wide mb-0.5" style="color: var(--color-danger, #ef4444);">Uninstalled at</dt>
      <dd class="font-mono" style="color: var(--color-fg);">{{ r.removed_at[:10] }} {{ r.removed_at[11:16] }}</dd>
    </div>
    {% if r.why %}
    <div class="md:col-span-2">
      <dt class="font-medium uppercase tracking-wide mb-0.5" style="color: var(--color-danger, #ef4444);">Removal reason</dt>
      <dd style="color: var(--color-fg);">{{ r.why }}</dd>
    </div>
    {% endif %}
    {% endif %}
  </dl>
</div>

<datalist id="edit-modal-projects">
  {% for p in projects %}<option value="{{ p }}">{% endfor %}
</datalist>

{% if history %}
<div class="px-5 pb-5 border-t pt-4" style="border-color: var(--color-border);">
  <p class="text-xs font-medium uppercase tracking-wide mb-2" style="color: var(--color-fg-muted);">Commands before this install</p>
  <ol class="flex flex-col gap-1">
    {% for cmd in history %}
    <li class="font-mono text-xs truncate" style="color: var(--color-fg-faint);" title="{{ cmd }}">{{ loop.index }}. {{ cmd }}</li>
    {% endfor %}
  </ol>
</div>
{% endif %}