{% extends "base.html" %}
{% load i18n avatar_tags %}

{% block title %}{% trans "Avatar" %}{% endblock %}

{% block content %}
<div class="ui secondary pointing fluid menu">
  <h1 class="ui header">{% trans "Change your avatar" %}</h1>
</div>

<div class="ui padded basic segment sixteen wide column">
  <div class="ui two column middle aligned very relaxed stackable grid">
    {% if not avatars %}
    <div class="column">
      <p><label>{% trans "You haven't uploaded an avatar yet. Please upload one now." %}</label></p>
    </div>
    {% else %}
    <div class="column">
      <form method="POST" action="{% url 'avatar_change' %}">
        <div class="list-avatars">
          {{ primary_avatar_form.as_p }}
        </div>
        <div>{% csrf_token %}
          <button type="submit" class="ui green button">
            <i class="save icon"></i>
            {% trans "Save selected avatar" %}
          </button>
        </div>
      </form>
    </div>
    {% endif %}
    <div style="position:relative;padding:0!important">{% comment %}https://github.com/Semantic-Org/Semantic-UI/issues/4342{% endcomment %}
      <div class="ui vertical divider">
        {% trans "Or" %}
      </div>
    </div>
    <div class="column">
      <form enctype="multipart/form-data" method="POST" action="{% url 'avatar_add' %}">
        {{ upload_avatar_form.as_p }}
        <p>{% csrf_token %}
          <button type="submit" class="ui yellow button">
            <i class="add icon"></i>
            {% trans "Upload New Image" %}
          </button>
        </p>
      </form>
    </div>
  </div>
  {% if avatars %}
  <div class="ui section divider"></div>
  <p>
    <a class="ui right labeled icon button" href="{% url 'avatar_delete' %}">
      <i class="chevron right icon"></i>
      {% trans "Delete your avatars" %}
    </a>
  </p>
  {% endif %}
</div>
{% endblock %}
