{% 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 request.in_contest_mode %}
        <style>
            #search-org, #search-author {
                width: 100%;
            }
            #problem-table th {
                padding: 0;
            }
            a.hot-problem-link:hover > .hot-problem-count {
                visibility: visible;
            }
            span.hot-problem-count {
                color: #555;
                font-size: 0.75em;
                vertical-align: super;
                visibility: hidden;
                padding-left: 0.25em;
                position: relative;
            }
            ul.problem-list {
                padding: 0 !important;
            }
            #content {
                width: 99%;
                margin-left: 0;
            }
            .volunteer-types {
                width: 100%;
            }
            .point-input {
                height: 2em;
                padding-top: 4px;
            }
        </style>
    {% endif %}
{% endblock %}

{% block three_col_js %}
    <script>
        window.point_start = {{point_start}};
        window.point_end = {{point_end}};
        window.point_values = {{point_values|json|safe}};
    </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 clear_point_interval() {
                    if ($('#search').val() !== "{{ search_query or '' }}") {
                        $('#point-start').remove();
                        $('#point-end').remove();
                    }
                }

                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').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') %}
                    $(".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 request.in_contest_mode %}
        {% 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);
                        }
                    });
                    window.register_contest_notification("{{url('contest_clarification_ajax', request.participation.contest.key)}}");

                    {% if request.in_contest_mode %}
                        $('.left-sidebar').hide();
                        if (window.matchMedia('(min-width: 800px)').matches) {
                            $('.middle-content').css('max-width', '80%');
                        }                        
                    {% endif %}
                });
            </script>
        {% endcompress %}
    {% endif %}
{% endblock %}

{% block left_sidebar %}
    {% if not request.in_contest_mode %}
        <div class="left-sidebar">
            {{ make_tab_item('feed', 'fa fa-pagelines', url('problem_feed'), _('Feed')) }}
            {{ make_tab_item('list', 'fa fa-list', url('problem_list'), _('List')) }}
            {{ make_tab_item('admin', 'fa fa-edit', url('admin:judge_problem_changelist'), _('Admin')) }}
        </div>
    {% endif %}
{% endblock %}

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