{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: captcha-guard.blade.php
------------------------------------------------------
Use: The two abuse-guard modals bound to the $store.captcha
     store: an ArCaptcha challenge (the widget renders into
     #captcha-widget on open) and a temporary-block notice
     with a live countdown.
=====================================================
--}}

<div x-data="{ fmtBlock(s) { const m = Math.floor(s / 60), r = s % 60; return (m + ':' + String(r).padStart(2, '0')).replace(/[0-9]/g, d => '۰۱۲۳۴۵۶۷۸۹'[d]); } }" x-cloak>

    {{-- Challenge --}}
    <div x-show="$store.captcha.open" class="fixed inset-0 z-[80] flex items-center justify-center p-4" x-transition.opacity>
        <div class="absolute inset-0 bg-ink/50 backdrop-blur-sm" x-on:click="$store.captcha.cancel()"></div>
        <div class="relative w-full max-w-sm rounded-2xl bg-white p-6 text-center shadow-2xl" x-transition>
            <div class="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-primary-50 text-primary-600">
                <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg>
            </div>
            <h3 class="mb-1.5 text-base font-bold">{{ __('front.abuse.challenge_title') }}</h3>
            <p class="mb-5 text-[13px] leading-7 text-ink-muted">{{ __('front.abuse.challenge_desc') }}</p>

            {{-- The ArCaptcha widget is injected here when the modal opens. --}}
            <div id="captcha-widget" class="flex min-h-[78px] justify-center"></div>

            <button type="button" x-on:click="$store.captcha.cancel()" class="mt-5 text-[12.5px] font-bold text-ink-faint transition hover:text-ink">{{ __('front.abuse.cancel') }}</button>
        </div>
    </div>

    {{-- Temporary block --}}
    <div x-show="$store.captcha.blocked" class="fixed inset-0 z-[80] flex items-center justify-center p-4" x-transition.opacity>
        <div class="absolute inset-0 bg-ink/50 backdrop-blur-sm"></div>
        <div class="relative w-full max-w-sm rounded-2xl bg-white p-6 text-center shadow-2xl" x-transition>
            <div class="mx-auto mb-4 flex size-12 items-center justify-center rounded-full bg-secondary-50 text-secondary-500">
                <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
            </div>
            <h3 class="mb-1.5 text-base font-bold">{{ __('front.abuse.blocked_title') }}</h3>
            <p class="mb-3 text-[13px] leading-7 text-ink-muted" x-text="$store.captcha.blockMessage"></p>
            <div class="mb-5 text-2xl font-bold text-secondary-500" dir="ltr" x-text="fmtBlock($store.captcha.blockLeft)"></div>
            <button type="button" x-on:click="$store.captcha.closeBlocked()" class="rounded-xl bg-primary-600 px-6 py-2.5 text-[13px] font-bold text-white transition hover:bg-primary-700">{{ __('front.abuse.dismiss') }}</button>
        </div>
    </div>
</div>