<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 w-full"
placeholder="example.sqlite"
pattern="[A-Za-z0-9\-_\.]+"
title="Only letters, numbers, underscores, hyphens, and periods are allowed">
</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>
<script>
function setPublicSharingLevel(button, value) {
document.getElementById('public-sharing-level').value = value;
const buttons = button.parentElement.querySelectorAll('button');
buttons.forEach(btn => btn.classList.remove('uk-active'));
button.classList.add('uk-active');
}
</script>