{{-- flow م۱ step 2 (and ج۱ step 3, the colleague): the six-digit code. the mobile is shown in full (+NO-PHONE-MASK):
     for an admin the password was already right; a colleague typed it a moment ago and the sentence says only «if it
     is registered». the countdowns are Alpine sugar: without the script the page still works and the server answers
     «ارسال دوباره» pressed too early with the time it will work. --}}
@extends('layouts.mz')

@section('title', $title)

@section('content')
    <h1 class="mz-title">{{ $title }}</h1>

    <div class="mz-card mz-form mz-form--narrow"
         x-data="{ left: {{ $expiresIn }}, wait: {{ $resendIn }} }"
         x-init="setInterval(() => { if (left > 0) left--; if (wait > 0) wait--; }, 1000)">
        @isset($sentLine)
            <p>{{ $sentLine }} <x-mz-phone :number="$mobile"/></p>
        @else
            <p>کد شش‌رقمی به موبایل <x-mz-phone :number="$mobile"/> پیامک شد.</p>
        @endisset
        @if (($lockedLine ?? null) !== null)
            {{-- S5 14ب: LOCKED — the lock is the state; the code's own countdown would promise a code the server refuses.
                 when the refusal itself just said it (the code error), it is not said twice --}}
            @unless ($errors->has('code'))
                <p class="mz-notice mz-notice--no" role="status">{{ $lockedLine }}</p>
            @endunless
        @else
            <p class="mz-hint" role="status">
                <span x-show="left > 0">این کد تا <span x-text="new Intl.NumberFormat('fa-IR').format(left)"></span> ثانیهٔ دیگر اعتبار دارد.</span>
                <span x-show="left <= 0" x-cloak>زمان این کد تمام شده است؛ «ارسال دوباره» را بزنید.</span>
                <noscript>این کد {{ \App\Support\Display::seconds($expiresIn) }} اعتبار دارد.</noscript>
            </p>
        @endif

        @error('code')
            <p class="mz-notice mz-notice--no" role="alert" id="mz-code-error">{{ $message }}</p>
        @enderror

        <form class="mz-form" method="post" action="{{ $verifyRoute }}">
            @csrf
            <div class="mz-field">
                <label class="mz-label" for="mz-code">کد پیامک‌شده</label>
                <input class="mz-input mz-input--ltr mz-input--code" id="mz-code" name="code" type="text" dir="ltr"
                       inputmode="numeric" autocomplete="one-time-code" required maxlength="6" autofocus
                       @error('code') aria-invalid="true" aria-describedby="mz-code-error" @enderror>
            </div>
            <div class="mz-actions">
                <button class="mz-btn" type="submit">ورود</button>
            </div>
        </form>

        <div class="mz-actions">
            <form class="mz-inline-form" method="post" action="{{ $resendRoute }}">
                @csrf
                <button class="mz-btn mz-btn--quiet" type="submit" x-bind:disabled="wait > 0">ارسال دوباره</button>
            </form>
            <span class="mz-hint" x-show="wait > 0" x-cloak>از <span x-text="new Intl.NumberFormat('fa-IR').format(wait)"></span> ثانیهٔ دیگر</span>
            <a class="mz-btn mz-btn--quiet" href="{{ $restartRoute }}">{{ $restartLabel ?? 'از اول، با نام کاربری دیگر' }}</a>
        </div>
    </div>
@endsection