@props([
    'isModal' => false,
])

<div
    x-show="cropping"
    x-cloak
    class="portal-avatar-crop"
    role="region"
    aria-label="Recortar foto de perfil"
>
    <p class="mb-2 text-center text-sm text-gray-600">
        Ajuste o enquadramento (quadrado). Depois aplique o recorte.
    </p>

    <div class="portal-avatar-crop__stage">
        <img x-ref="cropImage" :src="cropImageSrc" alt="" />
    </div>

    <div @class([
        'portal-avatar-crop__actions',
        'portal-avatar-crop__actions--modal' => $isModal,
    ])>
        <button
            type="button"
            class="portal-avatar-crop__btn portal-avatar-crop__btn--primary"
            x-on:click="applyCrop()"
        >
            <i class="fa-solid fa-crop"></i>
            Aplicar recorte
        </button>
        <button
            type="button"
            class="portal-avatar-crop__btn portal-avatar-crop__btn--ghost"
            x-on:click="cancelCrop()"
        >
            Cancelar
        </button>
    </div>
</div>