@extends('layouts.inicio')

@section('titulo', 'Login - STP')

@section('body')
<style>
    a {
        text-decoration: none;
    }
    a span {
        color: rgb(0 117 255);
    }
</style>
<div class="vh-100 d-flex justify-content-center">
    <div class="row">
        <div class="col-md-12 mt-4 d-flex justify-content-center align-items-center">
            <div class="login-content mb-4">
                <h4 class=" text-center titulo mt-4">Configurar el autenticador de Google</h4>

                <div class="" style="text-align: center;">
                    <p>Configure su autenticación de dos factores escaneando el código de barras a continuación. <br> Alternativamente, puede utilizar el código <strong>{{ $secret }}</strong></p>
                    <div>
                        {!! $QR_Image !!}
                    </div>
                    <p>Debes configurar tu aplicación Google Authenticator antes de continuar. <br>  De lo contrario no podrás iniciar sesión
                        Utilizando una aplicación de autenticación como <br>
                        <a href="https://support.google.com/accounts/answer/1066447?hl=en" target="_blank">
                            <span class="">Google Authenticator</span>
                        </a>, 
                        <a href="https://www.microsoft.com/en-us/account/authenticator" target="_blank">
                            <span class="">Microsoft Authenticator</span>
                        </a>,
                        <a href="https://authy.com/download/" target="_blank">
                            <span class="">Authy</span>
                        </a> o 
                        <a href="https://support.1password.com/one-time-passwords/" target="_blank">
                            <span class="">1Password</span>
                        </a>, escanee el código QR. <br> Generará un código de 6 dígitos para que lo ingrese a continuación.
                    </p>
                    <div class="mt-4 mb-4">
                        <a href="{{ route('complete.registration') }}" class="button-input d-flex flex-grow-1 justify-content-center">
                            Completar Registro
                        </a>
                    </div>                    

                    
                </div>
            </div>
        </div>
    </div>
    <br><br><br><br>
</div>
@endsection