{% extends 'base.html' %}

{% block content %}
<style>
    /* Full-page setup */
    html, body {
        height: 100%;
        margin: 0;
    }

    .container {
        display: flex;
        flex-direction: column;
        height: 50vh; /* Full viewport height */
        justify-content: center;
        align-items: center;
    }

    /* Card styling */
    .card {
        margin: auto;
        background-color: #2c2c3e;
        color: #f5f5f5;
        border: none;
        width: 50%;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Refined shadow effect */
        max-height: calc(50vh - 50px); /* Adjust to fit within view */
        overflow: hidden; /* Ensures no overflow from child elements */
    }

    /* Fixed header */
    .card-header {
        background-color: #181831;
        border-bottom: 2px solid #444;
        padding: 1rem;
        text-align: center;
        position: sticky; /* Keeps header fixed */
        top: 0;
        z-index: 1000; /* Ensures it stays above scrollable content */
    }

    .card-body {
        max-height: 60vh; /* Limits height of scrollable area */
        overflow-y: auto; /* Adds vertical scrolling */
    }

    /* Scrollbar customization */
    .card-body::-webkit-scrollbar {
        width: 8px;
    }

    .card-body::-webkit-scrollbar-thumb {
        background-color: #444; /* Thumb color */
        border-radius: 4px; /* Rounded scrollbar edges */
    }

    .card-body::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* Thumb hover color */
    }

    .card-body::-webkit-scrollbar-track {
        background-color: #2c2c3e; /* Track background */
    }

    /* List group items */
    .list-group-item {
        background-color: #2c2c3e;
        color: #f5f5f5;
        border: 1px solid #444;
        transition: background-color 0.3s ease;
    }

    .list-group-item:hover {
        background-color: #383850;
    }

    /* Button styling */
    .btn-primary {
        background-color: #4c4cff;
        border-color: #4c4cff;
    }

    .btn-primary:hover {
        background-color: #3838e8;
        border-color: #3838e8;
    }
    /* Align buttons side-by-side */
    .button-container {
        display: flex;
        gap: 0.5rem; /* Adds space between buttons */
    }

    .btn-primary {
        flex: 1; /* Ensures buttons have the same width */
    }

    /* Optional: Adjust margin and padding for better spacing */
    .list-group-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .alert {
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        text-align: center;
        position: absolute;
        position-area: top center;
        top: 30px;
        align-items: center;
    }

    .alert-error {
        background-color: #D84040;
        color: #ffffff;
    }

    .alert-success {
        background-color: #D2DE32;
        color: #ffffff;
    }

    .alert-warning {
        background-color: #FFC700;
        color: #ffffff;
    }
    
</style>

{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        <div id="flash-message" class="alert alert-{{ messages[0][0] }}">
            <strong>{{ messages[0][1] }}</strong>
        </div>
    {% endif %}
{% endwith %}

<div class="container">
    <div class="card shadow">
        <div class="card-header">
            <h3><strong>Available Vector Databases</strong></h3>
        </div>
        <div class="card-body">
            <h3 class="text-center mb-4"><strong>Select a Vector Database</strong></h3>
            <ul class="list-group">
                {% for db in vector_dbs %}
                <li class="list-group-item">
                    <span>{{ db }}</span>
                    <div class="button-container">
                        <form method="post" action="{{ url_for('modify_db', db_name=db) }}" class="mb-0">
                            <button type="submit" class="btn btn-primary btn-sm">Modify</button>
                        </form>
                        <form method="post" action="{{ url_for('select_db', db_name=db) }}" class="mb-0">
                            <button type="submit" class="btn btn-primary btn-sm">Select</button>
                        </form>
                    </div>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
<script>
    const flashMessage = document.getElementById('flash-message');
        if (flashMessage) {
            setTimeout(function() {
                flashMessage.style.display = 'none';
            }, 2000); // Hide after 2 seconds
        }
</script>
{% endblock %}