@include('admin.includes.auth-head', ['pageTitle' => 'Entrar'])

<main class="mgr">
    <div class="mgr__box">
        <div class="mgr__brand">
            <img src="/assets/img/logo-light.svg" alt="BRASCAST">
            <span class="mgr__tag">Manager</span>
        </div>

        <div class="mgr__card">
            <div class="mgr__head">
                <h1 class="mgr__title">Acesso restrito</h1>
                <p class="mgr__sub">Entre com a sua conta de administrador.</p>
            </div>

            @if (\Session::has('error'))
                <div class="mgr__alert" role="alert">
                    <i class="fa-solid fa-circle-exclamation"></i>
                    <span>{!! \Session::get('error') !!}</span>
                </div>
                @php Session::forget('error'); @endphp
            @endif

            <form class="mgr__form" name="login" action="{{ route('admin.doLogin') }}" method="POST">
                @csrf

                <label class="mgr__field">
                    <span class="mgr__label">E-mail</span>
                    <input class="mgr__input" type="email" name="email" value="{{ old('email') }}"
                           placeholder="nome@brascast.com" autocomplete="username" autofocus required>
                </label>

                <div class="mgr__field">
                    <label class="mgr__label" for="mgr-password">Senha</label>

                    <span class="mgr__secret">
                        <input class="mgr__input" type="password" id="mgr-password" name="password"
                               placeholder="Sua senha" autocomplete="current-password" required>

                        <button class="mgr__eye" type="button" data-eye aria-label="Mostrar a senha">
                            <i class="fa-regular fa-eye ico-on"></i>
                            <i class="fa-regular fa-eye-slash ico-off"></i>
                        </button>
                    </span>
                </div>

                <button class="mgr__btn" type="submit">
                    <i class="fa-solid fa-arrow-right-to-bracket"></i>
                    <span>Entrar</span>
                </button>
            </form>
        </div>

        <p class="mgr__foot">Área interna BRASCAST &middot; {{ date('Y') }}</p>
    </div>
</main>

<script>
(function () {
    'use strict';

    var botao = document.querySelector('[data-eye]');
    var campo = document.getElementById('mgr-password');

    if (! botao || ! campo) {
        return;
    }

    botao.addEventListener('click', function () {
        var mostrando = campo.type === 'text';

        campo.type = mostrando ? 'password' : 'text';

        botao.classList.toggle('is-on', ! mostrando);
        botao.setAttribute('aria-label', mostrando ? 'Mostrar a senha' : 'Ocultar a senha');

        campo.focus();
    });
}());
</script>

</body>
</html>