{% extends "three-column-content.html" %}
{% block three_col_media %}
  <style>
    .middle-content {
      max-width: 50%;
    }
    ol {
      padding-left: 1em;
    }
  </style>
{% endblock %}

{% block js_media %}
  <script type="text/javascript">
    $(function () {
      $('.vote-detail').each(function() {
        $(this).on('click', function() {
          var pid = $(this).attr('pid');
          $.get("{{url('internal_problem_votes')}}?id="+pid, function(data) {
            $('#detail').html(data);
          });
        })
      })
    });
  </script>
{% endblock %}

{% block left_sidebar %}
  {% include "internal/left-sidebar.html" %}
{% endblock %}

{% block middle_content %}
  <form>
    <label for="name">{{_('Search')}}:</label>
    <input type="text" name="q" value="{{query}}">
  </form>
  <br>
  <table class="table">
    <thead>
      <tr>
        <th>{{_('Problem')}}</th>
        <th>{{_('Code')}}</th>
        <th>{{_('Vote count')}}</th>
      </tr>
    </thead>
    <tbody>
      {% for problem in problems %}
        <tr>
          <td><a href="{{url('problem_detail', problem.code)}}">{{problem.name}}</a></td>
          <td><a href="{{url('admin:judge_problem_change', problem.id)}}">{{problem.code}}</a></td>
          <td><a href="#" class="vote-detail" pid="{{problem.id}}">{{problem.vote_count}}</a></td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  {% if page_obj.num_pages > 1 %}
    <div style="margin-top:10px;">{% include "list-pages.html" %}</div>
  {% endif %}
{% endblock %}

{% block right_sidebar %}
  <div style="display: block; width: 100%">
    <a href="{{url('admin:judge_volunteerproblemvote_changelist')}}">{{_('Admin')}}</a>
    <div class="detail" id="detail">
    </div>
  </div>
{% endblock %}