{# One consent — collapsed: status at a glance; expanded: consent text,
   history and the inline withdraw flow. The consequence of a withdrawal is
   ALWAYS spelled out before the user acts, and the destructive action sits
   behind a confirm sub-step (toggled client-side, no POST).

   What "withdraw" means depends on the consent mode:
     opt-in          revoke — stop future use            (low impact)
     opt-out         object — an explicit "no" decision  (medium)
     compulsory      revoke — participation/account ends (HIGH)
     force_decision  reset — the decision must be re-made (low)

   Required context: state (ConsentState with a signature) #}

{% set mode = state.compulsory %}
{% set signature = state.signature %}
{% set form = state.consentForm %}
{% set participant = state.participant %}
{% set offer = form ? form.offer : signature.offer %}

{# ── current status, derived from mode + signature ── #}
{% if mode == 'force_decision' %}
    {% set decided = state.signed ? '1' : (state.rejected ? '0' : null) %}
    {% if decided is not null %}
        {% set st = { cls: 'ok', label: decided == '1' ? 'decidedYes' : 'decidedNo' } %}
    {% else %}
        {% set st = { cls: 'warn', label: 'open' } %}
    {% endif %}
{% elseif mode == 'opt-out' %}
    {% set st = (state.rejected or state.revoked) ? { cls: 'warn', label: 'objected' } : { cls: 'ok', label: 'agreed' } %}
{% elseif mode == 'opt-in' %}
    {% set st = state.signed ? { cls: 'ok', label: 'granted' } : { cls: 'neutral', label: 'notGranted' } %}
{% else %}
    {% set st = state.signed ? { cls: 'ok', label: 'granted' } : { cls: 'danger', label: 'revoked' } %}
{% endif %}

{% set severity = mode == 'compulsory' ? 'high' : (mode == 'opt-out' ? 'medium' : 'low') %}
{% set active = mode == 'force_decision' ? (decided is not null) : (mode == 'opt-out' ? st.cls == 'ok' : state.signed) %}
{% set when = state.revoked ? signature.revokedAt : (signature.signedAt ?? signature.createdAt) %}

{% set tile_classes = {
    ok: 'bg-[#e5efe9] text-[#2f6f57] dark:bg-[#2f6f57]/20 dark:text-[#9cc4ae]',
    neutral: 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400',
    warn: 'bg-amber-50 text-amber-600 dark:bg-amber-400/10 dark:text-amber-400',
    danger: 'bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400',
} %}
{% set pill_classes = {
    ok: 'bg-[#e5efe9] text-[#245a46] dark:bg-[#2f6f57]/20 dark:text-[#9cc4ae]',
    neutral: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
    warn: 'bg-amber-50 text-amber-700 dark:bg-amber-400/10 dark:text-amber-400',
    danger: 'bg-red-50 text-red-700 dark:bg-red-500/10 dark:text-red-400',
} %}
{% set status_icons = { ok: 'lucide:check', neutral: 'lucide:circle', warn: 'lucide:triangle-alert', danger: 'lucide:x' } %}

<details class="group/row mb-3 overflow-hidden rounded-lg border bg-white transition last:mb-0 open:ring-1 dark:bg-gray-900 {{ st.cls == 'danger' ? 'border-red-200 open:border-red-400 open:ring-red-400 dark:border-red-400/30 dark:open:border-red-400/60 dark:open:ring-red-400/60' : 'border-gray-200 open:border-primary-500 open:ring-primary-500 dark:border-gray-700 dark:open:border-primary-400 dark:open:ring-primary-400' }}"
         id="{{ state.targetId }}">

    {# ── header row (always visible) ── #}
    <summary class="flex cursor-pointer select-none list-none items-center gap-3.5 px-4 py-3.5 transition hover:bg-gray-50 dark:hover:bg-gray-800/60 [&::-webkit-details-marker]:hidden">
        <span class="grid size-9 flex-none place-items-center rounded-lg {{ tile_classes[st.cls] }}">
            <twig:ux:icon name="{{ status_icons[st.cls] }}" class="size-4.5" />
        </span>

        <span class="min-w-0 flex-1">
            <b class="block truncate text-[15px] font-semibold leading-5 text-gray-900 dark:text-gray-100">
                {{ state.title|default ? state.title|machine_translate : 'consents.label'|trans({}, 'cms') }}
            </b>
            <span class="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs font-medium text-gray-500 dark:text-gray-400">
                {% if participant %}
                    {% set tints = ['bg-primary-600', 'bg-[#2f6f57]', 'bg-amber-500', 'bg-violet-600', 'bg-sky-600'] %}
                    <span class="inline-flex items-center gap-1.5">
                        <span class="grid size-[17px] place-items-center rounded text-[8px] font-bold text-white {{ tints[participant.id % tints|length] }}">
                            {{ ((participant.firstname|default('')|first) ~ (participant.lastname|default('')|first))|upper }}
                        </span>
                        {{ participant.name }}
                    </span>
                    {% if offer %}
                        <span class="size-[3px] rounded-full bg-gray-300 dark:bg-gray-600"></span>
                        <a href="{{ path('cms', { to: 'offer_list', edition: offer.edition, auto_item: offer_auto_item(offer) }) }}"
                           class="truncate font-semibold text-primary-600 hover:underline dark:text-primary-400">{{ offer.name }}</a>
                        {% if offer.dates|length %}
                            <span class="size-[3px] rounded-full bg-gray-300 dark:bg-gray-600"></span>
                            <span class="whitespace-nowrap">{{ (offer.dates|first).begin|date('d.m.Y') }}</span>
                        {% endif %}
                    {% endif %}
                {% else %}
                    {{ 'userAccount.consents.accountScope'|trans({}, 'cms') }}
                {% endif %}
            </span>
        </span>

        <span class="flex flex-none flex-col items-end gap-1 text-right">
            <span class="inline-flex items-center whitespace-nowrap rounded-full px-2.5 py-1 text-[11.5px] font-semibold {{ pill_classes[st.cls] }}">
                {{ ('userAccount.consents.state.' ~ st.label)|trans({}, 'cms') }}
            </span>
            {% if when %}
                <span class="hidden whitespace-nowrap text-[11px] font-medium text-gray-400 dark:text-gray-500 sm:block">{{ when|date('d.m.Y H:i') }}</span>
            {% endif %}
        </span>

        <twig:ux:icon name="lucide:chevron-down" class="size-4.5 flex-none text-gray-400 transition-transform group-open/row:rotate-180" />
    </summary>

    {# ── expanded body ── #}
    <div class="border-t border-gray-200 px-4 pb-4 dark:border-gray-700">

        {# full consent text — always visible, scrolls in place #}
        {% if state.consentText %}
            <div class="prose prose-sm dark:prose-invert mt-3.5 max-h-48 max-w-none overflow-y-auto overscroll-contain pr-3 text-[13px] leading-relaxed text-gray-600 dark:text-gray-400">
                {{ state.consentText|markdown_to_html|machine_translate }}
            </div>
        {% endif %}

        {# history #}
        {% set hist = [] %}
        {% if mode == 'force_decision' %}
            {% if signature.signedAt or decided is not null %}
                {% set hist = hist|merge([{ icon: 'lucide:check', label: 'decided', date: signature.signedAt ?? signature.createdAt }]) %}
            {% endif %}
            {% if state.revoked %}
                {% set hist = hist|merge([{ icon: 'lucide:x', label: 'reset', date: signature.revokedAt }]) %}
            {% endif %}
        {% else %}
            {% if signature.signedAt %}
                {% set hist = hist|merge([{ icon: 'lucide:check', label: mode == 'opt-out' ? 'agreed' : 'granted', date: signature.signedAt }]) %}
            {% endif %}
            {% if state.revoked %}
                {% set hist = hist|merge([{ icon: 'lucide:x', label: 'revoked', date: signature.revokedAt }]) %}
            {% elseif state.rejected %}
                {% set hist = hist|merge([{ icon: 'lucide:x', label: mode == 'opt-out' ? 'objected' : 'rejected', date: signature.createdAt }]) %}
            {% endif %}
        {% endif %}
        {% if hist is not empty %}
            <div class="mt-3.5 flex flex-col gap-1.5 rounded-lg border border-gray-200 bg-gray-50 px-3.5 py-3 dark:border-gray-700 dark:bg-gray-800/60">
                {% for line in hist %}
                    <span class="flex items-center gap-2 text-xs font-medium text-gray-600 dark:text-gray-300">
                        <twig:ux:icon name="{{ line.icon }}" class="size-3.5 flex-none text-gray-400" />
                        <b class="font-semibold text-gray-900 dark:text-gray-100">{{ ('userAccount.consents.history.' ~ line.label)|trans({}, 'cms') }}</b>
                        <span class="ml-auto text-[11px] text-gray-400 dark:text-gray-500">{{ line.date|date('d.m.Y H:i') }}</span>
                    </span>
                {% endfor %}
            </div>
        {% endif %}

        {# consequence of a withdrawal — shown BEFORE the user acts #}
        {% set conseq_styles = {
            low: 'bg-sky-50 text-sky-900 dark:bg-sky-400/10 dark:text-sky-300',
            medium: 'bg-amber-50 text-amber-900 dark:bg-amber-400/10 dark:text-amber-300',
            high: 'bg-red-50 text-red-800 dark:bg-red-500/10 dark:text-red-300',
        } %}
        {% set conseq_icons = { low: 'lucide:info', medium: 'lucide:circle-alert', high: 'lucide:triangle-alert' } %}
        {% set conseq_title = mode == 'opt-out' ? 'objectTitle' : (mode == 'force_decision' ? 'resetTitle' : 'withdrawTitle') %}
        {% set conseq_text_key = 'userAccount.consents.consequence.' ~ (mode == 'opt-in' ? 'optIn' : (mode == 'opt-out' ? 'optOut' : (mode == 'force_decision' ? 'force' : (participant ? 'compulsoryOffer' : 'compulsoryAccount')))) %}
        <div class="mt-3.5 flex gap-2.5 rounded-lg px-3.5 py-3 {{ conseq_styles[severity] }}">
            <twig:ux:icon name="{{ conseq_icons[severity] }}" class="mt-0.5 size-4 flex-none" />
            <span class="text-[12.5px] leading-relaxed">
                <b class="block font-bold">{{ ('userAccount.consents.consequence.' ~ conseq_title)|trans({}, 'cms') }}</b>
                {{ conseq_text_key|trans({}, 'cms') }}
            </span>
        </div>

        {# actions — only when the consent form still exists #}
        {% if form %}
            {% set btn_danger = 'inline-flex items-center gap-1.5 rounded-lg bg-red-600 px-3.5 py-2 text-sm font-semibold text-white transition hover:bg-red-700' %}
            {% set btn_danger_ghost = 'inline-flex items-center gap-1.5 rounded-lg border border-red-300 px-3.5 py-2 text-sm font-semibold text-red-600 transition hover:bg-red-50 dark:border-red-400/40 dark:text-red-400 dark:hover:bg-red-500/10' %}
            {% set btn_grant = 'inline-flex items-center gap-1.5 rounded-lg bg-[#2f6f57] px-3.5 py-2 text-sm font-semibold text-white transition hover:bg-[#245a46]' %}
            {% set btn_ghost = 'inline-flex items-center rounded-lg px-3.5 py-2 text-sm font-semibold text-gray-600 transition hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700' %}
            {% set withdraw_label = ('userAccount.consents.action.' ~ (mode == 'opt-out' ? 'object' : (mode == 'force_decision' ? 'reset' : 'withdraw')))|trans({}, 'cms') %}

            <div class="mt-3.5" data-manage>
                <div class="flex flex-wrap items-center gap-2.5" data-actions>
                    {% if mode == 'force_decision' %}
                        {# change the decision directly, withdrawing only resets it #}
                        <span class="text-[13px] font-medium text-gray-500 dark:text-gray-400">{{ 'userAccount.consents.action.changeDecision'|trans({}, 'cms') }}</span>
                        {% set seg_off = 'text-gray-500 hover:bg-white/60 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800/60 dark:hover:text-gray-100' %}
                        <span class="inline-grid grid-cols-2 gap-1.5 rounded-lg bg-gray-100 p-1 dark:bg-gray-700">
                            <button type="button"
                                    data-action="live#action"
                                    data-live-action-param="decide"
                                    data-live-signature-param="{{ signature.id }}"
                                    data-live-decision-param="1"
                                    class="flex items-center justify-center gap-2 rounded-md px-3 py-1.5 text-sm font-semibold transition {{ decided == '1' ? 'bg-white text-[#245a46] shadow-sm dark:bg-gray-800 dark:text-[#9cc4ae]' : seg_off }}">
                                {% if decided == '1' %}<twig:ux:icon name="lucide:check" class="size-3.5" />{% endif %}
                                {{ 'applicationForm.agree'|trans({}, 'cms') }}
                            </button>
                            <button type="button"
                                    data-action="live#action"
                                    data-live-action-param="decide"
                                    data-live-signature-param="{{ signature.id }}"
                                    data-live-decision-param="0"
                                    class="flex items-center justify-center gap-2 rounded-md px-3 py-1.5 text-sm font-semibold transition {{ decided == '0' ? 'bg-white text-red-600 shadow-sm dark:bg-gray-800 dark:text-red-400' : seg_off }}">
                                {% if decided == '0' %}<twig:ux:icon name="lucide:x" class="size-3.5" />{% endif %}
                                {{ 'applicationForm.revoke'|trans({}, 'cms') }}
                            </button>
                        </span>
                        <span class="flex-1"></span>
                        {% if active %}
                            <button type="button" data-action="ferienpass--cms-consents#ask" class="{{ btn_danger_ghost }}">
                                {{ withdraw_label }}
                            </button>
                        {% endif %}
                    {% elseif active %}
                        <button type="button" data-action="ferienpass--cms-consents#ask" class="{{ severity == 'high' ? btn_danger : btn_danger_ghost }}">
                            <twig:ux:icon name="lucide:rotate-ccw" class="size-3.5" />
                            {{ withdraw_label }}
                        </button>
                    {% else %}
                        <button type="button"
                                data-action="live#action"
                                data-live-action-param="decide"
                                data-live-signature-param="{{ signature.id }}"
                                data-live-decision-param="1"
                                class="{{ btn_grant }}">
                            <twig:ux:icon name="lucide:check" class="size-3.5" />
                            {{ ('userAccount.consents.action.' ~ (mode == 'opt-out' ? 'restore' : (mode == 'opt-in' ? 'grant' : 'regrant')))|trans({}, 'cms') }}
                        </button>
                    {% endif %}
                </div>

                {# confirm sub-step — revealed in place of the actions #}
                {% if active %}
                    <div class="hidden rounded-lg border px-3.5 py-3 {{ severity == 'high' ? 'border-red-300 dark:border-red-400/40' : 'border-gray-300 dark:border-gray-600' }}" data-confirm>
                        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                            {{ ('userAccount.consents.confirm.' ~ (mode == 'opt-out' ? 'object' : (mode == 'force_decision' ? 'reset' : 'withdraw')))|trans({}, 'cms') }}
                        </p>
                        <p class="mt-0.5 text-[13px] leading-relaxed text-gray-600 dark:text-gray-300">
                            {{ conseq_text_key|trans({}, 'cms') }}
                        </p>
                        <div class="mt-3 flex flex-wrap gap-2">
                            {% if mode == 'opt-out' %}
                                {# an objection is an explicit "no" decision, not a revocation #}
                                <button type="button"
                                        data-action="live#action"
                                        data-live-action-param="decide"
                                        data-live-signature-param="{{ signature.id }}"
                                        data-live-decision-param="0"
                                        class="{{ btn_danger }}">{{ withdraw_label }}</button>
                            {% else %}
                                <button type="button"
                                        data-action="live#action"
                                        data-live-action-param="revoke"
                                        data-live-signature-param="{{ signature.id }}"
                                        class="{{ btn_danger }}">{{ withdraw_label }}</button>
                            {% endif %}
                            <button type="button" data-action="ferienpass--cms-consents#cancel" class="{{ btn_ghost }}">
                                {{ 'userAccount.consents.confirm.cancel'|trans({}, 'cms') }}
                            </button>
                        </div>
                    </div>
                {% endif %}
            </div>
        {% endif %}

    </div>
</details>
