{% extends "admin/layout.html" %}
{% block title %}Homepage Settings{% endblock %}

{% block body %}
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white">{% trans %}Homepage Settings{% endtrans %}</h2>
    </div>

    <form id="settings-form" class="space-y-8">
        {% for section in sections %}
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-primary/5 to-secondary/5 dark:from-primary-light/5 dark:to-secondary-light/5">
                <h3 class="font-semibold text-gray-900 dark:text-white">{{ section.section }}</h3>
            </div>
            <div class="p-6 space-y-4">
                {% for field in section.fields %}
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{{ field.label }}</label>
                    {% if field.is_textarea %}
                    <textarea name="{{ field.key }}" rows="3"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                        placeholder="{{ field.default }}"
                        data-testid="input-{{ field.key }}">{{ settings[field.key] or '' }}</textarea>
                    {% else %}
                    <input type="text" name="{{ field.key }}"
                        value="{{ settings[field.key] or '' }}"
                        placeholder="{{ field.default }}"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                        data-testid="input-{{ field.key }}">
                    {% endif %}
                    <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">{% trans %}Default:{% endtrans %} {{ field.default | truncate(80) }}</p>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}

        <div class="flex items-center gap-3">
            <button type="submit" class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold shadow-lg shadow-accent/30 hover:shadow-xl transition-all duration-300" data-testid="button-save-settings">
                <i class="fa fa-save"></i> {% trans %}Save Settings{% endtrans %}
            </button>
            <a href="{{ full_url('/admin/settings') }}" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
                {% trans %}Cancel{% endtrans %}
            </a>
        </div>
    </form>
</div>
{% endblock %}

{% block page_scripts %}
<script>
    $("#settings-form").on("submit", function(e) {
        e.preventDefault();
        $.ajax({
            url: "{{ url('/admin/settings') }}",
            method: "POST",
            headers: { "X-Requested-With": "XMLHttpRequest" },
            data: $(this).serialize(),
            success: function() { toastr.success("Settings saved successfully!"); },
            error: function() { toastr.error("Failed to save settings."); }
        });
    });
</script>
{% endblock %}