@extends('tema.plantilla')

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

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

{{-- ! Estilos --}}
<link rel="stylesheet" href="{{ asset('vendor/daite/coopdigital/src/public/css/autenticacion/plantilla.css') }}">

<style>

  #fondo {
    background: url(https://www.daite.com.do/archivos/imagenes/{{ Str::slug(config('app.name'), '') }}/fondo.png), linear-gradient(90deg, var(--bs-primary), var(--bs-primary-dark));
    background-size: cover
  }

</style>

@endsection

{{-- {} Contenido --}}
@section('cuerpo')
<main class="d-flex">

  <section class="d-grid col-12 col-lg-5 gap-4 align-self-center justify-content-center">

    <header class="d-grid gap-2 justify-items-center">

      @if (View::hasSection('encabezado'))
        @yield('encabezado')
      @else

        <img class="w-100" src="https://www.daite.com.do/archivos/imagenes/{{ Str::slug(config('app.name'), '') }}/logotipo.png" alt="{{ config('app.name') }}">

        <h1 class="fs-5">@yield('titulo')</h1>

      @endif

    </header>

    @yield('contenido')

    <footer class="d-flex flex-column gap-2 flex-sm-row justify-content-sm-between">
      @yield('pie')
    </footer>

  </section>

  <section class="d-none d-lg-block col-lg-7" id="fondo"></section>

</main>
@endsection

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

{{-- ! --}}
<script type="module" src="{{ asset('vendor/daite/coopdigital/src/public/js/autenticacion/plantilla.js') }}"></script>

@endsection