@extends('layouts.auth')
@section('title', 'Two-factor authentication')

@section('content')
    <h1>Two-factor authentication</h1>

    @if (session('recovery_codes'))
        <p class="lede">Save these recovery codes now. They are shown once and each works a single time.</p>
        <div style="background:var(--sunken);border:1px solid var(--line);border-radius:8px;padding:14px;
                    font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.9;margin-bottom:18px">
            @foreach (session('recovery_codes') as $code)
                <div>{{ $code }}</div>
            @endforeach
        </div>
        <a href="{{ route('app.dashboard') }}"><button class="primary" type="button">I have saved them</button></a>
    @elseif ($enabled)
        <p class="lede">Two-factor authentication is on for this account.</p>
        <form method="POST" action="{{ route('auth.two-factor.disable') }}">
            @csrf
            @method('DELETE')
            <div class="field">
                <label for="password">Confirm your password to turn it off</label>
                <input id="password" name="password" type="password" required autocomplete="current-password">
            </div>
            <button class="primary" type="submit">Turn off two-factor</button>
        </form>
    @else
        <p class="lede">Scan this with your authenticator app, then enter the code it shows.</p>

        <div style="display:grid;place-items:center;padding:14px;background:#fff;border:1px solid var(--line);
                    border-radius:8px;margin-bottom:14px">
            {!! $qrCode !!}
        </div>

        <p class="hint" style="text-align:center;margin-bottom:18px">
            Cannot scan? Enter this key manually:<br>
            <span style="font-family:'IBM Plex Mono',monospace;color:var(--ink-900)">{{ $secret }}</span>
        </p>

        <form method="POST" action="{{ route('auth.two-factor.confirm') }}">
            @csrf
            <div class="field">
                <label for="code">Code from your app</label>
                <input id="code" name="code" type="text" class="code-input" inputmode="numeric" maxlength="6" required>
            </div>
            <button class="primary" type="submit">Turn on two-factor</button>
        </form>
    @endif
@endsection