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

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

{% block content %}
    <h2>{% trans "Profile" %}</h2>

    {% if messages %}
      {% for message in messages %}
        {% if 'success' in message.tags %}
            <ul class="messages correct">
                <li>
                    {% include_asset "icons/check.svg" %}
                    {% if 'password' in message.tags %}
                        <div class="textcolor_primary">{% trans "Password changed" %}</div>
                        <div class="textcolor_secondary">{% trans "You can now login using your new password" %}</div>
                    {% elif '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>
                    {% elif 'profile' in message.tags %}
                        <div class="textcolor_primary">{% trans "Profile changed" %}</div>
                        <div class="textcolor_secondary">{% trans "Your profile has been changed" %}</div>
                    {% else %}
                        <div class="textcolor_primary">{% trans 'Success' %}</div>
                        <div class="textcolor_secondary">{{ message }}</div>
                    {% endif %}
                </li>
            </ul>
        {% elif 'error' in message.tags %}
            <ul class="messages error">
                <li>
                    {% include_asset "icons/account-alert.svg" %}
                    <div class="textcolor_primary">{% trans 'Error' %}</div>
                    <div class="textcolor_secondary">{{ message }}</div>
                </li>
            </ul>
        {% endif %}
      {% endfor %}
      <p></p>
    {% 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 %}
                    <div class="register__check">
                        {{ form.errors.receives_newsletter }}
                        {{ form.receives_newsletter }}
                        <label for="id_receives_newsletter">{% trans "Please subscribe me to the " %}{% settings_value 'SITE_TITLE' %}{% trans " newsletter." %}</label>
                    </div>

            </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>
            <a href="{% url 'delete_account' %}" class="button ___clear ___error ___fullspan">
                {% trans "Delete my account" %}
            </a>
        </div>
    </form>

{% endblock %}