{% extends "base_content.html" %}

{% block title %}{{ name }}{% endblock %}

{% block page_content %}
<div class="max-w-screen-xl mx-auto px-6">
    <div class="flex flex-col md:flex-row gap-4">
        <div class="w-full md:w-1/3 lg:w-1/4">
            {% include "profile_fragment.html" %}
        </div>
        <div class="w-full md:w-2/3 lg:w-3/4">
            <div class="uk-card-header space-y-2 pr-0 flex justify-between items-center">
                <h2 class="uk-h2">Databases</h2>
                <button type="button"></button>
                {% if can_create_database %}
                <button
                    data-uk-toggle="target: #create-database-form"
                    class="uk-btn {% if databases | length == 0 %}uk-btn-primary{% else %}uk-btn-default{% endif %} uk-btn-sm">
                    <uk-icon icon="plus"></uk-icon> Create database
                </button>
                {% endif %}
            </div>
            <div class="uk-card-body space-y-2 pr-0">
                <hr class="uk-hr" />
                {% if can_create_database %}
                <div id="create-database-form" hidden>
                  <div class="block hover:bg-gray-50 uk-card">
                    <h3 class="uk-h3 flex uk-card-header font-normal pb-0">Create a new database</h3>
                    <div class="uk-card-body">
                        <form
                          class="mt-4"
                          hx-post="/{{ entity }}/create_database"
                          hx-target-400="#create-database-error"
                          hx-swap="innerHTML">
                            {% include "create_database_fields.html" %}
                            <div class="mt-4">
                                <button type="submit" id="create-database-submit" class="uk-btn uk-btn-primary">
                                    Create database
                                </button>
                            </div>
                        </form>
                    </div>

                    <div id="create-database-error" class="mx-4 mb-4"></div>

                    <script>
                        // Form is submittable once a slug exists.
                        document.addEventListener('DOMContentLoaded', function() {
                            const databaseSlug = document.getElementById('database-slug');
                            const submitButton = document.getElementById('create-database-submit');
                            submitButton.disabled = databaseSlug.value.trim() === '';
                            databaseSlug.addEventListener('input', function() {
                                submitButton.disabled = this.value.trim() === '';
                            });
                        });
                    </script>
                  </div>
                </div>
                {% endif %}
                {% if databases | length == 0 %}
                <div class="block uk-card">
                    <h3 class="uk-h3 flex space-y-2 uk-card-header font-normal">No databases...yet!</h3>
                    <p class="uk-card-body space-y-2">Let's fix that by creating your first database.</p>
                </div>
                {% else %}
                    {% for db in databases %}
                    <a href="{{ entity }}/{{ db.slug }}" class="block hover:bg-gray-50 uk-card">
                        <h3 class="uk-h3 flex space-y-2 uk-card-header font-normal" style="align-items: baseline;">
                            <uk-icon icon="database" class="mr-1"></uk-icon>{{ db.slug }} <uk-icon icon="chevron-right"></uk-icon>
                        </h3>
                        <p class="text-muted-foreground uk-card-body space-y-2">Type: {{ db.database_type }}</p>
                    </a>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
