@extends('tema.plantilla')

{{-- {} Título --}}
@section('tituloPagina', 'Autenticación')

{{-- {} Ajustes, propiedades y estilos --}}
@section('cabezaPagina')

{{-- ! Estilos --}}
<link rel="stylesheet" href="{{ asset('archivos/css/autenticacion.css') }}">

@endsection

{{-- {} Contenido --}}
@section('contenidoCuerpoPagina')

<div id="auth">
  <div class="row h-100">

    <div class="col-12 col-lg-5">
      <div id="auth-left">

        <div class="auth-logo">
          <img src="{{ asset('archivos/imagenes/icono y logotipo/logotipo.png') }}" alt="Logo"/>
        </div>

        <h1 class="auth-title title">
          Autenticación
        </h1>

        <p class="auth-subtitle subtitle">
          Inicio de sesión
        </p>

        <div class="row">
          <form method="POST" class="form form-horizontal">

            @csrf

            <div class="form-body">
              <div class="row">
    
                <div class="col-12 col-md-12 col-lg-12">
                  <div class="row">
                    <div class="col-auto">
                      <div class="form-group has-icon-left">
                        <div class="position-relative">
    
                          <div class="form-control-icon">
                            <i class="fa-solid fa-user"></i>
                          </div>
    
                          <input
                            type="text"
                            class="form-control"
                            placeholder="Usuario"
                            id="usuario"
                            name="usuario"
                          />
    
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
          
                <div class="col-12 col-md-12 col-lg-12">
                  <div class="row">
                    <div class="col-auto">
                      <div class="form-group has-icon-left">
                        <div class="position-relative">
    
                          <div class="form-control-icon">
                            <i class="fa-solid fa-key"></i>
                          </div>
    
                          <input
                            type="password"
                            class="form-control"
                            placeholder="Contraseña"
                            id="contrasena"
                            name="contrasena"
                          />
    
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="form-group col-12 col-md-12 col-lg-12">
                  <div class="row">
                    <div class="col-auto">
                      <div class="form-check">
                        <div class="checkbox">
    
                          <input
                            type="checkbox"
                            class="form-check-input"
                            id="mantenerAutenticacionIniciada"
                            name="mantenerAutenticacionIniciada"
                          />
    
                          <label
                            class="mx-2"
                            for="mantenerAutenticacionIniciada">
                              Mantener autenticación iniciada
                          </label>
    
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="form-group col-12 col-md-12 col-lg-12">
                  <div class="row">
                    <div class="col-auto">

                      <button type="submit" class="btn btn-primary">
                        Iniciar sesión
                      </button>

                    </div>
                  </div>
                </div>

              </div>
            </div>
          </form>

        </div>

      </div>
    </div>

    <div class="col-lg-7 d-none d-lg-block">
      <div id="auth-right"></div>
    </div>

  </div>
</div>

@endsection

{{-- {} Programación de la página --}}
@section('programacionCuerpoPagina')

{{-- ! --}}
<script type="module" src="{{ asset('archivos/js/autenticacion.js') }}"></script>

@endsection