{% extends 'base.html' %}
{% load static %}
{% block login_home %}
    <section class="p-4 min-vh-75">
        <div class="d-flex bg_white p-3">
            <div class="row">
                <div class="col border-end border-4 align-items-center justify-content-center p-5" style="display: flex">
                    <div class="row">
                        <div class="col text-center">
                            <h1 class="dosis-extrabold text-uppercase text-danger h1">¿Dudas?</h1>
                            <h1 class="dosis-extrabold text-uppercase text-danger h1">Contáctenos</h1>
                            <div class="d-grid text-start mt-5">
                                <span class="lato-bold fs-5 m-1">
                                    <i class="fa-solid fa-circle-user me-2"></i>hernandomosso@gmail.com
                                </span>
                                <span class="lato-bold fs-5 m-1 visually-hidden">
                                    <i class="fa-solid fa-location-dot me-2"></i>Av 15 de Julio - Bogota
                                </span>
                                <span class="lato-bold fs-5 m-1">
                                    <i class="fa-solid fa-phone-volume me-2"></i>+ 57 300 7468304
                                </span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col align-items-center justify-content-center p-5">
                    <div class="text-center">
                        <h1 class="dosis-extrabold text-uppercase text-danger h1">O mejor déjanos un</h1>
                        <h1 class="dosis-extrabold text-uppercase text-danger h1">mensaje.</h1>
                        <form method="post" class="text-start align-items-start mt-3 row">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label for="nombre" class="form-label lato-bold h5">Nombre y apellido
                                    <span class="text-danger dosis-bold">*</span>
                                </label>
                                {{ form.nombre }}
                            </div>
                            <div class="mb-3">
                                <label for="mail" class="form-label lato-bold h5">Email
                                    <span class="text-danger dosis-bold">*</span>
                                </label>
                                {{ form.mail }}
                            </div>
                            <div class="mb-3">
                                <label for="mensaje" class="form-label lato-bold h5">Mensaje
                                    <span class="text-danger dosis-bold">*</span>
                                </label>
                                {{ form.mensaje }}
                            </div>
                            <div class="mb-3">
                                <button type="submit" class="btn btn_red text-black-75 lato w-100" id="customerOrder">Enviar</button>
                            </div>
                        </form>
                        <ul class="messages float-end">
                            {% for message in messages %}
                                    {% if message.tags %}
                                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                            <i class="fas fa-exclamation-triangle"></i> {{ message }}!
                                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                        </div>
                                    {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}