<?php ob_start();
$isEdit = !empty($album);
$action = $isEdit
    ? admin_url('gallery/update/' . (int) $album['id'])
    : admin_url('gallery/store');
?>

<?php admin_content_header($isEdit ? __('admin.gallery.edit') : __('admin.gallery.create'), 'image', [
    ['url' => admin_url('gallery'), 'label' => __('admin.gallery.back')],
]); ?>

<form method="POST" action="<?= $action ?>" enctype="multipart/form-data" class="admin-form">
    <?= $csrf->field() ?>

    <div class="form-grid">

        <!-- Main column -->
        <div class="form-main">

            <div class="form-group">
                <label for="title"><?= __('admin.gallery.album_title') ?> <span class="required">*</span></label>
                <input type="text" id="title" name="title"
                       value="<?= e($album['title'] ?? '') ?>"
                       required
                       oninput="autoSlug(this.value)">
            </div>

            <div class="form-group">
                <label for="slug"><?= __('admin.common.slug') ?></label>
                <input type="text" id="slug" name="slug"
                       value="<?= e($album['slug'] ?? '') ?>"
                       placeholder="<?= __('admin.gallery.slug_placeholder') ?>">
                <small class="form-hint"><?= __('admin.gallery.slug_help') ?></small>
            </div>

            <div class="form-group">
                <label for="description"><?= __('admin.common.description') ?></label>
                <textarea id="description" name="description" rows="5"
                          placeholder="<?= __('admin.gallery.description_placeholder') ?>"><?= e($album['description'] ?? '') ?></textarea>
            </div>

        </div><!-- /form-main -->

        <!-- Sidebar -->
        <div class="form-sidebar">

            <!-- Settings -->
            <div class="form-card">
                <h4><?= __('admin.gallery.settings') ?></h4>

                <div class="form-group">
                    <label for="is_visible"><?= __('admin.gallery.visibility') ?></label>
                    <select id="is_visible" name="is_visible">
                        <option value="1" <?= ($album['is_visible'] ?? 1) == 1 ? 'selected' : '' ?>><?= __('admin.common.visible') ?></option>
                        <option value="0" <?= ($album['is_visible'] ?? 1) == 0 ? 'selected' : '' ?>><?= __('admin.common.hidden') ?></option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="sort_order"><?= __('admin.pages.order') ?></label>
                    <input type="number" id="sort_order" name="sort_order"
                           value="<?= (int) ($album['sort_order'] ?? 0) ?>"
                           min="0">
                    <small class="form-hint"><?= __('admin.gallery.sort_help') ?></small>
                </div>

                <button type="submit" class="btn btn-primary btn-full">
                    <?= $isEdit ? __('admin.gallery.update_album') : __('admin.gallery.create_album') ?>
                </button>
            </div>

            <!-- Cover Image -->
            <div class="form-card">
                <h4><?= __('admin.gallery.cover_image') ?></h4>

                <?php if ($isEdit && !empty($album['cover_image'])): ?>
                <div class="current-image" id="currentCoverBox">
                    <img src="<?= e(thumb_url($album['cover_image'])) ?>"
                         alt="<?= __('admin.gallery.current_cover') ?>"
                         style="max-width:100%;border-radius:4px;margin-bottom:0.5rem;">
                    <label class="checkbox-label" style="font-size:0.85rem;color:#c0392b;">
                        <input type="checkbox" name="remove_cover" value="1" id="removeCover"
                               onchange="document.getElementById('currentCoverBox').style.opacity=this.checked?'0.4':'1'">
                        <?= __('admin.gallery.remove_cover') ?>
                    </label>
                </div>
                <div class="form-group" style="margin-top:0.75rem;">
                    <label for="cover_image"><?= __('admin.gallery.replace_cover') ?></label>
                    <input type="file" id="cover_image" name="cover_image"
                           accept="image/jpeg,image/png,image/gif,image/webp">
                </div>
                <?php else: ?>
                <div class="form-group">
                    <label for="cover_image"><?= __('admin.gallery.upload_cover') ?></label>
                    <input type="file" id="cover_image" name="cover_image"
                           accept="image/jpeg,image/png,image/gif,image/webp">
                    <small class="form-hint"><?= __('admin.gallery.cover_later_hint') ?></small>
                </div>
                <?php endif; ?>

                <small class="form-hint"><?= __('admin.gallery.cover_upload_hint') ?></small>
            </div>

        </div><!-- /form-sidebar -->

    </div><!-- /form-grid -->
</form>

<script>
// Auto-generate slug from title (only when slug field is empty or not yet edited)
function autoSlug(title) {
    var slugField = document.getElementById('slug');
    <?php if (!$isEdit): ?>
    if (!slugField._userEdited) {
        slugField.value = title
            .toLowerCase()
            .replace(/[äöüÄÖÜ]/g, function(c) {
                return {ä:'ae',ö:'oe',ü:'ue',Ä:'ae',Ö:'oe',Ü:'ue'}[c];
            })
            .replace(/ß/g, 'ss')
            .replace(/[^a-z0-9]+/g, '-')
            .replace(/^-+|-+$/g, '');
    }
    <?php endif; ?>
}

document.getElementById('slug').addEventListener('input', function () {
    this._userEdited = true;
});
</script>

<?php $content = ob_get_clean(); include dirname(__DIR__) . '/layouts/admin.php'; ?>
