{% extends "misago/usercp/base.html" %}
{% load i18n misago_avatars %}


{% block page %}
<div class="form-panel">
  <form method="POST" role="form" class="form-horizontal">
    {% csrf_token %}

    <div class="form-header">
      <h2>
        <span class="{{ active_page.icon }}"></span>
        {{ active_page.name }}
      </h2>
    </div>

    <div class="form-body form-avatar-home">

      <div class="media">
        <span class="pull-left">
          <img class="media-object img-rounded img-responsive avatar-preview" src="{{ user|avatar:avatar_size }}" width="{{ avatar_size }}" height="{{ avatar_size }}" alt="{% trans "Your current avatar" %}">
        </span>
        <div class="media-body usercp-avatar-options">
          {% if user.is_avatar_locked %}
          <h4 class="media-heading">{% trans "Change avatar:" %}</h4>
          <div class="lead">
            {% if user.avatar_lock_user_message %}
            {{ user.avatar_lock_user_message|escape|urlize|linebreaks }}
            {% else %}
            <p>{% trans "Your avatar is locked. You can't change it." %}</p>
            {% endif %}
          </div>
          {% else %}
          <h4 class="media-heading">{% trans "Change avatar:" %}</h4>

          <ul class="list-unstyled">
            {% if misago_settings.allow_custom_avatars %}
            <li>
              <button name="dl-gravatar" class="btn btn-link">
                <span class="fa fa-image fa-fw"></span>
                {% trans "Download my Gravatar" %}
              </button>
            </li>
            {% endif %}
            <li>
              <button name="set-dynamic" class="btn btn-link">
                <span class="fa fa-cog fa-fw"></span>
                {% trans "Generate avatar from my username" %}
              </button>
            </li>
            {% if misago_settings.allow_custom_avatars %}
            {% if has_source_image %}
            <li>
              <a href="{% url 'misago:usercp_crop_avatar' %}">
                <span class="fa fa-arrows-alt fa-fw"></span>
                {% trans "Crop my avatar" %}
              </a>
            </li>
            {% endif %}
            <li>
              <a href="{% url 'misago:usercp_upload_avatar' %}">
                <span class="fa fa-upload fa-fw"></span>
                {% trans "Upload image from my device" %}
              </a>
            </li>
            {% endif %}
            {% if galleries_exist %}
            <li>
              <a href="{% url 'misago:usercp_avatar_galleries' %}">
                <span class="fa fa-image fa-fw"></span>
                {% trans "Pick avatar from gallery" %}
              </a>
            </li>
            {% endif %}
          </ul>
          {% endif %}

        </div>
      </div>

    </div>
  </form>
</div>
{% endblock page %}