{# Project summary hooks row: installed hooks + install dropdown (hook-install.js). #}
{% if mode == "unavailable" %}
<span class="text-muted">unavailable</span>
{% else %}
{% if installed %}
<ul class="list-unstyled mb-2">
  {% for hook in installed %}
  <li class="d-flex flex-wrap align-items-center gap-2 mb-1">
    <span>{{ hook.label }} (<code>{{ hook.target }}</code>)</span>
    {% if hook.version %}
    <span class="text-muted small">v{{ hook.version }}</span>
    {% endif %}
    {% if hook.status == "installed" %}
    <button type="button" class="btn btn-sm btn-ghost-secondary hook-toggle" data-project="{{ project_enc }}" data-sample="{{ hook.name }}" data-op="remove">Uninstall</button>
    {% elif hook.status == "different" %}
    <span class="text-muted small">custom hook installed; refusing to manage</span>
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% else %}
<p class="text-muted mb-2">No hooks installed.</p>
{% endif %}
{% if available %}
<div class="d-flex flex-wrap align-items-center gap-2">
  <label for="hook-install-select" class="visually-hidden">Install hook</label>
  <select id="hook-install-select" class="form-select form-select-sm" style="width: auto; min-width: 12rem;">
    {% for hook in available %}
    <option value="{{ hook.name }}">{{ hook.label }} ({{ hook.target }})</option>
    {% endfor %}
  </select>
  <button type="button" class="btn btn-sm btn-primary hook-install-btn" data-project="{{ project_enc }}" data-op="add">Install</button>
</div>
{% else %}
<span class="text-muted">All available hooks are installed.</span>
{% endif %}
{% endif %}