{% extends "user/base-users.html" %}

{% block title_ruler %}{% endblock %}

{% block title_row %}
    {% set title = contest.name %}
    {% include "contest/contest-tabs.html" %}
{% endblock %}

{% block users_media %}
    <link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
    {% include "contest/ranking-css.html" %}
{% endblock %}

{% block users_js_media %}
    {% if can_edit %}
        <script type="text/javascript">
            $(function () {
                $('a.disqualify-participation').click(function (e) {
                    e.preventDefault();
                    if (e.ctrlKey || e.metaKey || confirm("{{ _('Are you sure you want to disqualify this participation?') }}"))
                        $(this).closest('form').submit();
                })
                $('a.un-disqualify-participation').click(function (e) {
                    e.preventDefault();
                    if (e.ctrlKey || e.metaKey || confirm("{{ _('Are you sure you want to un-disqualify this participation?') }}"))
                        $(this).closest('form').submit();
                })
            });
        </script>
    {% endif %}
    {% if perms.judge.change_contestparticipation %}
        <script type="text/javascript">
            $(function () {
                $('td.user').find('a.user-name').click(function (e) {
                    var data = $(this).siblings('.edit-participation');
                    if (e.altKey && data.length) {
                        window.open(data.attr('data-link'), '_blank');
                        return false;
                    }
                });
            });
        </script>
    {% endif %}
    {% if not contest.ended %}
        <script type="text/javascript">
            $(function () {
                window.install_tooltips = function () {
                    $('td.user').find('a.user-name').each(function () {
                        var link = $(this);
                        link.mouseenter(function (e) {
                            var start_time = link.siblings('.start-time').text();
                            link.addClass('tooltipped tooltipped-e').attr('aria-label', start_time);
                        }).mouseleave(function (e) {
                            link.removeClass('tooltipped tooltipped-e').removeAttr('aria-label');
                        });
                    });
                };

                install_tooltips();
            });
        </script>
    {% endif %}
    {% if tab == 'ranking' %}
        <script type="text/javascript">
            $.fn.ignore = function(sel) {
                return this.clone().find(sel || '>*').remove().end();
            };

            function download_ranking_as_csv() {
                function clean_text(text) {
                    // Remove new line and leading/trailing spaces
                    text = text.replace(/(\r\n|\n|\r)/gm, '').trim();
                    // Escape double-quote with double-double-quote
                    text = text.replace(/"/g, '""');

                    return '"' + text + '"';
                }

                var csv = [];

                $('table#users-table thead tr').each(function () {
                    var header = [];
                    $(this).find('th').each(function () {
                        var $col = $(this);

                        if ($col.hasClass('rating-column')) {
                            return;
                        } else if ($col.hasClass('problem-score-col')) {
                            header.push(clean_text($col.find('.problem-code').text()));
                        } else {
                            header.push(clean_text($col.text()));
                        }
                    });
                    csv.push(header.join(','));
                });

                $('table#users-table tbody tr').each(function () {
                    var row_data = [];

                    $(this).find('td').each(function () {
                        var $col = $(this);
                        if ($col.hasClass('rating-column')) {
                            return;
                        } else if ($col.hasClass('user-name')) {
                            row_data.push(clean_text($col.ignore('.fullname').ignore('.organization').text()));
                            row_data.push(clean_text($col.ignore('.user').ignore('.organization').text()));
                        } else {
                            row_data.push(clean_text($col.ignore('.solving-time').text()));
                        }
                    });
                    csv.push(row_data.join(','));
                });

                csv = csv.join('\n');
                var filename = '{{ contest.key }}_' + moment().format('MMMM Do YYYY, h:mm:ss a'); + '.csv';
                var link = document.createElement('a');
                link.style.display = 'none';
                link.setAttribute('target', '_blank');
                link.setAttribute('href', 'data:text/csv;charset=utf-8,\uFEFF' + encodeURIComponent(csv));
                link.setAttribute('download', filename);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        </script>
    {% endif %}
    {% include "contest/media-js.html" %}
{% endblock %}

{% block users_table %}
    <div style="margin-bottom: 0.5em">
        {% if tab == 'participation' %}
            {% if contest.can_see_full_scoreboard(request.user) %}
                <input id="search-contest" type="text" placeholder="{{ _('View user participation') }}">
            {% endif %}
        {% endif %}
        <input id="show-organizations-checkbox" type="checkbox" style="vertical-align: bottom">
        <label for="show-organizations-checkbox" style="vertical-align: bottom; margin-right: 1em;">{{ _('Show organizations') }}</label>
    
        <input id="show-fullnames-checkbox" type="checkbox" style="vertical-align: bottom">

        <label for="show-fullnames-checkbox" style="vertical-align: bottom; margin-right: 1em;">{{ _('Show full name') }}</label>
        {% if request.user.is_authenticated %}
        <input id="show-friends-checkbox" type="checkbox" style="vertical-align: bottom;">
        <label for="show-friends-checkbox" style="vertical-align: bottom; margin-right: 1em;">{{ _('Show friends only') }}</label>
        {% endif %}
        <input id="show-total-score-checkbox" type="checkbox" style="vertical-align: bottom; ">
        <label for="show-total-score-checkbox" style="vertical-align: bottom; margin-right: 1em;">{{ _('Total score only') }}</label>
        <input id="show-virtual-checkbox" type="checkbox" style="vertical-align: bottom;">
        <label id="show-virtual-label" for="show-virtual-checkbox" style="vertical-align: bottom; margin-right: 1em;">{{ _('Show virtual participation') }}</label>
        <img src="{{static('loading.gif')}}" style="height: 1em; display:none;" id="loading-gif"></img>
        <a href="#" onclick="download_ranking_as_csv()" style="float: right;">
            <i class="fa fa-download" aria-hidden="true"></i>
            {{ _('Download as CSV') }}
        </a>
    </div>
    {% include "contest/ranking-table.html" %}
{% endblock %}