<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="{{ field }}">{{ label }}</label>
    </dt>
    <dd class="mt-1 flex items-center justify-between gap-x-6 sm:mt-0 sm:flex-auto">
        {% if edit == field and type != 'toggle' %}
            <div class="flex-auto">
                {% if type == 'text' %}
                    <input id="{{ field }}" type="text" data-model="config.{{ field }}" 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>
                {% elseif type == 'select' %}
                    <select id="{{ field }}" data-model="config.{{ field }}" 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 val, lab in options %}
                            <option value="{{ val }}">{{ lab }}</option>
                        {% endfor %}
                    </select>
                {% endif %}
                {% for error in this.getErrors('config.' ~ field) %}
                    <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>
        {% elseif type == 'toggle' %}
            <div class="flex-auto">
                <div class="group relative inline-flex h-5 w-10 shrink-0 items-center justify-center rounded-full outline-offset-2 outline-primary-600 has-focus-visible:outline-2">
                    <span class="absolute mx-auto h-4 w-9 rounded-full bg-gray-200 inset-ring inset-ring-gray-900/5 transition-colors duration-200 ease-in-out group-has-checked:bg-primary-600 dark:bg-gray-800 dark:inset-ring-white/10"></span>
                    <span class="absolute left-0 size-5 rounded-full border border-gray-300 bg-white shadow-xs transition-transform duration-200 ease-in-out group-has-checked:translate-x-5 dark:border-gray-600 dark:bg-gray-700"></span>
                    <input type="checkbox" id="{{ field }}"
                            {% if is_locked %}
                                disabled
                                {% if value %}checked{% endif %}
                            {% else %}
                                data-model="config.{{ field }}"
                                data-action="change->live#action"
                                data-live-action-param="save"
                            {% endif %}
                           class="absolute inset-0 size-full appearance-none focus:outline-hidden cursor-pointer bg-transparent border-none focus:ring-0 bg-none disabled:cursor-not-allowed" />
                </div>
            </div>
            {% if is_locked %}
                <span class="text-xs text-gray-400 italic">Über Konfiguration festgelegt</span>
            {% endif %}
        {% else %}
            <div class="text-gray-900 dark:text-gray-300">{{ value_display }}</div>
            {% if not is_locked %}
                <button type="button" data-action="live#action" data-live-action-param="activateEditing" data-live-field-param="{{ field }}" 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>
