@extends('tema.plantilla')

{{-- {} Título --}}
@section('titulo', 'Inicio de sesión')

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

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

@endsection

{{-- {} Contenido --}}
@section('cuerpo')
<main class="d-grid py-5 justify-content-center gap-5 bg-white rounded">

  <header class="d-grid gap-1">
    <img src="{{ asset('archivos/imagenes/logotipo/daite.png') }}" alt="{{ config('app.name') }}"/>
    <h1 class="fs-4">Inicio de sesión</h1>
  </header>

  <section class="d-flex justify-content-center">

    <form method="POST" action="{{ route('autenticacion.iniciar') }}" class="form w-100" autocomplete="off">
      <fieldset class="d-grid gap-3">

        <div class="alert alert-danger text-center text-break" role="alert"></div>

        @csrf

        @component('aplicacion.elementos.campo.etiqueta', [
          'id' => 'usuario',
          'titulo' => 'Usuario'
        ])
        @endcomponent

        @component('aplicacion.elementos.campo.etiqueta', [
          'tipo' => 'password',
          'id' => 'contrasena',
          'titulo' => 'Contraseña'
        ])
        @endcomponent

        @component('aplicacion.elementos.campo.etiqueta', [
          'tipo' => 'checkbox',
          'id' => 'mantener',
          'titulo' => 'Mantener sesión iniciada'
        ])
        @endcomponent

        @component('aplicacion.elementos.boton', [
          'tipo' => 'submit',
          'clases' => 'btn btn-primary'
        ])
          Iniciar sesión
        @endcomponent

      </fieldset>
    </form>

  </section>

  @include('componentes.pie')

</main>
@endsection

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

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

@endsection