{% extends "base.html" %}
{% block title %}Afterlife: Credentials{% endblock %}
{% block content %}

<h1>Credentials</h1>
<p class="meta">{{ total_credentials }} credential(s) collected. Showing {{ credentials|length }}.</p>

<div class="filter-bar">
  <form method="get" action="/credentials"
        hx-get="/credentials" hx-target="#credentials-list" hx-trigger="change, search delay:300ms from:input[type=search]" hx-push-url="true">
    <label>Source
      <select name="source" onchange="this.form.requestSubmit ? this.form.requestSubmit() : this.form.submit()">
        <option value="">(any)</option>
        {% for s in sources %}
        <option value="{{ s }}" {% if filter_source == s %}selected{% endif %}>{{ s }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Type
      <select name="type" onchange="this.form.requestSubmit ? this.form.requestSubmit() : this.form.submit()">
        <option value="">(any)</option>
        {% for t in types %}
        <option value="{{ t }}" {% if filter_type == t %}selected{% endif %}>{{ t }}</option>
        {% endfor %}
      </select>
    </label>
    <label>Active
      <select name="active" onchange="this.form.requestSubmit ? this.form.requestSubmit() : this.form.submit()">
        <option value="">(any)</option>
        <option value="yes" {% if filter_active == "yes" %}selected{% endif %}>active</option>
        <option value="no" {% if filter_active == "no" %}selected{% endif %}>inactive</option>
      </select>
    </label>
    <input type="search" name="q" value="{{ query }}" placeholder="Search credential id, type, or scope..." aria-label="Search credentials" class="search-input">
    <span class="htmx-indicator"><span class="spinner"></span></span>
  </form>
  {% if filter_source or filter_type or filter_active or query %}
  <a class="clear" href="/credentials">Clear filters</a>
  {% endif %}
</div>

<div id="credentials-list">
{% include "_credentials_list.html" %}
</div>

{% endblock %}