{% extends 'base.html' %}
{% load static %}
{% block login_home %}
    <section class="imagen">
        <div class="bg-black bg-opacity-50 min-vh-100" style="margin: -2em;">
            <div class="d-flex justify-content-center mb-4">
                <h2 class="dosis text-white">Registrarse</h2>
            </div>
            <div class="d-flex justify-content-center">
                <div class="container mb-4 d-block" style="width:35rem;">
                    <form method="post">
                        {% csrf_token %}
                        <ul class="list_non row">
                            <li class="col-6">
                                <label for="nombre" class="text-white dosis d-inline-block">Nombre</label>
                                {{ form.first_name }}
                            </li>
                            <li class="col-6">
                                <label for="apellido" class="text-white dosis d-inline-block">Apellido</label>
                                {{ form.last_name }}
                            </li>
                            <li class="col-6">
                                <label for="email" class="text-white dosis d-inline-block">Correo Electronico</label>
                                {{ form.email }}
                            </li>
                            <li class="col-6">
                                <label for="cedula" class="text-white dosis d-inline-block">Cedula</label>
                                {{ form.num_document }}
                            </li>
                            <li class="col-6">
                                <label for="edad" class="text-white dosis d-inline-block">Edad</label>
{#                                <input class="rounded d-block" id="edad" type="date">#}
                                {{ form.date_of_birth }}
                            </li>
                            <li class="col-6">
                                <label for="genero" class="text-white dosis d-inline-block">Genero</label>
{#                                <select class="rounded d-block" id="genero"><option>mujer</option><option>hombre</option></select>#}
                                {{ form.gender }}
                            </li>
                        </ul>
                        <div class="d-flex justify-content-center pe-3">
                            <button type="submit" class="btn text-black-75 dosis btn_yellow w90">Registrarse</button>
                        </div>
                    </form>
                    <ul class="messages float mt-3 justify-content-center">
                        {% 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 class="d-flex justify-content-center mb-4">
                <div class="container text-center">
                    <p class="dosis text-white mb-2 h5">Tus datos personales se utilizarán para procesar tu pedido y gestionar el acceso a tu cuenta</p>
                    <p class="dosis text-white h5">Al hacer clic en Registrarse o registrarse a través de un tercero, acepta los Términos de uso de Vitalapp y reconoce la Política de privacidad y la Política de cookies.</p>
                </div>
            </div>
        </div>
    </section>

{% endblock %}