{% extends "base.html" %}
{% block title %}Добавить подключение — ЭВОСИНК{% endblock %}

{% block content %}
<div class="d-flex align-items-center mb-4">
    <a href="/connections" class="text-muted me-3"><i class="bi bi-arrow-left fs-5"></i></a>
    <h1 class="h4 mb-0">Добавить подключение</h1>
</div>

{% if available %}
<div class="row g-3">
    {% for svc in available %}
    <div class="col-sm-6 col-lg-4">
        <div class="card shadow-sm h-100">
            <div class="card-body d-flex flex-column">
                <div class="d-flex align-items-center mb-3">
                    <i class="bi {{ svc.icon }} fs-2 me-3 text-secondary"></i>
                    <h5 class="mb-0">{{ svc.name }}</h5>
                </div>
                <p class="text-muted small flex-grow-1">{{ svc.description }}</p>
                <a href="{{ svc.connect_url }}" class="btn btn-primary btn-sm mt-auto">
                    Подключить <i class="bi bi-arrow-right ms-1"></i>
                </a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

{% else %}
<div class="text-center py-5 text-muted">
    <i class="bi bi-check-circle fs-1 mb-3 d-block text-success"></i>
    <p class="mb-3">Все доступные сервисы подключены</p>
    <a href="/connections" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left me-1"></i>Вернуться к подключениям
    </a>
</div>
{% endif %}
{% endblock %}