@props(['applications'])

<div
    class="relative"
    x-data="{ open: false }"
    @keydown.escape.window="open = false"
    @app-switcher-close.window="open = false"
>
    <button
        type="button"
        @click="open = !open"
        class="platform-icon-btn"
        :class="{ 'platform-icon-btn--active': open }"
        aria-label="{{ __('common.apps') }}"
        aria-expanded="false"
        :aria-expanded="open"
    >
        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <circle cx="5" cy="5" r="1.75"/><circle cx="12" cy="5" r="1.75"/><circle cx="19" cy="5" r="1.75"/>
            <circle cx="5" cy="12" r="1.75"/><circle cx="12" cy="12" r="1.75"/><circle cx="19" cy="12" r="1.75"/>
            <circle cx="5" cy="19" r="1.75"/><circle cx="12" cy="19" r="1.75"/><circle cx="19" cy="19" r="1.75"/>
        </svg>
    </button>

    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 translate-y-2 sm:translate-y-1 sm:scale-95"
        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave-end="opacity-0 translate-y-2 sm:translate-y-1 sm:scale-95"
        @click.outside="open = false"
        class="platform-dropdown platform-dropdown--apps fixed inset-x-0 bottom-0 z-50 flex max-h-[85vh] flex-col rounded-t-[28px] p-[18px] sm:absolute sm:inset-auto sm:right-0 sm:top-full sm:mt-3 sm:max-h-[620px] sm:w-[380px] sm:rounded-[28px]"
        style="display: none;"
    >
        <div class="mb-3 flex items-center justify-between gap-3 px-0.5">
            <h2 class="text-[15px] font-medium">{{ __('common.favorites') }}</h2>
            <button
                type="button"
                class="platform-icon-btn h-9 w-9"
                aria-label="{{ __('common.edit') }}"
            >
                <svg class="h-[18px] w-[18px]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                </svg>
            </button>
        </div>

        <div class="-mx-1 flex-1 overflow-y-auto overscroll-contain">
            <div class="grid grid-cols-3 gap-1">
                @foreach ($applications as $application)
                    @php
                        $launchUrl = $application->portalLaunchUrl();
                    @endphp
                    @if ($launchUrl)
                        <a
                            href="{{ $launchUrl }}"
                            class="platform-app-grid-item"
                            target="_blank"
                            rel="noopener noreferrer"
                            @click="open = false"
                        >
                            <x-platform.app-icon :icon="$application->icon" :color="$application->color" size="grid" />
                            <span class="line-clamp-2 text-[12px] font-medium leading-4">
                                {{ $application->display_name }}
                            </span>
                            <x-platform.application-access-badge :application="$application" />
                        </a>
                    @else
                        <div
                            class="platform-app-grid-item platform-app-grid-item--static"
                            aria-disabled="true"
                        >
                            <x-platform.app-icon :icon="$application->icon" :color="$application->color" size="grid" />
                            <span class="line-clamp-2 text-[12px] font-medium leading-4">
                                {{ $application->display_name }}
                            </span>
                            <x-platform.application-access-badge :application="$application" />
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>

    <div
        x-show="open"
        x-transition.opacity
        @click="open = false"
        class="fixed inset-0 z-40 sm:hidden"
        style="display: none; background: var(--platform-overlay);"
        aria-hidden="true"
    ></div>
</div>