@extends('layouts.app')

@section('title', __('two-factor.security.2fa.lockout.title'))

@section('content')

<div class="row py-3">
    <div class="col-md-8 col-lg-6 mx-auto">

        <div class="alert alert-danger" role="alert">
            <h1 class="h4 alert-heading">{{ __('two-factor.security.2fa.lockout.title') }}</h1>
            <p class="mb-0">
                {{ __('two-factor.security.2fa.lockout.body', [
                    'duration' => $durationLabel,
                    'support_email' => $supportEmail,
                ]) }}
            </p>
        </div>

        <div class="card">
            <div class="card-body">
                <p class="text-muted">
                    {{ __('two-factor.security.2fa.lockout.no_retry_notice') }}
                </p>
                <div class="d-flex flex-wrap gap-2">
                    <a href="mailto:{{ $supportEmail }}" class="btn btn-primary">
                        {{ __('two-factor.security.2fa.lockout.support_cta') }}
                    </a>
                    <form action="{{ route('logout', ['partnerSlug' => $partner->slug]) }}" method="POST" class="m-0">
                        @csrf
                        <button type="submit" class="btn btn-outline-secondary">{{ __('two-factor.security.2fa.lockout.logout_cta') }}</button>
                    </form>
                </div>
            </div>
            <div class="card-footer text-center small text-muted">
                <span id="countdown"
                      data-locked-until="{{ $lockout->locked_until->toIso8601String() }}"
                      data-countdown-template="@json(__('two-factor.security.2fa.lockout.countdown_template'))"
                      aria-label="{{ __('two-factor.security.2fa.lockout.data_attr_label') }}"
                      aria-live="off"></span>
            </div>
        </div>

    </div>
</div>

@push('scripts_after')
<script>
(function() {
    var el = document.getElementById('countdown');
    if (!el) return;
    var lockedUntil = new Date(el.dataset.lockedUntil).getTime();
    var tpl = el.dataset.countdownTemplate;
    function pad(n) { return n < 10 ? '0' + n : '' + n; }
    function update() {
        var diff = lockedUntil - Date.now();
        if (diff <= 0) { el.textContent = ''; return; }
        var h = Math.floor(diff / 3600000);
        var m = Math.floor((diff % 3600000) / 60000);
        var s = Math.floor((diff % 60000) / 1000);
        el.textContent = tpl.replace(':h', h).replace(':m', pad(m)).replace(':s', pad(s));
    }
    update();
    setInterval(update, 1000);
})();
</script>
@endpush

@endsection