{% extends 'base_externa.html' %} 
{% load static %}

{% block contenido %}
<div class="container-xxl py-5">
    <div class="container">
        <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
            <h6 class="section-title bg-white text-center text-primary px-3">Mi perfil</h6>
            <h1 class="mb-5">{{ request.user.first_name }} {{request.user.last_name }}</h1>
        </div>
         <div class="row g-4">
            <div class="col-lg-6 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                <img src="{{request.user.profile_picture.url}}"style="text-align: center; width: 180px; height: 180px; border: 1px solid black;"> 	<br><br>
                <h5>Descripción</h5>
                <p class="mb-4" style="text-align: justify;">
                	{% if request.user.descripcion %}
                		{{ request.user.descripcion }}
                	{% else %}
                	No hay descripción del perfil.
                	{% endif %}
                </p>
                    	
                <div class="d-flex align-items-center mb-3">
                    <div class="d-flex align-items-center justify-content-center flex-shrink-0 bg-primary" style="width: 50px; height: 50px;">
                    	<i class="fa fa-user-tie text-white fa-2xl"></i>
                    </div>
                    <div class="ms-3">
                        <h5 class="text-primary">Profesión</h5>
                        <p class="mb-0">{{request.user.profession}}</p>
                    </div>
                </div>
                <div class="d-flex align-items-center mb-3">
                    <div class="d-flex align-items-center justify-content-center flex-shrink-0 bg-primary" style="width: 50px; height: 50px;">
                        <i class="fa fa-id-badge text-white fa-2xl"></i>
                    </div>
                    <div class="ms-3">
                        <h5 class="text-primary">Tipo de usuario</h5>
                        <p class="mb-0">{{ request.user.user_type }}</p>
                    </div>
                </div>
                <div class="d-flex align-items-center">
                    <div class="d-flex align-items-center justify-content-center flex-shrink-0 bg-primary" style="width: 50px; height: 50px;">
                        <i class="fa fa-envelope-open text-white"></i>
                    </div>
                    <div class="ms-3">
                        <h5 class="text-primary">Correo electrónico</h5>
                        <p class="mb-0">{{request.user.email}}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12 wow fadeInUp" data-wow-delay="0.5s">
            	{% include 'message.html' %}
                <form method="post" enctype="multipart/form-data">
                   	{% csrf_token %}
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                {{ forms.first_name }}
                                <label for="name">Nombre completo</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                            	{{ forms.last_name }}
                                <label for="last_name">Apellido(s)</label>
                            
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                            	{{ forms.profession }}
                                <label for="profession">Profesión</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                            	<textarea class="form-control" id="descripcion" name="descripcion" style="height: 150px" >{{ forms.descripcion.value }}</textarea>
                                <label for="descripcion" >Ingresa una descripción para tu perfil</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                            	{{ forms.email }}
                                <label for="email">Correo electrónico</label>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-floating">
                                {{ forms.username }}
                                <label for="username">Nombre de usuario</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                            	{{ forms.profile_picture }}
                                <label for="profession">Foto de perfil</label>
                            </div>
                        </div>
                        <input type="hidden" name="user_type" value="{{ forms.user_type.value }}">
                        <div class="col-12">
                            <button class="btn btn-primary w-100 py-3" type="submit">Editar perfil</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock contenido %}

