{% extends "base_account.html" %}
{% load i18n %}
{% load include_asset %}
{% load show_government_badge %}

{% block title %}Login{% endblock %}

{% block content %}
    <h2>{% trans "Profile" %}</h2>
    
    {% if messages %}
        <ul class="messages correct">
            {% for message in messages %}
            <li>
                {% include_asset "icons/check.svg" %}
                {% if 'email' in message.tags %}
                    <div class="textcolor_primary">{% trans "Email address changed" %}</div>
                    <div class="textcolor_secondary">{% trans "You can now login using your new email adress" %}</div>
                {% else %}
                    <div class="textcolor_secondary">{{ message }}</div>
                {% endif %}
            </li>
            {% endfor %}
        </ul>
    {% endif %}

        <form enctype="multipart/form-data" method="post" action=".">
        <div class="account__cards">
            <div class="card ___nopadding">
                {% csrf_token %}
                <h2 class="card__title ___addpadding-side">{% trans "Your details" %}</h2>
                
                <ul class="messages error">
                    {% for error in form.non_field_errors %}
                        <li>
                        {% include_asset "icons/account-alert.svg" %}
                        <div class="textcolor_primary">{% trans "Invalid email address." %}</div>
                        <div class="textcolor_secondary">{{ error }}</div>
                        </li>
                    {% endfor %}
                </ul>
                <p></p><p></p>
    
                <fieldset class="___addpadding-side">
                    <div class="input-field">
                        <label for="id_name">{% trans "Name" %}</label>
                        {{ form.errors.name }}
                        {{ form.name }}
                    </div>
                    <div class="input-field">
                        <label for="id_email">{% trans "Email" %}</label>
                        {{ form.errors.email }}
                        {{ form.email }}
                        {% show_government_badge form.email.value as show_badge %}
                        {% if show_badge %}
                            <span class="badge green __uppercase">{% include_asset "icons/check.svg" %}{% trans "Government" %}</span>
                        {% endif %}
                    </div>
                    {% if text_change_pending %}
                        <div>
                            {{ text_change_pending }}<b>{{ text_email }}</b><br>
                            {% trans "Please check your inbox to validate the change." %}<br> 
                            {% trans "Click " %}<a href="{% url 'change_email' %}"><b>{% trans "here" %}</b></a> {% trans "to resend the confirmation e-mail." %}
                        </div>
                    {% endif %}
            </fieldset>
                <div class="card__action ___addpadding-side">
                    <button name="update" class="button ___clear" type="submit">{% trans "Save" %}</button>
                </div>
            </div>
            
            <div class="card ___nopadding">
                <h2 class="card__title ___addpadding-side">{% trans "Avatar" %}</h2>
                <div class="account-user__pickavatar ___addpadding-side">
                    <div class="input-field">
                        {% if request.user.avatar %}
                            <img src="/media/{{ request.user.avatar }}" border=0 class="account-user__avatar">
                            <input id="avatar-clear_id" name="avatar-clear" type="checkbox">
                        {% else %}
                            <img src="/static/icons/person.svg" border=0 class="account-user__avatar">
                        {% endif %}
        
                        {{ form.errors.avatar }}
                        <input id="id_avatar" name="avatar" type="file" accept=".jpg, .jpeg, .png" onchange="this.form.submit()">
                     </div>
                    <button class="button" onClick="javascript:document.getElementById('id_avatar').click(); return false;">{% trans "Choose an avatar" %}</button>
                </div>
                <div class="card__action ___addpadding-side">
                    <button name="update" class="button ___clear" onClick="javascript:document.getElementById('avatar-clear_id').checked='true'; this.form.submit(); return false;">{% trans "Remove avatar" %}</button>
                </div>
            </div>
            
        </div>
    </form>

{% endblock %}