{% extends 'base.html' %}

{% block title %}{{ _('Recent reports') }} - CritiqueBrainz{% endblock %}

{% block content %}
  <h2 id="title">{{ _('Recent reports') }}</h2>

  <div id="confirm-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body"></div>
        <div class="modal-footer">
          {# TODO(dufferzafar): replace the href with url_for('log.browse') #}
          <p class="text-muted pull-left">This action will be <a href="/log">logged</a>.</p>
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <a class="btn btn-danger">Delete</a>
        </div>
      </div>
    </div>
  </div>

  <table class="table table-hover">
    <thead>
    <tr>
      <th>{{ _('Reported on') }}</th>
      <th>{{ _('Reported by') }}</th>
      <th>{{ _('Reason') }}</th>
      <th>{{ _('Review') }}</th>
      <th>{{ _('Author') }}</th>
      <th>{{ _('Actions') }}</th>
    </tr>
    </thead>
    <tbody id="results">{% include 'reports/reports_results.html' %}</tbody>
  </table>
  {% if count > limit %}
    <div>
      <button id="more-button" type="button" class="btn btn-primary"
              onclick="load_more();" >{{ _('Load older reports') }}</button>
      <span id="loading-message" class="text-muted"
            style="display:none;">{{ _('Loading older reports...') }}</span>
    </div>
  {% endif %}
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script>
    {% if count > limit %}
      var current_page = 0;
      function load_more() {
        var more_button = $("#more-button");
        var loading_message = $("#loading-message");
        more_button.hide();
        loading_message.show();
        $.ajax({
          url: "{{ url_for('reports.more') }}",
          data: { page: ++current_page }
        })
        .done(function(data) {
          loading_message.hide();
          $("#results").append(data.results);
          if (data.more === true) more_button.show();
        })
        .fail(function() {
          alert({{ _('Failed to load older reports!') | tojson }});
        });
      }
    {% endif %}

    // Display a modal to confirm the action
    $('.confirm-first').on('click', function(e){
      e.preventDefault();
      // Set the data for action
      var href = $(this).attr('href');
      var text = $(this).attr('data-confirm-text');
      $('#confirm-modal').find('.btn-danger').attr('href', href);
      $('#confirm-modal').find('.modal-body').text(text);
      // Display the modal
      $('#confirm-modal').modal();
    });
  </script>
{% endblock %}