{% extends "base.html" %}
{% block title %}Katalog{% endblock %}
{% block content %}
<div class="stack stack-sm">
  <h1>Katalog</h1>
  <p class="text-muted">Freigegebene Pakete: öffentliche und die deines Tenants. <a class="text-sm" href="{{ url_for('help_topic', topic='teams') }}">So kommen sie in dein Repo</a> · <a class="text-sm" href="{{ url_for('help_topic', topic='kinds') }}">Was die Arten bedeuten</a></p>
</div>
<form class="form-row hugin-filter" action="{{ url_for('catalog') }}" method="get"
      hx-get="{{ url_for('catalog') }}" hx-target="#catalog-list" hx-push-url="true"
      hx-trigger="input changed delay:300ms from:#search, change from:#kind, submit">
  <input id="search" name="q" type="search" value="{{ q }}" placeholder="Suchen in ID und Beschreibung" aria-label="Suche">
  <select id="kind" name="kind" aria-label="Art">
    <option value="">Alle Arten</option>
    {% for value, name in KIND_NAMES.items() %}<option value="{{ value }}" {% if kind == value %}selected{% endif %}>{{ name }}</option>{% endfor %}
  </select>
  <span class="htmx-indicator spinner spinner-sm" aria-hidden="true"></span>
</form>
<div id="catalog-list">{% include "_catalog_list.html" %}</div>
{% endblock %}