{% extends "@FerienpassAdmin/page/tools/_settings.html.twig" %}
{% trans_default_domain 'admin' %}

{% block main %}

    <div class="space-y-16 sm:space-y-20">
        {{ component('Admin:Settings:PageSettings', {config: config}) }}

        {{ component('Admin:Settings:SystemSettings', {config: config}) }}

        <div>
            <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">Integrationen</h2>
            <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">Verwalten Sie hier Ihre Systemintegrationen.</p>

            <ul role="list" class="mt-6 divide-y divide-gray-100 border-t border-gray-200 text-sm/6 dark:divide-white/5 dark:border-white/5">
                <li class="flex justify-between gap-x-6 py-6">
                    <div class="font-medium text-gray-900 dark:text-white">PmPaymentProvider</div>
                    {% set pmConfigured = integrations_manager.isIntegrationConfigured('PmPaymentProvider') %}
                    {% if pmConfigured %}
                        <div class="flex items-center gap-x-2">
                            <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20">Konfiguriert</span>
                            <a href="{{ path('admin_tools_settings_integration_configure', {integration: 'PmPaymentProvider'}) }}" data-turbo-frame="modal" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Aktualisieren</a>
                        </div>
                    {% else %}
                        <div class="flex items-center gap-x-2">
                            <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20">Nicht konfiguriert</span>
                            <a href="{{ path('admin_tools_settings_integration_configure', {integration: 'PmPaymentProvider'}) }}" data-turbo-frame="modal" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Konfigurieren</a>
                        </div>
                    {% endif %}
                </li>
                <li class="flex justify-between gap-x-6 py-6">
                    <div class="font-medium text-gray-900 dark:text-white">GPT Image Generation</div>
                    {% set gptConfigured = integrations_manager.isIntegrationConfigured('gpt_image_generation') %}
                    {% if gptConfigured %}
                        <div class="flex items-center gap-x-2">
                            <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20">Konfiguriert</span>
                            <a href="{{ path('admin_tools_settings_integration_configure', {integration: 'gpt_image_generation'}) }}" data-turbo-frame="modal" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Aktualisieren</a>
                        </div>
                    {% else %}
                        <div class="flex items-center gap-x-2">
                            <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20">Nicht konfiguriert</span>
                            <a href="{{ path('admin_tools_settings_integration_configure', {integration: 'gpt_image_generation'}) }}" data-turbo-frame="modal" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Konfigurieren</a>
                        </div>
                    {% endif %}
                </li>
                <li class="flex justify-between gap-x-6 py-6">
                    <div class="font-medium text-gray-900 dark:text-white">Brevo SMS</div>
                    {% set brevoConfigured = integrations_manager.isIntegrationConfigured('brevo_sms') %}
                    {% if brevoConfigured %}
                        <div class="flex items-center gap-x-2">
                            <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20">Konfiguriert</span>
                            <a href="{{ path('admin_tools_settings_integration_configure', {integration: 'brevo_sms'}) }}" data-turbo-frame="modal" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Aktualisieren</a>
                        </div>
                    {% else %}
                        <div class="flex items-center gap-x-2">
                            <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20">Nicht konfiguriert</span>
                            <a href="{{ path('admin_tools_settings_integration_configure', {integration: 'brevo_sms'}) }}" data-turbo-frame="modal" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Konfigurieren</a>
                        </div>
                    {% endif %}
                </li>
            </ul>
        </div>

        {{ component('Admin:Settings:LanguageSettings', {config: config}) }}

        <div>
            <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">{{ 'offerCategories.title'|trans }}</h2>
            <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">Hier können Kategorien für die Angebote definiert werden.</p>

            <ul id="offer-categories-list" role="list" class="mt-6 divide-y divide-gray-100 border-t border-gray-200 text-sm/6 dark:divide-white/5 dark:border-white/5">
                {% for category in categories %}
                    <li id="category-{{ category.uuid }}" class="flex justify-between gap-x-6 py-6">
                        <div class="font-medium text-gray-900 dark:text-white">{{ category.name }} <span class="text-xs text-gray-400">({{ category.alias }})</span></div>
                        <a href="{{ path('admin_tools_settings_category_edit', {uuid: category.uuid.toBase58}) }}" data-turbo-frame="modal" class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Bearbeiten</a>
                    </li>
                {% endfor %}
            </ul>

            <div class="flex border-t border-gray-100 pt-6 dark:border-white/5">
                <a href="{{ path('admin_tools_settings_category_create') }}" data-turbo-frame="modal" class="text-sm/6 font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"><span aria-hidden="true">+</span> Kategorie hinzufügen</a>
            </div>
        </div>

    </div>

{% endblock %}
