{% extends "misago/admin/generic/form.html" %}
{% load i18n misago_avatars misago_capture misago_forms %}


{% block title %}
{% trans "Delete users with content" %} | {{ active_link.name }} | {{ block.super }}
{% endblock title %}


{% block page-target %}
{% trans "Delete users with content" %}
{% endblock page-target %}


{% block form-header %}
<h1>
  {% trans "Deleting users..." %}
</h1>
{% endblock %}


{% block form-body %}
<div class="form-body">
  {% for user in users %}
  <fieldset class="user queued">
    <legend>{{ user.username }}</legend>

    <div class="extra-padding">
      <ul class="list-unstyled">
        <li class="step queued" data-url="{% url 'misago:admin:users:accounts:delete_threads' user_id=user.id %}" data-total="{{ user.thread_set.count }}">
          <span class="fa fa-clock-o fa-fw text-muted"></span>
          {% trans "Threads" %}: <strong><em class="text-muted">{% trans "queued" %}</em></strong>
        </li>
        <li class="step queued" data-url="{% url 'misago:admin:users:accounts:delete_posts' user_id=user.id %}" data-total="{{ user.post_set.count }}">
          <span class="fa fa-clock-o fa-fw text-muted"></span>
          {% trans "Posts" %}: <strong><em class="text-muted">{% trans "queued" %}</em></strong>
        </li>
        <li class="step queued" data-url="{% url 'misago:admin:users:accounts:delete_account' user_id=user.id %}">
          <span class="fa fa-clock-o fa-fw text-muted"></span>
          {% trans "Account" %}: <strong><em class="text-muted">{% trans "queued" %}</em></strong>
        </li>
      </ul>
    </div>

  </fieldset>
  {% endfor %}
</div>
{% endblock form-body %}


{% block form-footer %}{% endblock form-footer %}

{% block javascripts %}
<script type="text/javascript">
  $(function() {

    DeletionController = function($e, on_complete) {

      this.lang_deleting = "{% trans "deleting..." %}";
      this.done = "{% trans "done" %}";

      this.$e = $e;
      this.on_complete = on_complete;
      this.form_data = $e.parents('form').serialize();

      var _this = this;

      this.step = function($step) {

        var url = $step.data('url');
        var total = $step.data('total');

        var $icon = $step.find('.fa');
        var $label = $step.find('strong');

        var processed = 0;

        $icon.attr('class', 'fa fa-cog fa-spin fa-fw text-danger');
        $label.html(this.lang_deleting);

        function query_server() {
          $.post(url, _this.form_data, function(data) {

            if (data.is_completed) {

              $icon.attr('class', 'fa fa-check fa-fw text-success');
              $label.html(_this.done);
              $step.removeClass('queued');
              _this.process();

            } else {

              if (total !== undefined && total > 0) {
                processed += data.deleted_count;
                progress = Math.round(processed * 100 / total);

                if (progress > 100) {
                  progress = 100;
                }

                $label.html(_this.lang_deleting + " " + progress + "%");
              }
              query_server();

            }

          });
        }

        query_server();

      }

      this.complete = function() {

        this.$e.removeClass('queued');
        on_complete();

      }

      this.process = function() {

        var $step = this.$e.find('.step.queued').first();

        if ($step.length) {
          this.step($step);
        } else {
          this.complete();
        }

      }
      this.process();

    };

    function delete_user() {

      var $user = $('.user.queued').first();

      if ($user.length) {
        var controller = new DeletionController($user, delete_user);
      } else {

        var $form = $('.user').first().parents('form');
        var $btn = $form.find('.btn-default');

        $btn.text("{% trans "Return to list of users" %}");
        $btn.attr('class', 'btn btn-success');

      }

    }
    delete_user();

  });
</script>
{% endblock %}