{% extends "layouts/admin.twig" %}

{% block title %}{{ ta.configuration|default('Configuratie') }} - {{ ta.admin_title|default('CodePress Admin') }}{% endblock %}

{% block content %}
<h2 class="mb-4"><i class="bi bi-sliders"></i> {{ ta.configuration|default('Configuratie') }}</h2>

<form method="POST" action="/admin/config">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    
    <div class="card shadow-sm mb-4">
        <div class="card-header">{{ ta.section_settings|default('Instellingen') }}</div>
        <div class="card-body">
            <div class="mb-3">
                <label for="site_title" class="form-label">{{ ta.site_title|default('Site titel') }}</label>
                <input type="text" class="form-control" id="site_title" name="site_title" value="{{ config.site_title|default('CodePress') }}">
            </div>
            <div class="mb-3">
                <label for="admin_language" class="form-label">{{ ta.admin_language|default('Admin taal') }}</label>
                <select class="form-select" id="admin_language" name="admin_language">
                    <option value="nl" {{ config.admin_language|default('nl') == 'nl' ? 'selected' : '' }}>Nederlands</option>
                    <option value="en" {{ config.admin_language == 'en' ? 'selected' : '' }}>English</option>
                    <option value="de" {{ config.admin_language == 'de' ? 'selected' : '' }}>Deutsch</option>
                </select>
                <div class="form-text">{{ ta.admin_language_help|default('Taal van het admin-paneel (menu, knoppen, labels).') }}</div>
            </div>
            <div class="mb-3">
                <label for="content_language" class="form-label">{{ ta.content_language|default('Content taal') }}</label>
                <select class="form-select" id="content_language" name="content_language">
                    <option value="nl" {{ config.language.default|default('nl') == 'nl' ? 'selected' : '' }}>Nederlands</option>
                    <option value="en" {{ config.language.default == 'en' ? 'selected' : '' }}>English</option>
                    <option value="de" {{ config.language.default == 'de' ? 'selected' : '' }}>Deutsch</option>
                    <option value="fr" {{ config.language.default == 'fr' ? 'selected' : '' }}>Français</option>
                </select>
                <div class="form-text">{{ ta.content_language_help|default('Standaardtaal van de website-content (fallback als er geen taal in de URL staat).') }}</div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm mb-4">
        <div class="card-header">{{ ta.homepage|default('Homepage') }}</div>
        <div class="card-body">
            <p class="text-muted small mb-3">{{ ta.homepage_help|default('Bepaal welke pagina getoond wordt op de homepage.') }}</p>
            <div class="mb-3">
                <label class="form-label">{{ ta.homepage_mode|default('Homepage-modus') }}</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="default_page" id="dp_auto" value="auto" {{ current_default_page == 'auto' ? 'checked' : '' }}>
                    <label class="form-check-label" for="dp_auto">{{ ta.homepage_auto|default('Automatisch — eerste beschikbare pagina') }}</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="default_page" id="dp_newest" value="newest" {{ current_default_page == 'newest' ? 'checked' : '' }}>
                    <label class="form-check-label" for="dp_newest">{{ ta.homepage_newest|default('Meest recent aangepaste pagina') }}</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="default_page" id="dp_specific" value="specific" {{ current_default_page not in ['auto', 'newest'] ? 'checked' : '' }}>
                    <label class="form-check-label" for="dp_specific">{{ ta.homepage_specific|default('Specifieke pagina') }}</label>
                </div>
            </div>
            <div class="mb-3" id="specific_page_wrapper" style="display: none;">
                <label for="default_page_specific" class="form-label">{{ ta.homepage_select|default('Selecteer pagina') }}</label>
                <select class="form-select" id="default_page_specific" name="default_page_specific">
                    {% for pageKey, pageLabel in content_pages %}
                        <option value="{{ pageKey }}" {{ current_default_page == pageKey ? 'selected' : '' }}>{{ pageLabel }}</option>
                    {% else %}
                        <option value="" disabled>{{ ta.no_pages_found|default('Geen pagina\'s gevonden in content/') }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>
    
    <button type="submit" class="btn btn-primary">
        <i class="bi bi-check-lg"></i> {{ ta.save|default('Opslaan') }}
    </button>
    <a href="/admin/dashboard" class="btn btn-outline-secondary">{{ ta.cancel|default('Annuleren') }}</a>
</form>

<script>
(function () {
    var radios = document.querySelectorAll('input[name="default_page"]');
    var wrapper = document.getElementById('specific_page_wrapper');
    var specificSelect = document.getElementById('default_page_specific');

    function toggleWrapper() {
        var checked = document.querySelector('input[name="default_page"]:checked');
        if (checked && checked.value === 'specific') {
            wrapper.style.display = '';
        } else {
            wrapper.style.display = 'none';
        }
    }

    radios.forEach(function (r) {
        r.addEventListener('change', toggleWrapper);
    });

    // If the specific select changes but the radio isn't on "specific", switch to it
    if (specificSelect) {
        specificSelect.addEventListener('change', function () {
            var specRadio = document.getElementById('dp_specific');
            if (specRadio && !specRadio.checked) {
                specRadio.checked = true;
                toggleWrapper();
            }
        });
    }

    toggleWrapper();
})();
</script>
{% endblock %}