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


{% 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>

    {% if changes_left %}
    {% include "misago/form_errors.html" %}
    <div class="form-body no-fieldsets">
      {% form_row form.new_username "col-md-3" "col-md-9" %}
    </div>
    <div class="form-footer">
      <div class="row">
        <div class="col-md-9 col-md-offset-3">

          <button class="btn btn-primary">{% trans "Change username" %}</button>

          <p class="extra">
            {% blocktrans trimmed count changes_left=changes_left %}
            You have one change left.
            {% plural %}
            You have {{ changes_left }} changes left.
            {% endblocktrans %}
          </p>

        </div>
      </div>
    </div>
    {% else %}
    <div class="form-body form-text">

      <p class="lead">{% trans "You have used up available username changes." %}</p>
      {% if next_change_on %}
      <p class="lead">
        {% capture trimmed as moment_date %}
        <abbr class="tooltip-top dynamic time-ago" title="{{ next_change_on }}" data-timestamp="{{ next_change_on|date:"c" }}">
          {{ next_change_on|date }}
        </abbr>
        {% endcapture %}
        {% blocktrans trimmed with next_change_date=moment_date|safe %}
          You will be able to change your username on {{ next_change_date }}.
        {% endblocktrans %}
      </p>
      {% endif %}

    </div>
    {% endif %}

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