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