{% extends 'administration/base.html.twig' %}

{% block title %}{{ 'admin.modules_information.captcha'|trans }}{% endblock %}

{% block body %}
<div class="captcha-settings-page container-fluid px-3 px-lg-4 py-4 pb-5" style="max-width: 1100px; margin-inline: auto;">
    <div class="rounded-4 border bg-body-tertiary bg-opacity-25 p-4 p-lg-5 mb-4 position-relative overflow-hidden">
        <div class="row align-items-start g-4 position-relative">
            <div class="col-lg">
                <div class="d-flex align-items-start gap-3">
                    <div class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0 text-white captcha-settings-page__icon">
                        <i class="bi bi-shield-lock fs-4"></i>
                    </div>
                    <div>
                        <h1 class="h3 fw-bold mb-2 gradient-text">{{ 'admin.modules_information.captcha'|trans }}</h1>
                        <p class="text-muted mb-0 small lh-lg">{{ 'admin.modules_information.captcha_description'|trans }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-auto d-flex flex-wrap gap-2 justify-content-lg-end">
                <a href="{{ path('app_admin_modules') }}" class="btn btn-outline-secondary rounded-pill px-4">
                    <i class="bi bi-arrow-left me-2"></i>{{ 'admin.page.back'|trans }}
                </a>
                <button type="submit" form="captcha-settings-form" class="btn btn-primary rounded-pill px-4">
                    <i class="bi bi-check2 me-2"></i>{{ 'admin.save'|trans }}
                </button>
            </div>
        </div>
    </div>

    <div class="alert alert-info border-0 shadow-sm rounded-4 mb-4 d-flex gap-3" role="note">
        <div class="flex-shrink-0 pt-1"><i class="bi bi-info-circle fs-5"></i></div>
        <div class="small">
            <strong class="d-block mb-1">{{ 'admin.captcha.hint_title'|trans }}</strong>
            <span class="text-body-secondary">{{ 'admin.captcha.hint_body'|trans|raw }}</span>
        </div>
    </div>

    {{ form_start(form, { attr: { id: 'captcha-settings-form', class: 'needs-validation' } }) }}

    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="admin-card rounded-4 border-0 shadow-sm p-4 p-lg-5">
                <h2 class="h6 text-uppercase letter-spacing fw-semibold text-body-secondary mb-4">
                    <i class="bi bi-key me-2 text-primary"></i>{{ 'admin.captcha.section_connection'|trans }}
                </h2>
                <div class="row g-4">
                    <div class="col-12">
                        <div class="captcha-settings-page__switch-row">
                            <div class="captcha-settings-page__switch-row-text">
                                <span class="fw-semibold d-block">{{ 'admin.captcha.enabled'|trans }}</span>
                                <span class="small text-muted">{{ 'admin.captcha.protect_forms_intro'|trans }}</span>
                            </div>
                            <div class="form-switch form-switch-lg captcha-settings-page__switch-trail m-0">
                                {{ form_widget(form.enabled, { attr: { class: 'form-check-input' } }) }}
                            </div>
                        </div>
                        {{ form_errors(form.enabled) }}
                    </div>
                    <div class="col-12">
                        {{ form_label(form.apiKey, null, { label_attr: { class: 'form-label fw-semibold' } }) }}
                        {{ form_widget(form.apiKey, { attr: { class: 'form-control form-control-lg font-monospace', autocomplete: 'off' } }) }}
                        {{ form_help(form.apiKey) }}
                        {{ form_errors(form.apiKey) }}
                        {% if settings.apiKey %}
                            <p class="form-text small mb-0 mt-2"><i class="bi bi-check-circle text-success me-1"></i>{{ 'admin.captcha.hmac_set'|trans }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-6">
            <div class="admin-card rounded-4 border-0 shadow-sm p-4 h-100">
                <h2 class="h6 text-uppercase letter-spacing fw-semibold text-body-secondary mb-4">
                    <i class="bi bi-ui-checks-grid me-2 text-primary"></i>{{ 'admin.captcha.section_forms'|trans }}
                </h2>
                <ul class="list-unstyled mb-0 captcha-settings-page__form-list">
                    {% set fields = [
                        { field: form.protectContactForm, icon: 'bi-envelope' },
                        { field: form.protectLogin, icon: 'bi-box-arrow-in-right' },
                        { field: form.protectRegister, icon: 'bi-person-plus' },
                        { field: form.protectForgotPassword, icon: 'bi-question-circle' },
                        { field: form.protectResetPassword, icon: 'bi-key' },
                    ] %}
                    {% for item in fields %}
                        <li>
                            <div class="captcha-settings-page__switch-row">
                                <div class="d-flex align-items-center gap-2 min-w-0 captcha-settings-page__switch-row-text">
                                    <span class="text-primary flex-shrink-0" aria-hidden="true"><i class="bi {{ item.icon }}"></i></span>
                                    <label class="mb-0 fw-medium" for="{{ item.field.vars.id }}">{{ item.field.vars.label|trans }}</label>
                                </div>
                                <div class="form-switch captcha-settings-page__switch-trail m-0">
                                    {{ form_widget(item.field, { attr: { class: 'form-check-input' } }) }}
                                </div>
                            </div>
                            {{ form_errors(item.field) }}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    {{ form_end(form) }}
</div>

<style>
    .captcha-settings-page__icon {
        width: 3rem;
        height: 3rem;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
    }
    .letter-spacing { letter-spacing: .06em; }

    /* Eine Zeile: Text links, Switch rechts – ohne Extra-Kästen */
    .captcha-settings-page__switch-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem 1.25rem;
        padding: 0.65rem 0;
        border-bottom: 1px solid var(--bs-border-color-translucent);
    }
    .captcha-settings-page__switch-row:first-child { padding-top: 0; }
    .captcha-settings-page__form-list li:last-child .captcha-settings-page__switch-row {
        border-bottom: 0;
        padding-bottom: 0;
    }
    .captcha-settings-page__switch-row-text {
        flex: 1;
        min-width: 0;
    }

    /*
     * Bootstrap .form-check legt padding-left + negativen Input-Margin für Checkbox neben Label.
     * Nur den Switch ohne linkes Label in .form-check: Padding zurücksetzen, sonst „wandert“ der Schalter.
     */
    .captcha-settings-page__switch-trail.form-check {
        padding-left: 0;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .captcha-settings-page__switch-trail .form-check-input {
        float: none;
        margin-left: 0 !important;
        margin-top: 0;
        cursor: pointer;
    }
    .captcha-settings-page__form-list .captcha-settings-page__switch-row {
        padding: 0.55rem 0;
    }
</style>
{% endblock %}