{% set current_theme = current_theme() %} {% from "macros/form_errors.j2" import render_field_errors, render_form_errors %}

<!doctype html>
<html lang="{{ current_locale() }}" class="h-100">
    <head>
        {{ current_theme.headertags() }}
        <title>{{ _('Editar perfil.') }}</title>

        {{ current_theme.local_style() }}
        <!-- Custom styles for this template -->
        <link href="{{ url_for('static', filename='css/form-validation') }}" rel="stylesheet" />
    </head>

    <body>
        {{ current_theme.navbar() }}
        <main>
            {{ current_theme.notify() }}

            <div class="container px-4 py-5" id="icon-grid">
                <h4 class="pb-2 border-bottom">{{ _('Editar perfil del usuario') }}: {{ usuario.usuario }}</h4>
                <form
                    method="post"
                    action="{{ url_for('user_profile.edit_perfil', ulid=usuario.id) }}"
                    enctype="multipart/form-data"
                >
                    {{ form.csrf_token }} {{ render_form_errors(form) }} {% if usuario.portada %}
                    <img
                        src="{{ url_for('static', filename='/files/public/images/usuarios/' + usuario.id + '.jpg') }}"
                        alt="{{ usuario.usuario }}"
                        width="200"
                        height="225"
                    />
                    <br />
                    <a href="{{ url_for('elimina_logo_usuario', ulid=usuario.id) }}">{{ _('Eliminar Imagen de Perfil') }}</a>
                    {% else %}
                    <div class="col-md-4">
                        <label for="logo" class="form-label">{{ _('Imagen de Perfil') }}</label>
                        <input type="file" name="logo" accept="image/jpeg" />
                    </div>
                    {% endif %}

                    <div class="row g-3">
                        <h6>{{ _('Información Básica') }}:</h6>
                        <div class="col-sm-6">
                            <label for="nombre" class="form-label">{{ _('Nombre') }}</label>
                            {{ form.nombre(class="form-control", id="nombre") }} {{ render_field_errors(form.nombre) }}
                        </div>

                        <div class="col-md-6">
                            <label for="apellido" class="form-label">{{ _('Apellido') }}</label>
                            {{ form.apellido(class="form-control", id="apellido") }} {{ render_field_errors(form.apellido) }}
                            <br />
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-sm-4">
                            <label for="genero" class="form-label">{{ _('Género') }}</label>
                            {{ form.genero(class="form-control", id="email") }} {{ render_field_errors(form.genero) }}
                        </div>
                        <div class="col-sm-4">
                            <label for="titulo" class="form-label">{{ _('Título') }}</label>
                            {{ form.titulo(class="form-control", id="titulo") }} {{ render_field_errors(form.titulo) }}
                        </div>
                        <div class="col-sm-4">
                            <label for="nacimiento" class="form-label">{{ _('Nacimiento') }}</label>
                            {{ form.nacimiento(class="form-control", id="nacimiento") }} {{
                            render_field_errors(form.nacimiento) }}
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="mw-100">
                            <label for="bio" class="form-label">{{ _('Biografía') }}</label>
                            {{ form.bio(class="form-control", id="bio") }} {{ render_field_errors(form.bio) }}
                        </div>
                    </div>

                    <div class="row g-3">
                        <h6>{{ _('Correo Electrónico') }}</h6>
                        <div class="col-sm-6">
                            <label for="email" class="form-label">{{ _('Correo Electrónico') }}</label>
                            {{ form.correo_electronico(class="form-control", id="email") }} {{
                            render_field_errors(form.correo_electronico) }}
                        </div>
                    </div>

                    <div class="row g-3">
                        <h6>{{ _('Información de Contacto') }}:</h6>
                        <div class="col-sm-4">
                            <label for="url" class="form-label">{{ _('Sitio Web') }}</label>
                            {{ form.url(class="form-control", id="url") }} {{ render_field_errors(form.url) }}
                        </div>
                        <div class="col-sm-4">
                            <label for="linkedin" class="form-label">{{ _('LinkedIn') }}</label>
                            {{ form.linkedin(class="form-control", id="linkedin") }} {{ render_field_errors(form.linkedin) }}
                        </div>
                        <div class="col-sm-4">
                            <label for="twitter" class="form-label">{{ _('Twitter') }}</label>
                            {{ form.twitter(class="form-control", id="twitter") }} {{ render_field_errors(form.twitter) }}
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-sm-4">
                            <label for="facebook" class="form-label">{{ _('Facebook') }}</label>
                            {{ form.facebook(class="form-control", id="Facebook") }} {{ render_field_errors(form.facebook) }}
                        </div>
                        <div class="col-sm-4">
                            <label for="github" class="form-label">{{ _('GitHub') }}</label>
                            {{ form.github(class="form-control", id="github") }} {{ render_field_errors(form.github) }}
                        </div>
                        <div class="col-sm-4">
                            <label for="youtube" class="form-label">{{ _('YouTube') }}</label>
                            {{ form.youtube(class="form-control", id="youtube") }} {{ render_field_errors(form.youtube) }}
                        </div>
                    </div>

                    <a class="btn btn-warning" href="{{ url_for('user_profile.perfil') }}" role="button"
                        >{{ _('Cancelar') }}</a
                    >
                    <button class="w-10 btn btn-primary btn-block" type="submit">{{ _('Actualizar Perfil') }}</button>
                </form>
            </div>
        </main>
    </body>
</html>
