{% extends "three-column-content.html" %}
{% block three_col_media %}
  <link rel="stylesheet" href="{{ static('libs/nouislider.min.css') }}">
  <noscript>
    <style>
      #category, #types {
        visibility: visible;
      }
    </style>
  </noscript>
  {% if not show_contest_mode %}
    <style>
      #search-org, #search-author {
        width: 100%;
      }
      #problem-table th {
        padding: 0;
      }
      a.hot-problem-link:hover > .hot-problem-count {
        visibility: visible;
      }
      ul.problem-list {
        padding: 0 !important;
      }
      .volunteer-types {
        width: 100%;
      }
      .point-input {
        height: 2em;
        padding-top: 4px;
      }
      @media(min-width: 800px) {
        #content {
          width: 99%;
          margin-left: 0;
        }
      }
      @media(max-width: 799px) {
        #content {
          width: 100%;
          margin-left: 0;
        }
      }
    </style>
  {% else %}
    <style>
      @media(min-width: 800px) {
        .middle-content {
          max-width: 90%;
        }
      }
    </style>
  {% endif %}
{% endblock %}

{% block three_col_js %}
  {% include "actionbar/media-js.html" %}
  {% block problem_list_js %}{% endblock %}
  <script>
    window.point_start = {{point_start}};
    window.point_end = {{point_end}};
    window.point_values = {{point_values|json|safe}};
    function clear_point_interval() {
      if ($('#search').val() !== "{{ search_query or '' }}") {
        $('#point-start').remove();
        $('#point-end').remove();
      }
    }
  </script>
  {% compress js %}
    <script src="{{ static('libs/nouislider.min.js') }}" type="text/javascript"></script>
    <script>
      $(function () {
        var $form = $('form#filter-form');
        var $search = $('#search');
        var $category = $('#category');

        function prep_form() {
          $search.prop('disabled', !$search.val());
          $category.prop('disabled', !$category.val());
        }

        function clean_submit() {
          prep_form();
          clear_point_interval();
          $form.submit();
        }

        function form_serialize() {
          clear_point_interval();
          return $form.serialize();
        }

        $category.select2().css({'visibility': 'visible'}).change(clean_submit);
        $('#types').select2({multiple: 1, placeholder: '{{ _('Filter by type...') }}'})
          .css({'visibility': 'visible'});
        $('#search-org').select2({multiple: 1, placeholder: '{{ _('Groups') }}...'})
          .css({'visibility': 'visible'});
        $('#search-author').select2({multiple: 1, placeholder: '{{ _('Authors') }}...'})
          .css({'visibility': 'visible'});

        // This is incredibly nasty to do but it's needed because otherwise the select2 steals the focus
        $search.keypress(function (e) {
          if (e.keyCode == 13)
          $('#go').click();
        });

        $('#random').click(function (e) {
          var action = $form.attr('action');
          $form.attr('action', '{{ url('problem_random') }}').attr('target', '_blank').submit();
          $form.attr('action', action).attr('target', '');
          e.preventDefault();
        });

        $('#go').click(clean_submit);

        $('input#full_text, input#hide_solved, input#show_types, input#show_editorial, input#have_editorial, input#show_solved_only').click(function () {
          prep_form();
          ($('<form>').attr('action', window.location.pathname + '?' + form_serialize())
              .append($('<input>').attr('type', 'hidden').attr('name', 'csrfmiddlewaretoken')
                .attr('value', $.cookie('csrftoken')))
              .attr('method', 'POST').appendTo($('body')).submit());
        });

        var intFormatter = {
          to: function (value) {
            return value;
          },
          from: function (value) {
            return +value;
          }
        };
        var $slider = $('#point-slider');
        if ($slider.length) {
          var $start = $('#point-start');
          var $end = $('#point-end');

          noUiSlider.create($slider[0], {
            start: [point_start, point_end],
            connect: true,
            snap: true,
            tooltips: [intFormatter, intFormatter],
            range: point_values
          }).on('change', function (values) {
            var start = +values[0], end = +values[1];
            $start.prop('disabled', start === point_values.min).val(start);
            $end.prop('disabled', end === point_values.max).val(end);
          });
        }
        {% if feed_type=='volunteer' and request.user.has_perm('judge.suggest_problem_changes') %}
          $(".view-statement-src").on('click', function(e) {
            e.preventDefault();
            $(this).siblings('.statement-src').toggle();
          });
          $(".edit-btn").on('click', function() {
            var pid = $(this).attr('pid');
            $('#volunteer-types-' + pid).css({'width': '100%'});
            $('#volunteer-types-' + pid).select2({multiple: 1, placeholder: '{{ _('Add types...') }}'})
              .css({'visibility': 'visible'});

            $('#form-' + pid).show();
            $('#submit-' + pid).show();
            $(this).hide();
          });

          let isChecking = false;
          $(".volunteer-submit-btn").on('click', function(e) {
            var pid = $(this).attr('pid');
            var pcode = $(this).attr('pcode');
            var $form = $('#form-' + pid);

            if (!$form[0].checkValidity()) {
              if (isChecking) return;
              isChecking = true;
              // The form won't actually submit;
              $(this).click();
            }
            else {
              isChecking = false;
            }
            if (isChecking) return;

            e.preventDefault();
            $('#volunteer-types-' + pid).select2({multiple: 1, placeholder: '{{ _('Add types...') }}'})
              .css({'visibility': 'visible'});
            $('#form-' + pid).hide();
            $('#edit-' + pid).show();
            $('#thank-' + pid).show();
            $(this).hide();

            var data = {
              problem: pcode,
              types: $('#volunteer-types-' + pid).val(),
              knowledge_points: $('#knowledge_point-' + pid).val(),
              thinking_points: $('#thinking_point-' + pid).val(),
              feedback: $('#feedback-' + pid).val(),
            };
            $.post("{{url('volunteer_problem_vote')}}", data)
              .fail(function() {
              $('#thank-' + pid).html("{{_('Fail to vote!')}}");
            })
              .done(function() {
              $('#thank-' + pid).html("{{_('Successful vote! Thank you!')}}");
            });
          });
        {% endif %}
      });
    </script>
  {% endcompress %}
  {% if show_contest_mode %}
    <script type="text/javascript">
      $(function() {
        window.register_contest_notification("{{url('contest_clarification_ajax', request.participation.contest.key)}}");

        {% if show_contest_mode %}
          $('.left-sidebar').hide();
        {% endif %}
      });
    </script>
    {% compress js %}
      <script src="{{ static('libs/tablesorter.js') }}" type="text/javascript"></script>
      <script type="text/javascript">
        $(function () {
          $.tablesorter.addParser({
            id: 'solvedsort',
            is: function (s) {
              return false;
            },
            format: function (s, table, cell, cellIndex) {
              return $(cell).attr('solved');
            },
            type: 'numeric'
          });

          $('#problem-table').tablesorter({
            headers: {
              0: {
                sorter: 'solvedsort'
              }
            },
            textExtraction: function (node) {
              node = $(node);
              var text = node.text().replace(/^\s+|\s+$/g, '');
              return (node.hasClass('p') ? text.replace(/p$/, '') : text);
            }
          });
        });
      </script>
    {% endcompress %}
  {% endif %}
{% endblock %}

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

{% block right_sidebar %}
  {% if not show_contest_mode %}
    <div id="content-right" class="problems right-sidebar">
      {% include "problem/search-form.html" %}
      {% include "problem/recent-attempt.html" %}
    </div>
  {% endif %}
{% endblock %}