{% extends 'base.html' %}

{% block content %}
<style>
.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="row justify-content-center mb-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Update Database</h5>
                        <p class="card-text">Upload the new document in existing DB. Currently selected DB: </p>
                        <p class="card-text"><strong>{{ db_name }}</strong></p>
                        <a href="/update-dbs/{{ db_name }}" class="btn btn-primary">Go to Update DB</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Chat with AI</h5>
                        <p class="card-text">Ask questions and get answers based on your vector database.</p>
                        <p class="card-text"><strong>{{ db_name }}</strong></p>
                        <a href="/list-dbs" class="btn btn-primary">Go to List of DB</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Remove DB</h5>
                        <p class="card-text">Remove the entire DB. Currently selected DB: </p>
                        <p class="card-text"><strong>{{ db_name }}</strong></p>
                        <a href="/remove-dbs/{{ db_name }}" class="btn btn-danger">Go to Remove DB</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Delete Document</h5>
                        <p class="card-text">Delete a document by specific file name. Currently selected DB: </p>
                        <p class="card-text"><strong>{{ db_name }}</strong></p>
                        <a href="/delete-doc/{{ db_name }}" class="btn btn-danger">Go to Delete Document</a>
                    </div>
                </div>
            </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 %}