{% extends 'base.html' %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card shadow-lg mt-4">
            <div class="card-header text-center bg-transparent border-0 pt-4 pb-2">
                <i class="bi bi-server text-primary mb-2" style="font-size: 2.5rem;"></i>
                <h3 class="fw-bold mt-2">Available Databases</h3>
                <p class="text-muted mb-0">Select a vector database below to start a chat session.</p>
            </div>

            <div class="card-body p-4">
                {% if vector_dbs %}
                    <div class="list-group custom-list-group">
                        {% for db in vector_dbs %}
                        <div class="list-group-item d-flex justify-content-between align-items-center rounded mb-3 py-3 px-4 border">
                            <div class="d-flex align-items-center">
                                <div class="bg-dark rounded-circle p-2 me-3 text-primary d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                    <i class="bi bi-database"></i>
                                </div>
                                <span class="fs-5 fw-medium text-light">{{ db }}</span>
                            </div>
                            
                            <form method="post" action="{{ url_for('select_db', db_name=db) }}" class="mb-0">
                                <button type="submit" class="btn btn-outline-primary rounded-pill px-4">
                                    Select <i class="bi bi-arrow-right-short"></i>
                                </button>
                            </form>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-inbox text-muted" style="font-size: 3rem;"></i>
                        <h5 class="mt-3 text-muted">No Databases Found</h5>
                        <p class="text-muted">You haven't created any vector databases yet.</p>
                        <a href="/create-db" class="btn btn-primary mt-2">Create One Now</a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<style>
    .custom-list-group .list-group-item {
        background-color: rgba(15, 23, 42, 0.4);
        border-color: var(--border-color);
        transition: all 0.2s ease;
    }
    .custom-list-group .list-group-item:hover {
        background-color: rgba(15, 23, 42, 0.8);
        border-color: var(--accent-primary);
        transform: scale(1.01);
    }
    .btn-outline-primary {
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
    .btn-outline-primary:hover {
        background: var(--accent-gradient);
        border-color: transparent;
        color: #fff;
    }
</style>
{% endblock %}