{# Data-usage transparency overview.

   Three questions, answered per recipient:
     • WHO    — the host (Veranstalter:in) of a booked offer, plus the
                responsible body (verantwortliche Stelle / Impressum).
     • WHAT   — guardian contact + participant name/age, and the exact
                date of birth ONLY when the offer collects it.
     • UNTIL  — the host's access ends with the "Teilnahmelisten verfügbar"
                window (fallback: offer end + retention period); the
                responsible body keeps access until the account is deleted.

   Required context (see {@see \Ferienpass\CmsBundle\Components\DataUsage}):
     guardian, children, controller, recipients, hasPayments, retentionMonths #}

{% trans_default_domain 'cms' %}

{% macro chip(icon, label, value, variant) %}
    {% set styles = {
        shared: 'bg-white text-gray-600 border border-gray-200 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700',
        highlight: 'bg-[#e5efe9] text-[#245a46] border border-[#cce0d4] dark:bg-[#2f6f57]/20 dark:text-[#9cc4ae] dark:border-transparent',
        withheld: 'border border-dashed border-gray-300 text-gray-400 dark:border-gray-600 dark:text-gray-500',
        plain: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300',
    } %}
    <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold {{ styles[variant ?? 'plain'] }}">
        <twig:ux:icon name="{{ icon }}" class="size-3.5 flex-none {{ variant == 'highlight' ? 'text-[#2f6f57]' : 'text-gray-400' }}" />
        {{ label }}
        {% if value is not empty %}<span class="font-medium {{ variant == 'withheld' ? 'text-gray-400' : 'text-gray-500 dark:text-gray-400' }}">{{ value }}</span>{% endif %}
    </span>
{% endmacro %}

{% import _self as ui %}

<div>

    {# ── stored profile data ─────────────────────────────────────────── #}
    <h3 class="mb-2.5 text-[11px] font-bold uppercase tracking-widest text-gray-400">{{ 'userAccount.dataUsage.storedHeading'|trans }}</h3>
    <div class="mb-8 rounded-2xl border border-gray-200 bg-gray-50/60 px-4 dark:border-gray-700 dark:bg-gray-800/40">

        {% if guardian %}
            <div class="flex items-start gap-3.5 border-t border-gray-200 py-4 first:border-t-0 dark:border-gray-700">
                <span class="grid size-9 flex-none place-items-center rounded-lg bg-[#e5efe9] text-[#2f6f57] dark:bg-[#2f6f57]/20 dark:text-[#9cc4ae]">
                    <twig:ux:icon name="lucide:user" class="size-4.5" />
                </span>
                <div class="min-w-0 flex-1">
                    <div class="text-[11px] font-bold uppercase tracking-wider text-gray-400">{{ 'userAccount.dataUsage.guardianRole'|trans }}</div>
                    <div class="text-sm font-semibold text-gray-900 dark:text-white">{{ guardian.name }}</div>
                    <div class="mt-2 flex flex-wrap gap-1.5">
                        {% if guardian.phone %}{{ ui.chip('lucide:phone', 'userAccount.dataUsage.field.phone'|trans, guardian.phone) }}{% endif %}
                        {% if guardian.mobile %}{{ ui.chip('lucide:smartphone', 'userAccount.dataUsage.field.mobile'|trans, guardian.mobile) }}{% endif %}
                        {% if guardian.email %}{{ ui.chip('lucide:mail', 'userAccount.dataUsage.field.mail'|trans, guardian.email) }}{% endif %}
                    </div>
                </div>
            </div>
        {% endif %}

        {% for child in children %}
            <div class="flex items-start gap-3.5 border-t border-gray-200 py-4 dark:border-gray-700">
                <span class="grid size-9 flex-none place-items-center rounded-lg text-[11px] font-bold text-white" style="background:{{ child.tint }}">{{ child.initials }}</span>
                <div class="min-w-0 flex-1">
                    <div class="text-[11px] font-bold uppercase tracking-wider text-gray-400">{{ 'userAccount.dataUsage.childRole'|trans }}</div>
                    <div class="text-sm font-semibold text-gray-900 dark:text-white">
                        {{ child.name }}{% if child.age is not null %} <span class="font-medium text-gray-400">· {{ 'userAccount.dataUsage.years'|trans({ years: child.age }) }}</span>{% endif %}
                    </div>
                    <div class="mt-2 flex flex-wrap gap-1.5">
                        {{ ui.chip('lucide:user', 'userAccount.dataUsage.field.name'|trans, null) }}
                        {% if child.dateOfBirth %}{{ ui.chip('lucide:cake', 'userAccount.dataUsage.field.dob'|trans, child.dateOfBirth|date('d.m.Y')) }}{% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}

    </div>

    {# ── responsible body (Impressum) ────────────────────────────────── #}
    {% if controller %}
        <h3 class="mb-2.5 text-[11px] font-bold uppercase tracking-widest text-gray-400">{{ 'userAccount.dataUsage.controllerHeading'|trans }}</h3>
        <details class="group/row mb-8 overflow-hidden rounded-2xl border border-gray-200 bg-white transition open:ring-1 open:border-primary-500 open:ring-primary-500 dark:border-gray-700 dark:bg-gray-900 dark:open:border-primary-400 dark:open:ring-primary-400">
            <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-10 flex-none place-items-center rounded-xl bg-[#e5efe9] text-[#2f6f57] dark:bg-[#2f6f57]/20 dark:text-[#9cc4ae]">
                    <twig:ux:icon name="lucide:building-2" class="size-5" />
                </span>
                <div class="min-w-0 flex-1">
                    <div class="text-sm font-semibold text-gray-900 dark:text-white">{{ controller.name }}</div>
                    <div class="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-gray-500 dark:text-gray-400">
                        <span>{{ 'userAccount.dataUsage.controllerRole'|trans }}</span>
                        {% if controller.address %}<span class="size-0.5 rounded-full bg-gray-300"></span><span>{{ controller.address }}</span>{% endif %}
                    </div>
                </div>
                <div class="flex flex-none flex-col items-end gap-0.5 text-right">
                    <span class="inline-flex items-center gap-1.5 rounded-full bg-[#e5efe9] px-2.5 py-1 text-[11px] font-semibold text-[#245a46] dark:bg-[#2f6f57]/20 dark:text-[#9cc4ae]">
                        <twig:ux:icon name="lucide:lock" class="size-3" /> {{ 'userAccount.dataUsage.untilAccountDeletion'|trans }}
                    </span>
                    <span class="hidden text-[11px] text-gray-400 sm:block">{{ 'userAccount.dataUsage.permanentAccess'|trans }}</span>
                </div>
                <twig:ux:icon name="lucide:chevron-down" class="size-4.5 flex-none text-gray-400 transition group-open/row:rotate-180" />
            </summary>

            <div class="border-t border-gray-100 px-4 pb-5 pt-1 dark:border-gray-800">
                {% if controller.department or controller.address %}
                    <div class="mt-3.5 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                        <twig:ux:icon name="lucide:map-pin" class="size-4 flex-none text-gray-400" />
                        <span>{{ [controller.department, controller.address]|filter(v => v)|join(' · ') }}</span>
                    </div>
                {% endif %}

                <h4 class="mt-4 mb-2 text-[11px] font-bold uppercase tracking-wider text-gray-400">{{ 'userAccount.dataUsage.dataAccessed'|trans }}</h4>
                <div class="rounded-xl border border-gray-200 bg-gray-50/60 p-3.5 dark:border-gray-700 dark:bg-gray-800/40">
                    <div class="mb-2 flex items-center gap-2">
                        <span class="grid size-6 flex-none place-items-center rounded-md bg-[#2f6f57] text-[10px] font-bold text-white">{{ guardian ? guardian.name|slice(0, 1) }}</span>
                        <span class="text-xs font-semibold text-gray-700 dark:text-gray-200">{{ 'userAccount.dataUsage.guardianRole'|trans }} — {{ guardian.name }}</span>
                    </div>
                    <div class="flex flex-wrap gap-1.5">
                        {% if guardian.phone %}{{ ui.chip('lucide:phone', 'userAccount.dataUsage.field.phone'|trans, guardian.phone, 'shared') }}{% endif %}
                        {% if guardian.mobile %}{{ ui.chip('lucide:smartphone', 'userAccount.dataUsage.field.mobile'|trans, guardian.mobile, 'shared') }}{% endif %}
                        {% if guardian.email %}{{ ui.chip('lucide:mail', 'userAccount.dataUsage.field.mail'|trans, guardian.email, 'shared') }}{% endif %}
                    </div>
                </div>
                {% for child in children %}
                    <div class="mt-2.5 rounded-xl border border-gray-200 bg-gray-50/60 p-3.5 dark:border-gray-700 dark:bg-gray-800/40">
                        <div class="mb-2 flex items-center gap-2">
                            <span class="grid size-6 flex-none place-items-center rounded-md text-[10px] font-bold text-white" style="background:{{ child.tint }}">{{ child.initials }}</span>
                            <span class="text-xs font-semibold text-gray-700 dark:text-gray-200">{{ 'userAccount.dataUsage.participant'|trans }} — {{ child.name }}</span>
                        </div>
                        <div class="flex flex-wrap gap-1.5">
                            {{ ui.chip('lucide:user', 'userAccount.dataUsage.field.name'|trans, null, 'shared') }}
                            {% if child.age is not null %}{{ ui.chip('lucide:clock', 'userAccount.dataUsage.field.age'|trans, 'userAccount.dataUsage.yearsShort'|trans({ years: child.age }), 'shared') }}{% endif %}
                            {% if child.dateOfBirth %}{{ ui.chip('lucide:cake', 'userAccount.dataUsage.field.dob'|trans, child.dateOfBirth|date('d.m.Y'), 'shared') }}{% endif %}
                        </div>
                    </div>
                {% endfor %}

                <div class="mt-3 flex items-start gap-2 text-xs leading-relaxed text-gray-500 dark:text-gray-400">
                    <twig:ux:icon name="lucide:info" class="mt-0.5 size-3.5 flex-none text-gray-400" />
                    <span>{{ 'userAccount.dataUsage.controllerNote'|trans }}</span>
                </div>

                <h4 class="mt-4 mb-2 text-[11px] font-bold uppercase tracking-wider text-gray-400">{{ 'userAccount.dataUsage.timelineHeading'|trans }}</h4>
                <div class="rounded-xl border border-gray-200 p-3.5 dark:border-gray-700">
                    <div class="flex items-center gap-3 py-1">
                        <span class="grid size-7 flex-none place-items-center rounded-lg bg-[#e5efe9] text-[#2f6f57] dark:bg-[#2f6f57]/20 dark:text-[#9cc4ae]"><twig:ux:icon name="lucide:shield-check" class="size-4" /></span>
                        <div class="min-w-0 flex-1">
                            <div class="text-xs text-gray-500 dark:text-gray-400">{{ 'userAccount.dataUsage.controllerAccessExists'|trans }}</div>
                            <div class="text-sm font-semibold text-gray-900 dark:text-white">{{ 'userAccount.dataUsage.whileAccountExists'|trans }}</div>
                        </div>
                    </div>
                    <div class="ml-3 h-3.5 w-0.5 rounded bg-gray-200 dark:bg-gray-700"></div>
                    <div class="flex items-center gap-3 py-1">
                        <span class="grid size-7 flex-none place-items-center rounded-lg bg-amber-50 text-amber-600 dark:bg-amber-400/10 dark:text-amber-400"><twig:ux:icon name="lucide:trash-2" class="size-4" /></span>
                        <div class="min-w-0 flex-1">
                            <div class="text-xs text-gray-500 dark:text-gray-400">{{ 'userAccount.dataUsage.controllerDeletion'|trans }}</div>
                            <div class="text-sm font-semibold text-amber-800 dark:text-amber-300">{{ 'userAccount.dataUsage.withAccountDeletion'|trans }}</div>
                        </div>
                    </div>
                    {% if hasPayments %}
                        <div class="ml-3 h-3.5 w-0.5 rounded bg-gray-200 dark:bg-gray-700"></div>
                        <div class="flex items-center gap-3 py-1">
                            <span class="grid size-7 flex-none place-items-center rounded-lg bg-[#e5efe9] text-[#2f6f57] dark:bg-[#2f6f57]/20 dark:text-[#9cc4ae]"><twig:ux:icon name="lucide:lock" class="size-4" /></span>
                            <div class="min-w-0 flex-1">
                                <div class="text-xs text-gray-500 dark:text-gray-400">{{ 'userAccount.dataUsage.retentionRow'|trans }}</div>
                                <div class="text-sm font-semibold text-gray-900 dark:text-white">{{ 'userAccount.dataUsage.retentionValue'|trans }}</div>
                            </div>
                        </div>
                    {% endif %}
                    <div class="mt-2.5 flex items-start gap-2 border-t border-dashed border-gray-200 pt-2.5 text-xs leading-relaxed text-gray-500 dark:border-gray-700 dark:text-gray-400">
                        <twig:ux:icon name="lucide:info" class="mt-0.5 size-3.5 flex-none text-gray-400" />
                        <span>{{ (hasPayments ? 'userAccount.dataUsage.controllerCaptionPayments' : 'userAccount.dataUsage.controllerCaptionNoPayments')|trans }}</span>
                    </div>
                </div>
            </div>
        </details>
    {% endif %}

    {# ── recipients (hosts with current access) ──────────────────────── #}
    <h3 class="mb-2.5 text-[11px] font-bold uppercase tracking-widest text-gray-400">{{ 'userAccount.dataUsage.recipientsHeading'|trans }}</h3>

    {% if recipients is empty %}
        <div class="rounded-2xl border border-dashed border-gray-300 px-6 py-10 text-center dark:border-gray-700">
            <twig:ux:icon name="lucide:share-2" class="mx-auto size-9 text-gray-400" />
            <p class="mt-3 text-sm text-gray-500 dark:text-gray-400">{{ 'userAccount.dataUsage.empty'|trans }}</p>
        </div>
    {% else %}
        {% for r in recipients %}
            <details class="group/row mb-3 overflow-hidden rounded-2xl border border-gray-200 bg-white transition open:ring-1 open:border-primary-500 open:ring-primary-500 dark:border-gray-700 dark:bg-gray-900 dark:open:border-primary-400 dark:open:ring-primary-400">
                <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-10 flex-none place-items-center rounded-xl bg-primary-50 text-primary-600 dark:bg-primary-400/10 dark:text-primary-300">
                        <twig:ux:icon name="lucide:building" class="size-5" />
                    </span>
                    <div class="min-w-0 flex-1">
                        <div class="truncate text-sm font-semibold text-gray-900 dark:text-white">{{ r.host }}</div>
                        <div class="mt-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-gray-500 dark:text-gray-400">
                            {% if r.offers|length > 1 %}
                                <span class="font-bold text-primary-600 dark:text-primary-300">{{ 'userAccount.dataUsage.offersCount'|trans({ count: r.offers|length }) }}</span>
                            {% else %}
                                <span class="truncate font-medium text-primary-600 dark:text-primary-300">{{ r.offers|first.offerName }}</span>
                            {% endif %}
                            <span class="size-0.5 rounded-full bg-gray-300"></span>
                            {% set names = r.offers|map(o => o.childName)|reduce((c, n) => n in c ? c : c|merge([n]), []) %}
                            <span>{{ names|join(', ') }}</span>
                        </div>
                    </div>
                    <div class="flex flex-none flex-col items-end gap-0.5 text-right">
                        {% if r.accessUntil %}
                            <span class="inline-flex items-center gap-1.5 rounded-full bg-[#e5efe9] px-2.5 py-1 text-[11px] font-semibold text-[#245a46] dark:bg-[#2f6f57]/20 dark:text-[#9cc4ae]">
                                <twig:ux:icon name="lucide:clock" class="size-3" /> {{ 'userAccount.dataUsage.until'|trans({ date: r.accessUntil|date('d.m.Y') }) }}
                            </span>
                        {% endif %}
                    </div>
                    <twig:ux:icon name="lucide:chevron-down" class="size-4.5 flex-none text-gray-400 transition group-open/row:rotate-180" />
                </summary>

                <div class="border-t border-gray-100 px-4 pb-5 pt-1 dark:border-gray-800">
                    {% if r.address %}
                        <div class="mt-3.5 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                            <twig:ux:icon name="lucide:map-pin" class="size-4 flex-none text-gray-400" />
                            <span>{{ r.address }}</span>
                        </div>
                    {% endif %}

                    {# guardian data — shared for all of this host's offers #}
                    <h4 class="mt-4 mb-2 text-[11px] font-bold uppercase tracking-wider text-gray-400">{{ 'userAccount.dataUsage.guardianContact'|trans }}</h4>
                    <div class="rounded-xl border border-gray-200 bg-gray-50/60 p-3.5 dark:border-gray-700 dark:bg-gray-800/40">
                        <div class="mb-2 flex items-center gap-2">
                            <span class="grid size-6 flex-none place-items-center rounded-md bg-[#2f6f57] text-[10px] font-bold text-white">{{ guardian.name|slice(0, 1) }}</span>
                            <span class="text-xs font-semibold text-gray-700 dark:text-gray-200">{{ guardian.name }}</span>
                        </div>
                        <div class="flex flex-wrap gap-1.5">
                            {% if guardian.phone %}{{ ui.chip('lucide:phone', 'userAccount.dataUsage.field.phone'|trans, guardian.phone, 'shared') }}{% endif %}
                            {% if guardian.mobile %}{{ ui.chip('lucide:smartphone', 'userAccount.dataUsage.field.mobile'|trans, guardian.mobile, 'shared') }}{% endif %}
                            {% if guardian.email %}{{ ui.chip('lucide:mail', 'userAccount.dataUsage.field.mail'|trans, guardian.email, 'shared') }}{% endif %}
                        </div>
                    </div>

                    {# per-offer participant data + deletion frist #}
                    <h4 class="mt-4 mb-2 text-[11px] font-bold uppercase tracking-wider text-gray-400">
                        {{ 'userAccount.dataUsage.perOffer'|trans({ count: r.offers|length }) }}
                    </h4>
                    {% for o in r.offers %}
                        <div class="mb-2.5 rounded-xl border border-gray-200 p-3.5 last:mb-0 dark:border-gray-700">
                            <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
                                {% set offer_url = o.offer.alias is defined and o.offer.alias ? path('cms', { to: 'offer_list', edition: o.offer.edition, auto_item: offer_auto_item(o.offer) }) : null %}
                                {% if offer_url %}
                                    <a href="{{ offer_url }}" class="text-sm font-semibold text-primary-600 hover:underline dark:text-primary-300">{{ o.offerName }}</a>
                                {% else %}
                                    <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ o.offerName }}</span>
                                {% endif %}
                                <span class="size-0.5 rounded-full bg-gray-300"></span>
                                <span class="inline-flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
                                    <span class="grid size-4 place-items-center rounded text-[8px] font-bold text-white" style="background:{{ o.childTint }}">{{ o.childInitials }}</span>
                                    {{ o.childName }}
                                </span>
                                {% if o.accessUntil %}
                                    <span class="ml-auto rounded-full bg-[#e5efe9] px-2 py-0.5 text-[11px] font-semibold text-[#245a46] dark:bg-[#2f6f57]/20 dark:text-[#9cc4ae]">{{ 'userAccount.dataUsage.until'|trans({ date: o.accessUntil|date('d.m.Y') }) }}</span>
                                {% endif %}
                            </div>
                            <div class="mt-2.5 flex flex-wrap gap-1.5">
                                {{ ui.chip('lucide:user', 'userAccount.dataUsage.field.name'|trans, null, 'shared') }}
                                {% if o.age is not null %}{{ ui.chip('lucide:clock', 'userAccount.dataUsage.field.age'|trans, 'userAccount.dataUsage.yearsShort'|trans({ years: o.age }), 'shared') }}{% endif %}
                                {% if o.collectDob and o.dateOfBirth %}
                                    {{ ui.chip('lucide:cake', 'userAccount.dataUsage.field.dob'|trans, o.dateOfBirth|date('d.m.Y'), 'highlight') }}
                                {% else %}
                                    {{ ui.chip('lucide:cake', 'userAccount.dataUsage.field.dob'|trans, 'userAccount.dataUsage.notShared'|trans, 'withheld') }}
                                {% endif %}
                            </div>
                            {% if o.collectDob and o.dateOfBirth %}
                                <div class="mt-2.5 flex items-start gap-1.5 text-[11px] leading-snug text-[#245a46] dark:text-[#9cc4ae]">
                                    <twig:ux:icon name="lucide:cake" class="mt-0.5 size-3.5 flex-none text-[#2f6f57]" />
                                    <span>{{ 'userAccount.dataUsage.dobNote'|trans({ name: o.childName|split(' ')|first }) }}</span>
                                </div>
                            {% endif %}
                            <div class="mt-2.5 flex items-center gap-1.5 text-[11px] text-gray-400">
                                <twig:ux:icon name="lucide:calendar" class="size-3.5 flex-none" />
                                {% if o.endDate %}{{ 'userAccount.dataUsage.offerEndsLine'|trans({ date: o.endDate|date('d.m.Y'), months: retentionMonths }) }}{% endif %}
                            </div>
                        </div>
                    {% endfor %}

                    <div class="mt-3 flex items-start gap-2 text-xs leading-relaxed text-gray-500 dark:text-gray-400">
                        <twig:ux:icon name="lucide:shield" class="mt-0.5 size-3.5 flex-none text-primary-500" />
                        <span>{{ 'userAccount.dataUsage.purpose'|trans({ host: r.host }) }}</span>
                    </div>
                </div>
            </details>
        {% endfor %}
    {% endif %}

    {# the 6-months-after-offer-end rule, restated once for the whole page #}
    <div class="mt-8 flex items-start gap-2.5 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3.5 text-[12.5px] leading-relaxed text-gray-500 dark:border-gray-700 dark:bg-gray-800/60 dark:text-gray-400">
        <twig:ux:icon name="lucide:shield" class="mt-0.5 size-4 flex-none text-gray-400" />
        <span>{{ 'userAccount.dataUsage.legal'|trans({ months: retentionMonths }) }}</span>
    </div>

</div>
