@extends('layouts.member')
@section('title', 'Two-factor authentication')
@section('content')
<div class="mx-auto max-w-xl space-y-6">
    <h1 class="text-3xl">Two-factor authentication</h1>
    @if($mandatory && !$enabled)
        <p class="rounded-md border-2 border-flag bg-flag-soft px-4 py-3 text-sm font-semibold text-flag">Advertiser accounts must have two-factor authentication on.</p>
    @endif

    @if($recoveryCodes)
        <section class="card border-sign" aria-labelledby="rc">
            <h2 id="rc" class="text-xl">Save your recovery codes</h2>
            <p class="hint">Each code works once if you lose your phone. They are shown only now.</p>
            <ul class="mt-3 grid grid-cols-2 gap-2 font-mono text-base">@foreach($recoveryCodes as $c)<li class="rounded bg-asphalt-100 px-2 py-1">{{ $c }}</li>@endforeach</ul>
        </section>
    @endif

    @if($enabled)
        <section class="card space-y-3">
            <p class="font-semibold">Two-factor authentication is on. {{ $codesRemaining }} recovery code(s) left.</p>
            <form method="post" action="{{ route('two-factor.regenerate') }}" class="space-y-3" data-ajax data-reload novalidate>
                @csrf <x-form-error/>
                <x-password-field name="password" label="Password to get new recovery codes"/>
                <button class="btn-quiet" type="submit">Get new recovery codes</button>
            </form>
            @unless($mandatory)
            <form method="post" action="{{ route('two-factor.disable') }}" class="space-y-3 border-t-2 border-asphalt-100 pt-4" data-ajax data-reload novalidate>
                @csrf <x-form-error/>
                <x-password-field name="password" label="Password to turn it off"/>
                <button class="btn-danger" type="submit">Turn off two-factor</button>
            </form>
            @endunless
        </section>
    @elseif($secret)
        <section class="card space-y-4">
            <p>Scan this code with an authenticator app (Google Authenticator, Authy, Microsoft Authenticator), then enter the 6-digit code it shows.</p>
            <div class="mx-auto h-48 w-48 [&>svg]:h-full [&>svg]:w-full" role="img" aria-label="QR code for your authenticator app">{!! $qrSvg !!}</div>
            <p class="text-sm">Can't scan? Enter this key: <code class="rounded bg-asphalt-100 px-1 font-mono">{{ $secret }}</code></p>
            <form method="post" action="{{ route('two-factor.confirm') }}" class="space-y-3" data-ajax data-reload novalidate>
                @csrf <x-form-error/>
                <x-field name="code" label="6-digit code" required inputmode="numeric" autocomplete="one-time-code" maxlength="12"/>
                <button class="btn-primary" type="submit">Turn on</button>
            </form>
        </section>
    @else
        <section class="card">
            <p>Two-factor authentication adds a code from your phone to every sign-in.</p>
            <form method="post" action="{{ route('two-factor.start') }}" class="mt-4" data-ajax data-reload>@csrf<button class="btn-primary" type="submit">Set up</button></form>
        </section>
    @endif
</div>
@endsection