{% extends "base.html" %}
{% load i18n append_to_get gravatar superarchives %}

{% trans "Anonymous" as anonymous %}

{% block head_js %}

<script>
  function vote_done_callback(step) {
    console.debug('(un)vote successfuly (step ' + step + ')');
    var $btn = $(this);
    var step;

    if ($btn.hasClass('btn-default')) {
      step = 1;
    } else {
      step = -1;
    }

    $btn.prev('.vote-count').text(function(self, count) {
        return parseInt(count) + step;
    });

    $btn.toggleClass('btn-success');
    $btn.toggleClass('btn-default');
    $btn.button('reset')
  }

  function vote_fail_callback(jqXHR, textStatus, errorThrown) {
    var msg;

    if (jqXHR.status === 403) {
      msg = " {% trans 'You must login before voting.' %}"

      $('#alert-js #alert-message').html(msg);
      $('#alert-js').show();
      scroll(0, 0);
    }

  }

  function vote(event) {
    var $ajax;
    var $btn = $(this);
    var $msg = $(this).parents('.email-message');

    var method;
    var csrftoken = $.cookie('csrftoken');
    var msg_id = $msg.attr('id').split('-')[1];

    if($btn.hasClass('btn-default')) {
        method = 'PUT';
    } else {
        method = 'DELETE';
    }

    console.debug('trying to vote');
    $btn.button('loading');
    $ajax = $.ajax({
      url: "/api/message/" + msg_id + "/vote",
      type: method,
      context: $btn.get(0),
      beforeSend: function(xhr, settings) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
      }
    });
    $ajax.done(vote_done_callback);
    $ajax.fail(vote_fail_callback);
  }

  // Binding functions
  $(function() {
    $(".panel-heading").on('click', function(event) {
        var $target = $(event.target);
        // Do not collapse the the message if the clicked element (target)
        //  is a button or a link
        if($target.hasClass('btn') || $target.is('a') || $target.parent().is('a')) {
            return;
        }

        $(this).next('.panel-collapse').collapse('toggle');
    });

    $('.vote.btn', this).on('click', vote);
  });

</script>

{% endblock %}

{% block main-content %}
<div class="row">

  <div class="col-lg-12">
    <h2>{{ first_msg.subject_clean }}</h2>
    <hr />
  </div>

  <div class="col-lg-10 col-md-10 col-sm-12">
    <ul class="unstyled-list">
    {% for email in emails %}
      {% with email.from_address.user.get_absolute_url as profile_link %}
      <li>
        {% spaceless %}
        <div class="email-message" id="msg-{{ email.id }}">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <div class="col-lg-6 col-md-6 col-sm-6">
                {% if profile_link %}
                <a href="{{ profile_link }}">
                {% endif %}
                {% gravatar email.from_address 34 %}
                <strong class="user-fullname">{{ email.from_address.get_full_name_or_anonymous }}</strong>
                {% if profile_link %}
                </a>
                {% endif %}
              </div>

              <div class="col-lg-6 col-md-6 col-sm-6">
                <div class="pull-right text-right">
                  <span class="date">
                    {{ email.received_time|date:'DATETIME_FORMAT' }}
                  </span>

                  <div class="btn-group">
                    <button class="btn btn-default vote-count disabled">
                      {{ email.votes_count }}
                    </button>
                    {% if user in email.vote_list %}
                    <button class="btn btn-success vote" data-loading-text="...">
                    {% else %}
                    <button class="btn btn-default vote" data-loading-text="...">
                    {% endif %}
                      <span class="glyphicon glyphicon-thumbs-up"></span>
                    </button>
                  </div>
                </div>
              </div>

            </div>
            <div class="panel-collapse in">
              <div class="panel-body">
                {% display_message email emails %}
              </div>
            </div>
          </div>
        </div>
      {% endspaceless %}
      </li>
      {% endwith %}
    {% endfor %}
    </ul>
  </div>

  <div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
    <h4><strong>{% trans "Order by" %}:</strong></h4>
    <ul class="unstyled-list">
      <li>
        <span class="glyphicon glyphicon-chevron-right"></span>
        <a href="{% append_to_get order='voted' %}">{% trans "Votes" %}</a>
      </li>
      <li>
        <span class="glyphicon glyphicon-chevron-right"></span>
        <a href="{% append_to_get order='date' %}">{% trans "Date" %}</a>
      </li>
    </ul>

    <h4><strong>{% trans "Statistics:" %}</strong></h4>

    <ul class="unstyled-list">
      <li>
        <span class="glyphicon glyphicon-chevron-right"></span>
        {% trans "started at" %}
        <h5>{{ first_msg.received_time|timesince }} {% trans "ago" %}</h5>
      </li>

      <li>
        <span class="glyphicon glyphicon-chevron-right"></span>
        {% trans "viewed" %}
        <h5>{{ pagehits }} {% trans "times" %}</h5>
      </li>
      <li>
        <span class="glyphicon glyphicon-chevron-right"></span>
        {% trans "answered" %}
        <h5>{{ emails|length }} {% trans "times" %}</h5>
      </li>
      <li>
        <span class="glyphicon glyphicon-chevron-right"></span>
        {% trans "voted" %}
        <h5>{{ total_votes }} {% trans "times" %}</h5>
      </li>
    </ul>
  </div>

</div>
{% endblock %}