{% extends "_layout.html" %}
{% block title %}Connections{% endblock %}
{% block content %}
<header class="page-header">
    <div>
        <h1>Connections</h1>
        <p class="subtitle">App integrations, custom secrets, and LLM keys.</p>
    </div>
</header>

<div class="toolbar">
    <label class="search">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <circle cx="11" cy="11" r="6"/>
            <path d="m20 20-4-4"/>
        </svg>
        <input id="appSearch" type="search" placeholder="Search apps..." autocomplete="off">
    </label>
    <div class="filter-pills" role="tablist">
        <button class="filter-pill active" data-filter="all" type="button">All <span class="count">{{ totals.all }}</span></button>
        <button class="filter-pill" data-filter="connected" type="button">Connected <span class="count">{{ totals.connected }}</span></button>
        <button class="filter-pill" data-filter="available" type="button">Available <span class="count">{{ totals.available }}</span></button>
    </div>
</div>

<div class="app-grid" id="appGrid">
    {% for p in providers %}
    <div class="app-card {% if p.status != 'available' %}is-connected{% endif %}"
         data-status="{{ p.status }}"
         data-name="{{ p.display_name|lower }} {{ p.name|lower }}"
         id="{{ p.name }}">
        <a class="app-card-hit" href="/ui/apps/{{ p.name }}" aria-label="Open {{ p.display_name }} details"></a>
        <span class="logo">{{ p.logo_initial }}</span>
        <div class="app-card-text">
            <div class="app-card-name">{{ p.display_name }}</div>
            <div class="app-card-sub">{{ p.auth_type_label }}</div>
        </div>
        {% if p.status == 'reauth' %}
        <span class="pill pill-warn">Re-auth</span>
        {% elif p.status == 'connected' %}
        <span class="pill pill-accent">● Connected</span>
        {% else %}
        <form class="inline-action"
              method="post"
              action="/ui/apps/{{ p.name }}/connect"
              hx-post="/ui/apps/{{ p.name }}/connect"
              hx-swap="none">
            <input type="hidden" name="connection" value="default">
            <button class="btn btn-secondary btn-sm" type="submit">Connect</button>
        </form>
        {% endif %}
    </div>
    {% endfor %}
</div>

<div class="empty empty-grid hidden" id="appEmpty">
    <div class="empty-title">No matches</div>
    <div class="empty-body">Try a different search or filter.</div>
</div>
{% endblock %}