{% extends 'base.html' %}
{% load static %}
{% block extrahead %}
    <link rel="stylesheet" href="{% static "css/reset.css" %}">
{% endblock %}
{% block principal %}
    <section class="vh-75 bg_grey pt-4 pb-4">
        <div class="container m4 bg_white rounded">
            <form class="row" method="POST" enctype="multipart/form-data">
                {% csrf_token %}

                <div class="col-md-5 border-right">
                    <div class="d-flex flex-column align-items-center text-center p-3 py-5">
                        <img class="rounded-circle mt-5" id="file_imagen_preview" src="/media/{{ img_profile }}">
                        <span class="font-weight-bold fw-semibold lato">{{ request.user.first_name }} {{ request.user.last_name }}</span><span class="text-black-50 fw-semibold lato mt-1"><label for='file_imagen'></label>
                                {{form.img_profile}}</span>
                        <button type="button" class="btn btn_yellow mt-4" onclick="abrir_editar('{% url 'change_password' request.user.id %}')">Cambiar Contraseña</button>
                    </div>
                </div>
                <div class="col-md-5 border-right">
                    <div class="p-3 py-5">
                        {% for message in messages %}
                            {% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}
                                <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 %}
                        <div class="row mt-3">
                            <div class="col-md-12"><label class="labels fw-semibold text-danger lato">Email</label>{{ form.email }}</div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6"><label class="labels fw-semibold text-danger lato">Nombre</label>{{ form.first_name }}</div>
                            <div class="col-md-6"><label class="labels fw-semibold text-danger lato">Apellido</label>{{ form.last_name }}</div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6"><label class="labels fw-semibold text-danger lato">Usuario</label>{{ form.username }}</div>
                            <div class="col-md-6"><label class="labels fw-semibold text-danger lato">Genero</label>{{ form.gender }}</div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-12"><label class="labels fw-semibold text-danger lato">Fecha De Nacimiento</label>{{ form.date_of_birth }}</div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6"><label class="labels fw-semibold text-danger lato">Cedula</label>{{ form.num_document }}</div>
                            <div class="col-md-6"><label class="labels fw-semibold text-danger lato">Teléfono</label>{{ form.phone_number }}</div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-12"><label class="labels fw-semibold text-danger lato">Dirección</label>{{ form.address }}</div>
                        </div>
                        <div class="mt-5 text-center">
                            <button class="btn btn_yellow lato" type="submit">Actualizar</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>

    <div class="modal fade" id="EditComponent" tabindex="-1" aria-labelledby="EditComponentLabel" aria-hidden="true">
    </div>
{% endblock %}
{% block extrajs %}
    <script type="text/javascript">
        var $ = jQuery.noConflict()
        function abrir_editar(url){
            $('#EditComponent').load(url, function (){
                $(this).modal('show')
            })
        }
    </script>
    <script src="{%  static "js/photo_preview.js"  %}"></script>

{% endblock %}