<div {{ attributes }}>
    <div>
        <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">Sprache und Datum</h2>
        <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">Wählen Sie hier die Sprache und das Datumsformat für Ihr Admin-Panel.</p>
    </div>

    <dl class="mt-6 divide-y divide-gray-100 border-t border-gray-200 text-sm/6 dark:divide-white/5 dark:border-white/5">
        <div class="py-6 sm:flex">
            <dt class="font-medium text-gray-900 sm:w-64 sm:flex-none sm:pr-6 dark:text-white">
                <label for="language">Sprache</label>
            </dt>
            <dd class="mt-1 flex items-center justify-between gap-x-6 sm:mt-0 sm:flex-auto">
                {% if edit == 'language' %}
                    <div class="flex-auto">
                        <select id="language" data-model="config.language" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:ring-white/10">
                            <option value="de">Deutsch</option>
                            <option value="en">English</option>
                        </select>
                        {% for error in this.getErrors('config.language') %}
                            <p class="mt-2 text-sm text-red-600">{{ error.message }}</p>
                        {% endfor %}
                    </div>
                    <div class="flex gap-x-3">
                        <button type="button" data-action="live#action" data-live-action-param="save" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Speichern</button>
                        <button type="button" data-action="live#action" data-live-action-param="cancel" class="font-semibold text-gray-900 dark:text-white">Abbrechen</button>
                    </div>
                {% else %}
                    <div class="text-gray-900 dark:text-gray-300">{{ config.language == 'de' ? 'Deutsch' : 'English' }}</div>
                    <button type="button" data-action="live#action" data-live-action-param="activateEditing" data-live-field-param="language" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Bearbeiten</button>
                {% endif %}
            </dd>
        </div>
        <div class="py-6 sm:flex">
            <dt class="font-medium text-gray-900 sm:w-64 sm:flex-none sm:pr-6 dark:text-white">
                <label for="dateFormat">Datumsformat</label>
            </dt>
            <dd class="mt-1 flex items-center justify-between gap-x-6 sm:mt-0 sm:flex-auto">
                {% if edit == 'dateFormat' %}
                    <div class="flex-auto">
                        <select id="dateFormat" data-model="config.dateFormat" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:ring-white/10">
                            <option value="d.m.Y">DD.MM.YYYY</option>
                            <option value="Y-m-d">YYYY-MM-DD</option>
                            <option value="m/d/Y">MM/DD/YYYY</option>
                        </select>
                        {% for error in this.getErrors('config.dateFormat') %}
                            <p class="mt-2 text-sm text-red-600">{{ error.message }}</p>
                        {% endfor %}
                    </div>
                    <div class="flex gap-x-3">
                        <button type="button" data-action="live#action" data-live-action-param="save" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Speichern</button>
                        <button type="button" data-action="live#action" data-live-action-param="cancel" class="font-semibold text-gray-900 dark:text-white">Abbrechen</button>
                    </div>
                {% else %}
                    <div class="text-gray-900 dark:text-gray-300">{{ config.dateFormat }}</div>
                    <button type="button" data-action="live#action" data-live-action-param="activateEditing" data-live-field-param="dateFormat" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Bearbeiten</button>
                {% endif %}
            </dd>
        </div>
        <div class="py-6 sm:flex">
            <dt class="font-medium text-gray-900 sm:w-64 sm:flex-none sm:pr-6 dark:text-white">
                <label for="timezone">Zeitzone</label>
            </dt>
            <dd class="mt-1 flex items-center justify-between gap-x-6 sm:mt-0 sm:flex-auto">
                {% if edit == 'timezone' %}
                    <div class="flex-auto">
                        <select id="timezone" data-model="config.timezone" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:ring-white/10">
                            {% for tz in this.getTimezones() %}
                                <option value="{{ tz }}">{{ tz }}</option>
                            {% endfor %}
                        </select>
                        {% for error in this.getErrors('config.timezone') %}
                            <p class="mt-2 text-sm text-red-600">{{ error.message }}</p>
                        {% endfor %}
                    </div>
                    <div class="flex gap-x-3">
                        <button type="button" data-action="live#action" data-live-action-param="save" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Speichern</button>
                        <button type="button" data-action="live#action" data-live-action-param="cancel" class="font-semibold text-gray-900 dark:text-white">Abbrechen</button>
                    </div>
                {% else %}
                    <div class="text-gray-900 dark:text-gray-300">{{ config.timezone }}</div>
                    <button type="button" data-action="live#action" data-live-action-param="activateEditing" data-live-field-param="timezone" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Bearbeiten</button>
                {% endif %}
            </dd>
        </div>
    </dl>
    {% if confirmation %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Änderungen gespeichert" message="{{ confirmation }}"/>
        </twig:Turbo:Stream:Prepend>
    {% endif %}
</div>
