<div {{ attributes }}>
    <div>
        <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">{{ 'general.title'|trans({}, 'admin') }}</h2>
        <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">Konfigurieren Sie hier die grundlegenden Einstellungen Ihrer Anwendung.</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="pageTitle">Seitentitel</label>
            </dt>
            <dd class="mt-1 flex items-center justify-between gap-x-6 sm:mt-0 sm:flex-auto">
                {% if edit == 'pageTitle' %}
                    <div class="flex-auto">
                        <input id="pageTitle" type="text" data-model="config.pageTitle" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 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" autofocus>
                        {% for error in this.getErrors('config.pageTitle') %}
                            <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.pageTitle }}</div>
                    <button type="button" data-action="live#action" data-live-action-param="activateEditing" data-live-field-param="pageTitle" 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="adminEmail">Admin E-Mail-Adresse</label>
            </dt>
            <dd class="mt-1 flex items-center justify-between gap-x-6 sm:mt-0 sm:flex-auto">
                {% set mm = this.mailConfigManager %}
                {% if edit == 'adminEmail' %}
                    <div class="flex-auto">
                        <input id="adminEmail" type="email" data-model="config.adminEmail" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 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 error in this.getErrors('config.adminEmail') %}
                            <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">{{ mm.adminEmail }}</div>
                    {% if not isAdminEmailDisabled %}
                        <button type="button" data-action="live#action" data-live-action-param="activateEditing" data-live-field-param="adminEmail" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Bearbeiten</button>
                    {% else %}
                        <span class="text-xs text-gray-400 italic">Über Konfiguration festgelegt</span>
                    {% endif %}
                {% 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="adminEmailName">Admin E-Mail-Name</label>
            </dt>
            <dd class="mt-1 flex items-center justify-between gap-x-6 sm:mt-0 sm:flex-auto">
                {% if edit == 'adminEmailName' %}
                    <div class="flex-auto">
                        <input id="adminEmailName" type="text" data-model="config.adminEmailName" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 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 error in this.getErrors('config.adminEmailName') %}
                            <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">{{ mm.adminEmailName }}</div>
                    <button type="button" data-action="live#action" data-live-action-param="activateEditing" data-live-field-param="adminEmailName" 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="replyToEmail">Antwort-E-Mail-Adresse</label>
            </dt>
            <dd class="mt-1 flex items-center justify-between gap-x-6 sm:mt-0 sm:flex-auto">
                {% if edit == 'replyToEmail' %}
                    <div class="flex-auto">
                        <input id="replyToEmail" type="email" data-model="config.replyToEmail" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 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 error in this.getErrors('config.replyToEmail') %}
                            <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">{{ mm.replyTo }}</div>
                    {% if not mm.isReplyToFromConfig %}
                        <button type="button" data-action="live#action" data-live-action-param="activateEditing" data-live-field-param="replyToEmail" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Bearbeiten</button>
                    {% else %}
                        <span class="text-xs text-gray-400 italic">Über Konfiguration festgelegt</span>
                    {% endif %}
                {% 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="replyToName">Antwort-E-Mail-Name</label>
            </dt>
            <dd class="mt-1 flex items-center justify-between gap-x-6 sm:mt-0 sm:flex-auto">
                {% if edit == 'replyToName' %}
                    <div class="flex-auto">
                        <input id="replyToName" type="text" data-model="config.replyToName" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 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 error in this.getErrors('config.replyToName') %}
                            <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">{{ mm.replyToName }}</div>
                    <button type="button" data-action="live#action" data-live-action-param="activateEditing" data-live-field-param="replyToName" 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>
