{% extends "_layout.html" %}
{% block title %}Connections{% endblock %}
{% block content %}
<header class="page-header">
    <div>
        <h1>Connections</h1>
        <p class="subtitle">Named connections in the current vault.</p>
    </div>
    <div class="page-actions">
        <a class="btn btn-primary" href="/ui/applications">Add new connection</a>
    </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 connections..." autocomplete="off">
    </label>
</div>

{% if connection_rows %}
<div class="connection-list" id="connectionList">
    {% for row in connection_rows %}
    <a class="connection-row"
       href="{{ row.href }}"
       data-name="{{ row.connection_name|lower }} {{ row.provider_display_name|lower }}"
       data-status="{{ row.status }}">
        <div class="connection-row-main">
            <div class="connection-row-name">{{ row.connection_name }}</div>
            <div class="connection-row-meta">{{ row.provider_display_name }} · {{ row.auth_type_label }}</div>
        </div>
        <span class="pill {% if row.status != 'connected' %}pill-warn{% else %}pill-accent{% endif %}">{{ row.status }}</span>
    </a>
    {% endfor %}
</div>
{% else %}
<div class="empty">
    <div class="empty-title">No connections yet</div>
    <div class="empty-body">Go to Applications to configure a provider and start a new login.</div>
    <a class="btn btn-primary" href="/ui/applications">Add new connection</a>
</div>
{% endif %}

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