{% extends 'backoffice/login.html.twig' %}
{% block page_title %}LOGIN{% endblock %}
{% block main %}
    <a href="index.html" class="app-brand auth-cover-brand">
        <span class="app-brand-logo demo">
          <svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
                    fill="#7367F0" />
            <path
                    opacity="0.06"
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z"
                    fill="#161616" />
            <path
                    opacity="0.06"
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z"
                    fill="#161616" />
            <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
                    fill="#7367F0" />
          </svg>
        </span>
        <span class="app-brand-text demo text-heading fw-bold">HEXAGONALGURU</span>
    </a>
    <div class="authentication-inner row m-0">
        <div class="d-none d-lg-flex col-lg-8 p-0">
            <div class="auth-cover-bg auth-cover-bg-color d-flex justify-content-center align-items-center">
                <img
                        src="/backoffice/assets/img/illustrations/auth-login-illustration-light.png"
                        alt="auth-login-cover"
                        class="my-5 auth-illustration"
                        data-app-light-img="illustrations/auth-login-illustration-light.png"
                        data-app-dark-img="illustrations/auth-login-illustration-dark.png" />

                <img
                        src="/backoffice/assets/img/illustrations/bg-shape-image-light.png"
                        alt="auth-login-cover"
                        class="platform-bg"
                        data-app-light-img="illustrations/bg-shape-image-light.png"
                        data-app-dark-img="illustrations/bg-shape-image-dark.png" />
            </div>
        </div>
        <div class="d-flex col-12 col-lg-4 align-items-center authentication-bg p-sm-12 p-6">
            <div class="w-px-400 mx-auto mt-12 pt-5">
                <h4 class="mb-1">Bienvenido a HexagonalGuru 👋</h4>
                <form id="formAuthentication" class="mb-6" action="/admin/login" method="POST">
                    <div class="mb-6">
                        <label for="email" class="form-label">Usuario</label>
                        <input
                                type="text"
                                class="form-control"
                                id="username"
                                name="username"
                                placeholder="Indique su usuario"
                                autofocus />
                    </div>
                    <div class="mb-6 form-password-toggle">
                        <label class="form-label" for="password">Password</label>
                        <div class="input-group input-group-merge">
                            <input
                                    type="password"
                                    id="password"
                                    class="form-control"
                                    name="password"
                                    placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                    aria-describedby="password" />
                            <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
                        </div>
                    </div>
                    <div class="my-8">
                        <div class="d-flex justify-content-between">
                            <div class="form-check mb-0 ms-2">
                                <input class="form-check-input" type="checkbox" id="remember-me" />
                                <label class="form-check-label" for="remember-me"> Recordarme </label>
                            </div>
                            <a href="auth-forgot-password-cover.html">
                                <p class="mb-0">¿ Olvidó la clave ?</p>
                            </a>
                        </div>
                    </div>
                    <button class="btn btn-primary d-grid w-100">Entrar</button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}
{% block js_custom %}
<script src="/backoffice/assets/vendor/libs/@form-validation/popular.js"></script>
<script src="/backoffice/assets/vendor/libs/@form-validation/bootstrap5.js"></script>
<script src="/backoffice/assets/vendor/libs/@form-validation/auto-focus.js"></script>
<script src="/backoffice/assets/js/main.js"></script>
<script src="/backoffice/assets/js/login/login.js"></script>
{% endblock %}
{% block css_custom %}
    <link rel="stylesheet" href="/backoffice/assets/vendor/css/pages/login.css" />
{% endblock %}