{% extends 'base.html' %}
{% load static %}
{% block principal %}
     <section class="min-vh-100 w-100">
        <div class="container-fluid">
            <form class="row" method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                 <div class="col-md-3 mt-2">
                         <div class="text-center d-flex flex-column align-items-center">
                        <img class="rounded-circle" id="file_imagen_preview" src="/media/{{ img_profile }}" alt="Vista Previa" style="max-width: 200px; max-height: 200px;">
                        <br>
                        <!--<input type="file" id="file_input" onchange="showPreview(event)"> -->
                        <span>{{ form.img_profile }}</span>
                    </div>
                 </div>
                 <div class="col-md-9 border-right">
                    <div class="p-2 py-2">
                        <div class="row mt-3">
                            <div class="col-md-6"><label class="labels fw-semibold text-danger lato">Email</label>
                                {{ form.email }}
                            </div>
                            <div class="col-md-6"><label class="labels fw-semibold text-danger lato">Username</label>
                                {{ form.username }}
                            </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">Password</label>
                                {{ form.password }}
                            </div>
                            <div class="col-md-6"><label class="labels fw-semibold text-danger lato">Confirma la Password</label>
                                {{ form.password1 }}
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-6"><label class="labels fw-semibold text-danger lato">Fecha De Nacimiento</label>
                                {{ form.date_of_birth }}
                            </div>
                              <div class="col-md-6"><label class="labels fw-semibold text-danger lato">Genero</label>
                                {{ form.gender }}
                            </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-6">
                                <label class="labels fw-semibold text-danger lato">Dirección</label>
                                {{ form.address }}
                            </div>
                            <div class="col-md-6">

                                <label class="labels fw-semibold text-danger lato">Tipo de Usuario</label>

                                    {{ form.tipo_usuario }}

                            </div>
                        </div>
                        <div class="mt-3 text-center">
                            <button class="btn btn_yellow lato" type="submit">Actualizar el Usuario</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
     </section>
{% endblock %}
{% block extrajs %}
    <script src="{%  static "js/photo.js"  %}"></script>
{% endblock %}