@extends('layouts.app')

@section('title_full', __('Authentication').' - '.$user->getFullName())

@section('body_attrs')@parent data-user_id="{{ $user->id }}"@endsection

@section('sidebar')
    @include('partials/sidebar_menu_toggle')
    @include('users/sidebar_menu')
@endsection

@section('content')
    <div class="section-heading">
        {{ __('Authentication') }} › {{ __('Two-Factor Authentication') }}
    </div>

    @include('partials/flash_messages')

    <div class="container form-container">
        <div class="row">
            <div class="col-xs-12">
                <form action="" method="POST" class="form-inline margin-top">
                    {{ csrf_field() }}

                    1) {{ __('Install one of the following authenticator apps on your mobile device:') }}
                    <ul>
                        <li>Google Authenticator (<a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2" target="_blank">Android</a> / <a href="https://apps.apple.com/us/app/google-authenticator/id388497605" target="_blank">iOS</a>)</li>
                        <li>Twilio Authy (<a href="https://play.google.com/store/apps/details?id=com.authy.authy" target="_blank">Android</a> / <a href="https://apps.apple.com/us/app/authy/id494168017" target="_blank">iOS</a>)</li>
                    </ul>
                    
                    2) {{ __('Use your authenticator app to scan the QR-code below.') }}<br/>

                    <img src="data:image/svg+xml;base64,{{ $qr_code }}" width="200" height="200"/><br/>
                    &nbsp; <code><small>{{ $qr_string }}</small></code>
                    <br/><br/>

                    3) {{ __('Enter the verification code generated by your authenticator app.') }}
                    <br/>
                
                    <div class="margin-top-10 @if (!empty($errors) && count($errors)) has-error @endif">
                        <input type="text" name="tfa_confirm_code" 
                               class="form-control input-lg text-center"
                               minlength="{{ config('laraguard.totp.digits') }}" maxlength="{{ config('laraguard.totp.digits') }}" placeholder="123456" required autofocus />

                        @include('partials/field_error', ['field'=>'tfa_confirm_code'])
                    </div>

                    <div class="margin-top margin-bottom">
                        <button type="submit" class="btn btn-primary">
                            {{ __('Continue') }}
                        </button>

                        <a href="{{ route('twofactorauth.user_auth_settings', ['id'=>$user->id]) }}" class="btn btn-link">{{ __('Cancel') }}</a>
                    </div>
                </form>
            
            </div>
        </div>
    </div>

@endsection