@extends('layouts.inicio')

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

@section('body')
<div class="">
    <div class="row justify-content-center align-items-center vh-100 ">
        <div class="col-md-12 d-flex justify-content-center">
            <div class="login-content">

            <div class="logo mb-4">
                             <img src="{{ asset('assets/images/logo_stp_mini.png') }}" alt="Logo STP">
                        </div>

                <div class="titulo mb-3">Validación de Identidad</div>
                
                @if($errors->any())
                    <div class="col-md-12">
                        <div class="alert alert-danger">
                          <strong>{{$errors->first()}}</strong>
                        </div>
                    </div>
                @endif
  
                <div class="">
                    <form class="form-horizontal" method="POST" action="{{ route('2fa') }}">
                        {{ csrf_field() }}
  
                        <div class="form-group">
                            <p class="text-start fs-5">Ingrese la  <strong>OTP</strong> generada en su aplicación de autenticación. <br> Asegúrese de enviar el actual porque se actualiza cada 30 segundos.</p>
                            <!-- <label for="one_time_password" class="fs-5 control-label mb-3">Contraseña de un solo uso:</label> -->
  
                            <div class="">
                                <input id="one_time_password" type="number" class="" name="one_time_password" required autofocus placeholder="Contraseña de un solo uso:">
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <div class="">
                                <button type="submit"
                                    class="button-input w-100 fs-5">
                                     Iniciar sesión
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection