@props([
    'user',
    'storeRoute',
    'destroyRoute',
    'dismissRoute' => null,
    'redirectTo' => null,
    'formId' => 'portal-avatar-form',
    'fileInputId' => 'portal-avatar-file',
    'cameraInputId' => 'portal-avatar-camera',
    'showDismiss' => false,
    'showRemove' => true,
    'variant' => 'page',
    'submitLabel' => 'Salvar foto',
])

@php
    $avatarUrl = $user->avatarUrl();
    $hasAvatar = $user->hasAvatar();
    $isModal = $variant === 'modal';
@endphp

<div
    x-data="portalAvatarForm({
        previewUrl: @js($avatarUrl),
        hasServerAvatar: @js($hasAvatar),
        fileInputId: @js($fileInputId),
        cameraInputId: @js($cameraInputId),
    })"
>
    <form
        id="{{ $formId }}"
        method="post"
        action="{{ $storeRoute }}"
        enctype="multipart/form-data"
        class="@if($isModal) portal-avatar-form portal-avatar-form--modal @else portal-avatar-form portal-avatar-form--page @endif"
    >
        @csrf
        @if ($redirectTo)
            <input type="hidden" name="redirect_to" value="{{ $redirectTo }}">
        @endif

        @include('portal.profile.partials.avatar-crop-panel', ['isModal' => $isModal])

        <div x-show="! cropping" x-cloak>
            @include('portal.profile.partials.avatar-upload-widget', [
                'user' => $user,
                'fileInputId' => $fileInputId,
                'cameraInputId' => $cameraInputId,
                'layout' => 'stacked',
            ])
        </div>

        <div
            x-show="! cropping"
            x-cloak
            @class([
                'portal-avatar-form__actions',
                'portal-avatar-form__actions--stacked' => true,
                'portal-avatar-form__actions--modal' => $isModal,
            ])
        >
            <x-ui.button
                type="submit"
                class="portal-avatar-form__submit normal-case tracking-normal"
                x-on:click="guardSubmit($event)"
            >
                <i class="fa-solid fa-check"></i>
                {{ $submitLabel }}
            </x-ui.button>

            @if ($showRemove && $hasAvatar)
                <button
                    type="submit"
                    form="portal-avatar-remove-{{ $formId }}"
                    class="portal-avatar-form__secondary inline-flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                >
                    <i class="fa-solid fa-trash-can text-gray-400"></i>
                    Remover foto
                </button>
            @endif

            @if ($showDismiss && $dismissRoute)
                <button
                    type="submit"
                    form="portal-avatar-dismiss-{{ $formId }}"
                    class="portal-avatar-form__dismiss text-sm text-gray-600 hover:text-gray-900"
                >
                    Agora não
                </button>
            @endif
        </div>
    </form>

    @if ($showRemove && $hasAvatar)
        <form
            id="portal-avatar-remove-{{ $formId }}"
            method="post"
            action="{{ $destroyRoute }}"
            class="hidden"
        >
            @csrf
            @method('delete')
            @if ($redirectTo)
                <input type="hidden" name="redirect_to" value="{{ $redirectTo }}">
            @endif
        </form>
    @endif

    @if ($showDismiss && $dismissRoute)
        <form
            id="portal-avatar-dismiss-{{ $formId }}"
            method="post"
            action="{{ $dismissRoute }}"
            class="hidden"
        >
            @csrf
            @if ($redirectTo)
                <input type="hidden" name="redirect_to" value="{{ $redirectTo }}">
            @endif
        </form>
    @endif
</div>