{% 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">
                            <div class="mb-4">
                                <label for="database-slug" class="block text-sm font-medium mb-1">Database name</label>
                                <input
                                    type="text"
                                    id="database-slug"
                                    name="database_slug"
                                    class="p-2 border rounded focus:border-blue-500"
                                    placeholder="example.sqlite"
                                    pattern="[A-Za-z0-9\-_\.]+"
                                    title="Only letters, numbers, underscores, hyphens, and periods are allowed"
                                    required>
                            </div>

                            <div class="mb-4">
                                <label class="block text-sm font-medium mb-1">Public sharing level</label>
                                <div class="uk-btn-group" data-uk-button-radio>
                                    <button
                                        type="button"
                                        class="uk-btn uk-btn-default uk-active"
                                        data-value="no-access"
                                        onclick="setPublicSharingLevel(this, 'no-access')">
                                        Private
                                    </button>
                                    <button
                                        type="button"
                                        class="uk-btn uk-btn-default"
                                        data-value="fork"
                                        onclick="setPublicSharingLevel(this, 'fork')">
                                        Forkable
                                    </button>
                                    <button
                                        type="button"
                                        class="uk-btn uk-btn-default"
                                        data-value="read-only"
                                        onclick="setPublicSharingLevel(this, 'read-only')">
                                        Read-only
                                    </button>
                                </div>
                                <input type="hidden" id="public-sharing-level" name="public_sharing_level" value="no-access">
                            </div>
                            <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>
                        function setPublicSharingLevel(button, value) {
                            // Update the hidden input value
                            document.getElementById('public-sharing-level').value = value;

                            // Update button states
                            const buttons = button.parentElement.querySelectorAll('button');
                            buttons.forEach(btn => {
                                btn.classList.remove('uk-active');
                            });
                            button.classList.add('uk-active');
                        }

                        // 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 %}