@extends('layouts.app', [
    'class' => 'login-page',
    'page' => env('APP_NAME'),
    'contentClass' => 'login-page',
    'section' => 'auth'
])

<div class="container">
    <div class="row justify-content-center pt-5 pb-5">
        <img src="{!! asset('assets/img/sede-logo.png') !!}" width="300" height="auto"/>
    </div>

    <div class="row justify-content-center">

        @if (session('status'))
            <div class="alert alert-success" role="alert">
                {{ session('status') }}
            </div>
        @endif

        <div class="col-md-12 centered">
            <span class="login-title">Restablecer Contraseña</span>
        </div>

        <div class="col-md-6 centered">
            <span class="login-subtitle">Introduce tu correo electrónico y te enviaremos instrucciones para restablecer tu contraseña</span>
        </div>

    </div>

    <div class="row justify-content-center mt-5">
        <div class="col-md-4">
            <span class="login-text">Correo electrónico</span>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-6 centered">
            <form method="POST" action="{{ route('portal-customers.reset-password.send') }}" style="width: 66%;">
                @csrf

                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror white" name="email" value="{{ old('email') }}" required placeholder="Correo Electrónico" autocomplete="email" autofocus>

                @error('email')
                    <span class="invalid-feedback" role="alert">
                        {{ $message }}
                    </span>
                @enderror

                <div class="row mt-3 justify-content-center centered">
                    <button type="submit" class="btn-sede btn-lg btn-block mb-3">
                        Restablecer Contraseña
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .container {
        max-width: 100% !important;
        background-color: #f1ebe1 !important;
        height: 100vh !important;
    }

    .login-title {
        font-size: 42pt;
        font-weight: 400;
        color: black;
    }

    .login-subtitle {
        font-size: 18pt;
        font-weight: 400;
        color: black;
    }

    .login-text {
        font-size: 12pt;
        font-weight: 400;
        color: black;
    }

    .centered {
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
    }

    .card-login {
        width: 100%;
    }
    .card {
        background-color: #f1ebe1 !important;
        margin-top: 50px;
    }

    .white {
        background-color: white !important;
        height: 60px !important;
    }

    .btn-sede {
        width: 50% !important;
        background-color: #adadad !important;
        color: white !important;
        font-weight: 600 !important;
        border: none !important;
    }
</style>

<script>
    document.body.style.overflow = 'hidden';
</script>