@extends('layouts.app')

@section('content')

<div class="login-box">

    <div class="login-snip">

        {{-- ENCABEZADO --}}
        <div class="login-header">

            <img
                src="{{ asset('img/logo-institucional.png') }}"
                alt="Logo institucional"
                class="login-logo"
            >

            <h1 class="login-title">
                Tarjetas de Identificación
            </h1>

            <p class="login-subtitle">
                Entidad Descentralizada Terminal Metropolitana de El Alto
            </p>

        </div>


        {{-- FORMULARIO --}}
        <div class="login-space">

            <form method="POST" action="{{ route('login') }}">

                @csrf

                <div class="login">

                    <div class="login-section-title">
                        Iniciar sesión
                    </div>


                    {{-- MENSAJE DE ERROR --}}
                    @if ($errors->any())

                        <div class="login-error">
                            {{ $errors->first() }}
                        </div>

                    @endif


                    {{-- USUARIO --}}
                    <div class="group">

                        <label
                            for="email"
                            class="label"
                        >
                            Usuario
                        </label>

                        <input
                            id="email"
                            type="email"
                            class="input @error('email') is-invalid @enderror"
                            name="email"
                            value="{{ old('email') }}"
                            placeholder="Ingrese su usuario"
                            required
                            autocomplete="email"
                            autofocus
                        >

                    </div>


                    {{-- CONTRASEÑA --}}
                    <div class="group">

                        <label
                            for="password"
                            class="label"
                        >
                            Contraseña
                        </label>

                        <input
                            id="password"
                            type="password"
                            class="input @error('password') is-invalid @enderror"
                            name="password"
                            placeholder="Ingrese su contraseña"
                            required
                            autocomplete="current-password"
                        >

                    </div>


                    {{-- RECORDAR --}}
                    <div class="group">

                        <input
                            id="check"
                            type="checkbox"
                            class="check"
                            name="remember"
                        >

                        <label for="check">

                            <span class="icon"></span>

                            Recordar mi cuenta

                        </label>

                    </div>


                    {{-- INGRESAR --}}
                    <div class="group">

                        <input
                            type="submit"
                            class="button"
                            value="INGRESAR"
                        >

                    </div>


                </div>

            </form>

        </div>


        {{-- PIE --}}
        <div class="login-footer">

            <strong>
                S.T.I.P.
            </strong>

            <br>

            EDTMEA

        </div>

    </div>

</div>

@endsection