<div {{ attributes }}>
    {% if uploadLogo %}
        <div class="flex w-full flex-wrap items-center gap-2">
            <label for="logo" class="sr-only">Logo</label>
            <input type="file" id="logo" name="logo" accept="image/jpeg,image/png,image/webp" class="text-sm text-gray-700 dark:text-gray-300"/>
            <twig:Admin:Button variant="primary" size="sm" type="button" data-action="live#action" data-live-action-param="files(logo)|upload">Hochladen</twig:Admin:Button>
            <twig:Admin:Button variant="ghost" size="sm" type="button" data-action="live#action" data-live-action-param="cancelUploadLogo">Abbrechen</twig:Admin:Button>
        </div>
    {% else %}
        <div class="flex flex-wrap items-center gap-4">
            <div class="grid h-14 w-36 shrink-0 place-items-center overflow-hidden rounded-lg border border-dashed border-gray-300 bg-white px-2 text-center text-xs text-gray-400 dark:border-gray-700 dark:bg-gray-900">
                {% if config.logo %}
                    {{ figure_html(config.logo|to_filesystem_item, picture_config({
                        width: 200,
                        height: 80,
                        resizeMode: 'box',
                        densities: '1x, 2x'
                    })) }}
                {% else %}
                    <span>kein Logo</span>
                {% endif %}
            </div>
            <div class="flex items-center gap-x-3">
                <twig:Admin:Button size="sm" type="button" data-action="live#action" data-live-action-param="showUploadLogo">{{ config.logo ? 'Ersetzen' : 'Datei wählen' }}</twig:Admin:Button>
                {% if config.logo %}
                    <button type="button" data-action="live#action" data-live-action-param="removeLogo"
                            class="text-sm font-medium text-gray-500 hover:text-red-700 dark:text-gray-400 dark:hover:text-red-400">Entfernen</button>
                {% endif %}
            </div>
        </div>
        <div class="mt-2.5 flex flex-wrap gap-2">
            <span class="inline-flex items-center gap-x-1.5 rounded-full border border-green-600/20 bg-green-50 px-2.5 py-0.5 text-xs font-semibold text-green-700 dark:border-green-400/20 dark:bg-green-400/10 dark:text-green-400">System-E-Mails</span>
            <span class="inline-flex cursor-help items-center gap-x-1 rounded-full border border-gray-200 bg-gray-100 px-2.5 py-0.5 text-xs font-semibold text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
                  title="Der Header liest eine Datei aus dem Deployment und kann pro Mandant nicht abweichen.">
                Website-Header
                <twig:ux:icon name="ph:lock-simple-fill" class="size-3" aria-hidden="true" />
            </span>
        </div>
    {% endif %}
    {% if confirmation %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Änderungen gespeichert" message="{{ confirmation }}"/>
        </twig:Turbo:Stream:Prepend>
    {% endif %}
</div>
