{% extends "@FerienpassAdmin/layout/list.html.twig" %}
{% trans_default_domain 'admin' %}

{% block list %}

    {# Name template — just the name plus the disabled / blocked-email status
       dots. No role badges here: the role-icon glyph on the left signals the
       primary role, and the "Rollen" column carries the detailed permission
       breakdown. #}
    {% set name_template = '<span class="inline-flex items-center space-x-1.5"><span>{{ item.name }}</span>{% if item.disabled %}<span class="flex-none rounded-full bg-red-500/20 p-1" title="deaktiviert"><span class="block size-1.5 rounded-full bg-red-500"></span></span>{% endif %}{% if item.blockedEmail %}<span class="flex-none rounded-full bg-orange-500/20 p-1" title="von Emails abgemeldet"><span class="block size-1.5 rounded-full bg-orange-500"></span></span>{% endif %}</span>' %}

    {# Login-method glyphs (password = password set, keyhole = ≥1 passkey
       enrolled, envelope-simple-open = neither, i.e. sign-in only via
       magic link), via Symfony UX Phosphor icons.
       The passkey check reads `usersWithPasskey` (flat list of UUIDs threaded
       through `config` from the controller — a single distinct query, no
       N+1). In the table view this is rendered inline next to the name (see
       `name_column` below); in the card / list view it's rendered as its own
       info chip alongside e-mail and hosts/participants. #}
    {% set login_methods_template = '{% if item.password is not null %}<span class="flex-none text-gray-400 dark:text-gray-500" title="Passwort gesetzt">{{ ux_icon("ph:password", { class: "inline-block size-3.5" }) }}</span>{% endif %}{% if item.uuid.toRfc4122 in usersWithPasskey|default([]) %}<span class="flex-none text-gray-400 dark:text-gray-500" title="Passkey hinterlegt">{{ ux_icon("ph:keyhole", { class: "inline-block size-3.5" }) }}</span>{% endif %}{% if item.password is null and item.uuid.toRfc4122 not in usersWithPasskey|default([]) %}<span class="flex-none text-gray-400 dark:text-gray-500" title="Kein Passwort und kein Passkey – Anmeldung nur per Anmeldelink">{{ ux_icon("ph:envelope-simple-open", { class: "inline-block size-3.5" }) }}</span>{% endif %}' %}

    {# Name column. The leading user-circle icons (admins red, hosts blue,
       members green) signal which hat(s) the account wears at a glance.
       Shown on every view — even single-role lists — because a member who
       also happens to be a host visually stands out. Login-method glyphs sit
       between the name and the status dots, inside the link. #}
    {% set name_column = '<a href="{{ path("admin_accounts_show", { uuid: item.uuid.toBase58 }) }}" class="inline-flex items-center gap-1.5 hover:bg-gray-200/75 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1.5 py-1 -mx-1.5 -my-1 transition-colors font-medium text-gray-900 dark:text-gray-100" data-turbo-frame="slideover">{% include "@FerienpassAdmin/page/accounts/_role_icons.html.twig" with { item: item, size: "size-4" } %}<span class="inline-flex items-center gap-1.5">' ~ name_template ~ login_methods_template ~ '</span></a>' %}

    {# Single-role views keep the focused column set the pre-refactor view
       had — only the columns that make sense for that one role. The mixed
       (multi / "all types") view gets a generic column set with a leading
       "Typ" badge column so the list stays scannable. #}
    {% if role == 'ROLE_HOST' %}
        {% set columns = {
            name: name_column,
            email: '{{ item.email }}',
            hosts: '{{ item.hosts|map(u => "#{u.name}")|join(", ") }}'
        } %}
    {% elseif role == 'ROLE_MEMBER' %}
        {% set columns = {
            name: name_column,
            email: '{{ item.email }}',
            participants: '{{ item.participants|map(u => "#{u.name}")|join(", ") }}'
        } %}
    {% elseif role == 'ROLE_ADMIN' %}
        {% set columns = {
            name: name_column,
            email: '{{ item.email }}',
            roles: '
                {% if "ROLE_SUPER_ADMIN" in item.roles %}
                    {{ component("Admin:Badge", { color: "red", pill: true, content: "accounts.td.role.ROLE_SUPER_ADMIN"|trans([], "admin") }) }}
                {% else %}
                {% for role in item.roles|filter((role) => role in ["ROLE_CMS_ADMIN", "ROLE_PAYMENTS_ADMIN", "ROLE_PARTICIPANTS_ADMIN"]) %}
                    {{ component("Admin:Badge", { color: "sky", pill: true, content: ("accounts.td.role."~role)|trans([], "admin") }) }}
                {% endfor %}
                {% endif %}
            '
        } %}
    {% else %}
        {# Mixed view (no role or several roles): role-specific columns are
           non-empty only for rows that match that role. The user-circle icon
           inside the name column signals which role the account belongs to —
           no dedicated "Typ" or "Rollen" column needed in the mixed list. #}
        {% set columns = {
            name: name_column,
            email: '{{ item.email }}',
            hosts: '{% if "ROLE_HOST" in item.roles %}{{ item.hosts|map(u => "#{u.name}")|join(", ") }}{% endif %}',
            participants: '{% if "ROLE_MEMBER" in item.roles %}{{ item.participants|map(u => "#{u.name}")|join(", ") }}{% endif %}'
        } %}
    {% endif %}

{% component 'Admin:SearchableQueryableList' with {
        qb: qb,
        filterType: filterType,
        routeName: app.current_route,
        routeParameters: app.current_route_parameters|merge(app.request.query.all),
        searchable: searchable|default([]),
        headline: '',
        createUrl: null,
        viewKey: 'admin_accounts',
        viewPathPrefix: '/admin/accounts',
        exports: exports|default([]),
        config: {
            squeezedColumns: [
                'hosts',
                'participants',
                'roles',
            ],
            title: name_template,
            info: [
                "{{ item.email }}",
                role == "ROLE_HOST" ? '{{ item.hosts|map(u => "#{u.name}")|join(", ") }}' : (role == "ROLE_MEMBER" ? '{{ item.participants|map(u => "#{u.name}")|join(", ") }}' : ""),
                login_methods_template,
            ],
            columns: columns,
            usersWithPasskey: usersWithPasskey|default([]),
        }
    } %}
{% block page_header %}
            <div class="flex items-center justify-between gap-4 flex-wrap py-5 border-b border-gray-200 dark:border-gray-800 mb-2">
                <twig:Admin:AccountTypeSwitcher
                        :accountTypes="accountTypes|default([])"
                        :selected="selectedRoles|default([])"
                        baseLabel="{{ 'accounts.title'|trans({}, 'admin') }}"
                        unscopedRoute="admin_accounts_index"
                        scopedRoute="admin_accounts_index" />

{# data-live-ignore so morphdom keeps the dropdown intact across Live
                   re-renders — `accountTypes` comes from the controller and
                   would be missing during a re-render. #}
                {% if accountTypes|default([])|length > 0 %}
                    <div data-live-ignore>
                    <el-dropdown {{ stimulus_controller('ferienpass/admin-dropdown') }} class="inline-block">
                        <button type="button"
                                class="inline-flex shadow-sm rounded-md bg-primary-600 text-white dark:bg-primary-500 hover:bg-primary-700 dark:hover:bg-primary-400 focus-visible:outline-2 focus-visible:outline-primary-400 cursor-pointer">
                            <span class="inline-flex items-center gap-x-1.5 px-3 py-2 text-sm font-semibold">
                                <twig:ux:icon name="ph:plus" aria-hidden="true" class="-ml-0.5 size-5"/>
                                <span>{{ 'accounts.create.cta'|trans({}, 'admin') }}</span>
                            </span>
                            <span class="inline-flex items-center pr-2 pl-1 py-2">
                                <twig:ux:icon name="ph:caret-down" aria-hidden="true" class="size-5 text-white"/>
                            </span>
                        </button>
                        <el-menu anchor="bottom end" popover
                                 class="w-72 origin-top-right divide-y divide-gray-200 overflow-hidden rounded-md bg-white shadow-lg outline-1 outline-black/5 [--anchor-gap:--spacing(2)] dark:divide-white/10 dark:bg-gray-900 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
                            {% for type in accountTypes %}
                                {% set active = type.role == role|default(null) %}
                                <a href="{{ path('admin_accounts_create', { role: type.alias }) }}"
                                   class="group/option block p-4 text-sm text-gray-900 select-none hover:bg-primary-600 hover:text-white focus:bg-primary-600 focus:text-white focus:outline-hidden dark:text-white dark:hover:bg-primary-500 dark:focus:bg-primary-500 {{ active ? 'bg-yellow-50 dark:bg-yellow-950' : '' }}">
                                    <p class="font-medium">{{ 'accounts.create.role'|trans({ name: type.name }, 'admin') }}</p>
                                    <p class="mt-2 text-gray-500 group-hover/option:text-primary-200 group-focus/option:text-primary-200 dark:text-gray-400 dark:group-hover/option:text-primary-100 dark:group-focus/option:text-primary-100">
                                        {{ ('accounts.create.role.help.' ~ type.alias)|trans({}, 'admin') }}
                                    </p>
                                </a>
                            {% endfor %}
                        </el-menu>
                    </el-dropdown>
                    </div>
                {% endif %}
            </div>
        {% endblock %}
    {% endcomponent %}
{% endblock %}
