@extends('layouts.app')

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

@section('content')

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

        <div class="card">
            <div class="card-header">
                <h1 class="h4 mb-0">{{ __('two-factor.security.2fa.challenge.title') }}</h1>
            </div>
            <div class="card-body">
                <p class="text-muted">{{ __('two-factor.security.2fa.challenge.intro') }}</p>

                <form action="{{ route('2fa.challenge.verify', ['partnerSlug' => $partner->slug]) }}" method="POST">
                    @csrf

                    <div class="mb-3">
                        <label for="code" class="form-label">{{ __('two-factor.security.2fa.challenge.label') }}</label>
                        <input type="text" id="code" name="code" maxlength="6" inputmode="numeric"
                               autocomplete="one-time-code" pattern="[0-9]{6}" autofocus required
                               value="{{ old('code') }}"
                               class="form-control @error('code') is-invalid @enderror"
                               aria-invalid="{{ $errors->has('code') ? 'true' : 'false' }}"
                               aria-describedby="code-help code-error">
                        <div id="code-help" class="form-text">
                            {{ __('two-factor.security.2fa.challenge.help') }}
                        </div>
                        <div id="code-error" class="invalid-feedback" role="alert">@error('code'){{ $message }}@enderror</div>
                    </div>

                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" name="trust_device" value="1" id="trust_device">
                        <label class="form-check-label" for="trust_device">
                            <strong>{{ __('two-factor.security.2fa.trusted_device.checkbox') }}</strong>
                            <span class="d-block small text-muted">{{ __('two-factor.security.2fa.trusted_device.warning') }}</span>
                        </label>
                    </div>

                    <button type="submit" class="btn btn-primary">
                        {{ __('two-factor.security.2fa.challenge.cta') }}
                    </button>
                </form>
            </div>
            <div class="card-footer small">
                <a href="mailto:{{ config('two-factor.security_ops_email') ?? config('mail.from.address') }}">
                    {{ __('two-factor.security.2fa.challenge.lost_device') }}
                </a>
            </div>
        </div>

    </div>
</div>

@endsection