{% extends "common-content.html" %}
{% block content_media %}
    {% include "comments/media-css.html" %}
    <style>
        .title-state {
            font-size: 2em;
            float: left;
            width: 1.1em;
            display: block;
            margin-top: 0.16em;
        }

        .info-float a {
            vertical-align: middle;
        }

        .problem-clarification {
            border-bottom: 1px solid #ccc;
            margin-top: 1em;
            margin-bottom: 1em;
        }

        .clarifications-area h2 {
            margin-bottom: 20px;
        }

        .problem-clarification .body {
            display: inline-block;
            padding-left: 3em;
        }

        #content-right {
            max-width: 12.5em;
            min-width: 12.5em;
        }

        #problem-types, #allowed-langs, #available-judges {
            padding-top: 1em;
        }

        .problem-info-entry {
            padding-top: 0.5em;
        }

        #raw_problem {
            visibility: hidden;
            width: 0;
            height: 0;
        }

        #clarification_header {
            color: red;
            cursor: pointer;
        }
        #clarification_header:hover {
            color: orange;
        }

        #comment-announcement {
            margin-top: 1em;
            background-color: lightgray;
            border-radius: 30px;
            padding: 0.5em;
            text-align: center;
            cursor: pointer;
            color: dimgrey;
            font-weight: bold;
        }

        #comment-announcement:hover {
            background-color: gray;
        }

        #comment-section {
            display: none;
        }
    </style>
{% endblock %}

{% block content_js_media %}
    {% include "comments/media-js.html" %}
    {% if request.in_contest_mode %}
        <script type="text/javascript">
            window.register_contest_notification("{{url('contest_clarification_ajax', request.participation.contest.key)}}");
        </script>
    {% endif %}
    <script type="text/javascript">
        $(function() {
            $('#pdf_button').click(async function(e) {
                e.preventDefault();
                if (!$('#raw_problem').attr('src')) {
                    $('#raw_problem').attr('src', '{{problem.code}}/raw')
                }
                while(!$('.math-loaded', frames['raw_problem'].document).length){
                    await new Promise(r => setTimeout(r, 200)); 
                }
                frames['raw_problem'].print();
            });
            $('#clarification_header').on('click', function() {
                $('#clarification_header_container').hide();
                window.scrollTo(0, document.body.scrollHeight);
            })
            $('#comment-announcement').on('click', function() {
                $('#comment-section').show();
                $('#comment-announcement').hide();
            })

            if (window.location.href.includes('#comment')) {
                $('#comment-announcement').click();
            }
        });
    </script>
{% endblock %}

{% block title_row %}
    <div class="problem-title">
        {% if request.user.is_authenticated %}
            {% if problem.id in completed_problem_ids %}
                <a href="{{ url('user_submissions', problem.code, request.user.username) }}">
                    {% if problem.is_public or request.in_contest_mode %}
                        <i class="solved-problem-color title-state fa fa-check-circle"></i>
                    {% else %}
                        <i class="solved-problem-color title-state fa fa-lock"></i>
                    {% endif %}
                </a>
            {% elif problem.id in attempted_problems %}
                <a href="{{ url('user_submissions', problem.code, request.user.username) }}">
                    {% if problem.is_public or request.in_contest_mode %}
                        <i class="attempted-problem-color title-state fa fa-minus-circle"></i>
                    {% else %}
                        <i class="attempted-problem-color title-state fa fa-lock"></i>
                    {% endif %}
                </a>
            {% endif %}
        {% endif %}
        <h2 style="color:#393630; display: inline-block">{{ title }}</h2>
        {% if problem.is_organization_private %}
            <span class="organization-tags">
                {% for org in problem.organizations.all() %}
                    <span class="organization-tag">
                        <a href="{{ org.get_absolute_url() }}">
                            <i class="fa fa-lock"></i> {{ org.name }}
                        </a>
                    </span>
                {% endfor %}
            </span>
        {% endif %}
        
        <span class="spacer"></span>
        {% if has_render %}
        <a href="{{ url('problem_pdf', problem.code) }}" class="view-pdf">
        {% else %}
        <a id="pdf_button" class="view-pdf" href='#'>
        {% endif %}
            <span class="pdf-icon">
                <span class="fa fa-file-pdf-o pdf-icon-logo"></span>
                <span class="pdf-icon-bar"></span>
            </span>
            {{ _('View as PDF') }}
        </a>
    </div>
{% endblock %}

{% block info_float %}
    {% if request.user.is_authenticated and request.in_contest_mode and submission_limit %}
        {% if submissions_left > 0 %}
            <a href="{{ url('problem_submit', problem.code) }}" class="unselectable button full">
                {{ _('Submit solution') }}
            </a>
            <div class="submissions-left">
                {% trans trimmed counter=submissions_left %}
                    {{ counter }} submission left
                    {% pluralize %}
                    {{ counter }} submissions left
                {% endtrans %}
            </div>
        {% else %}
            <a class="unselectable button full disabled">{{ _('Submit solution') }}</a>
            <div class="no-submissions-left submissions-left">{{ _('0 submissions left') }}</div>
        {% endif %}
    {% else %}
        <a href="{{ url('problem_submit', problem.code) }}" class="unselectable button full">
            {{ _('Submit solution') }}
        </a>
    {% endif %}

    <hr style="padding-bottom: 0.3em">

    {% if request.user.is_authenticated and has_submissions %}
        <div>
            <a href="{{ url('user_submissions', problem.code, request.user.username) }}">{{ _('My submissions') }}</a>
        </div>
    {% endif %}
    <div><a href="{{ url('chronological_submissions', problem.code) }}">{{ _('All submissions') }}</a></div>
    <div><a href="{{ url('ranked_submissions', problem.code) }}">{{ _('Best submissions') }}</a></div>
    {% if editorial and editorial.is_public and 
            not (request.user.is_authenticated and request.in_contest_mode) %}
        <hr>
        <div><a href="{{ url('problem_editorial', problem.code) }}">{{ _('Read editorial') }}</a></div>
    {% endif %}
    {% if can_edit_problem %}
        <hr>
        <div>
            <a href="{{ url('problem_ticket_list', problem.code) }}">{{ _('Manage tickets') }}
                {% if num_open_tickets %}<span class="badge">{{ num_open_tickets }}</span>{% endif %}
            </a>
        </div>
        <div><a href="{{ url('admin:judge_problem_change', problem.id) }}">{{ _('Edit problem') }}</a></div>
        {% if not problem.is_manually_managed %}
            <div><a href="{{ url('problem_data', problem.code) }}">{{ _('Edit test data') }}</a></div>
        {% endif %}
    {% elif request.user.is_authenticated and has_tickets %}
        <hr>
        <div>
            <a href="{{ url('problem_ticket_list', problem.code) }}">{{ _('My tickets') }}
                {% if num_open_tickets %}<span class="badge">{{ num_open_tickets }}</span>{% endif %}
            </a>
        </div>
    {% endif %}

    {% if problem.is_subs_manageable_by(request.user) %}
        <div>
            <a href="{{ url('problem_manage_submissions', problem.code) }}">{{ _('Manage submissions') }}</a>
        </div>
    {% endif %}

    {% if perms.judge.clone_problem %}
        <div>
            <a href="{{ url('problem_clone', problem.code) }}">{{ _('Clone problem') }}</a>
        </div>
    {% endif %}

    <hr style="padding-top: 0.3em">

    <div class="problem-info-entry">
        <i class="fa fa-check fa-fw"></i><span class="pi-name">{{ _('Points:') }}</span>
        <span class="pi-value">
            {% if contest_problem %}
                {{ contest_problem.points }}{% if contest_problem.partial %} {{ _('(partial)') }}{% endif %}
            {% else %}
                {{ problem.points|floatformat }}{% if problem.partial %} {{ _('(partial)') }}{% endif %}
            {% endif %}
        </span>
    </div>
    <div class="problem-info-entry">
        <i class="fa fa-clock-o fa-fw"></i><span class="pi-name">{{ _('Time limit:') }}</span>
        <span class="pi-value">{{ problem.time_limit }}s</span>
    </div>
    <div class="problem-lang-limits">
        {% for name, limit in problem.language_time_limit %}
            <div class="lang-limit">
                <span class="lang-name">{{ name }}</span>
                <span class="lang-tl">{{ limit }}s</span>
            </div>
        {% endfor %}
    </div>
    <div class="problem-info-entry">
        <i class="fa fa-server fa-fw"></i><span class="pi-name">{{ _('Memory limit:') }}</span>
        <span class="pi-value">{{ problem.memory_limit|kbsimpleformat }}</span>
    </div>
    <div class="problem-info-entry">
        <i class="fa fa-file-o fa-fw"></i><span class="pi-name">{{ _('Input:') }}</span>
        <span class="pi-value">
            {{ problem.data_files.fileio_input or _('stdin') }}
        </span>
    </div>
    <div class="problem-info-entry">
        <i class="fa fa-file fa-fw"></i><span class="pi-name">{{ _('Output:') }}</span>
        <span class="pi-value">{{ problem.data_files.fileio_output or _('stdout') }}</span>
    </div>
    <div class="problem-lang-limits">
        {% for name, limit in problem.language_memory_limit %}
            <div class="lang-limit">
                <span class="lang-name">{{ name }}</span>
                <span class="lang-ml">{{ limit|kbsimpleformat }}</span>
            </div>
        {% endfor %}
    </div>

    <hr style="padding-top: 0.7em">

    {% cache 86400 'problem_authors' problem.id LANGUAGE_CODE %}
        {% with authors=problem.authors.all() %}
            {% if authors %}
                <div class="problem-info-entry">
                    <i class="fa fa-pencil-square-o fa-fw"></i><span
                        class="pi-name">{% trans trimmed count=authors|length %}
                    Author:
                    {% pluralize count %}
                    Authors:
                {% endtrans %}</span>
                    <div class="pi-value authors-value">{{ link_users(authors) }}</div>
                </div>
            {% endif %}
        {% endwith %}
    {% endcache %}

    {% if not contest_problem or not contest_problem.contest.hide_problem_tags %}
        <div id="problem-types">
            {% with types=problem.types_list %}
                <div class="toggle closed unselectable">
                    <i class="fa fa-chevron-right fa-fw"></i>{% trans trimmed count=problem.types_list|length %}
                    Problem type
                    {% pluralize count %}
                    Problem types
                {% endtrans %}
                </div>
                <div style="display:none" class="toggled">{{ problem.types_list|join(", ") }}</div>
            {% endwith %}
        </div>
    {% endif %}
    {% if show_languages %}
        <div id="allowed-langs">
            <div class="toggle open unselectable">
                <i class="fa fa-chevron-right fa-fw"></i>{{ _('Allowed languages') }}
            </div>
            <div class="toggled">
                {% with usable=problem.usable_common_names, langs=problem.languages_list() %}
                    {% for lang in langs %}
                        {%- if lang in usable -%}
                            {{ lang }}
                        {%- else -%}
                            <s title="{{ _('No %(lang)s judge online', lang=lang) }}">{{ lang }}</s>
                        {%- endif -%}
                        {% if not loop.last %}, {% endif -%}
                    {% endfor %}
                {% endwith %}
            </div>
        </div>
    {% endif %}
    {% if problem.is_editable_by(request.user) %}
        <div id="available-judges">
            <i class="fa fa-database fa-fw"></i><span
                class="pi-name">{% trans trimmed count=available_judges|length %}
                Judge:
                {% pluralize count %}
                Judges:
            {% endtrans %}
            </span>
            <div class="pi-value judges-value">
                {% if available_judges %}
                    {% if perms.judge.change_judge %}
                        {% for judge in available_judges %}
                            <a href="{{ url('admin:judge_judge_change', judge.id) }}">{{ judge.name }}</a>
                            {%- if not loop.last %}, {% endif %}
                        {% endfor %}
                    {% else %}
                        {{ available_judges|join(", ") }}
                    {% endif %}
                {% else %}
                    <i>{{ _('none available') }}</i>
                {% endif %}
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block description %}
    {% if contest_problem and contest_problem.contest.use_clarifications and has_clarifications %}
        <div id="clarification_header_container">
            <i class="fa fa-question-circle"></i>
            <a id="clarification_header">
                {% trans trimmed length=clarifications|length %}
                This problem has {{length}} clarification(s)
                {% endtrans %}
            </a>
        </div>
    {% endif %}

    {% cache 86400 'problem_html' problem.id MATH_ENGINE LANGUAGE_CODE %}
        {{ description|markdown("problem", MATH_ENGINE)|reference|str|safe }}
    {% endcache %}

    {% with license=problem.license %}
        {% if license %}
            <span class="license">
            <a href="{{ url('license', license.key) }}">{{ license.display or license.name }}</a>
        </span>
        {% endif %}
    {% endwith %}
{% endblock %}

{% block post_description_end %}
    {% if request.user.is_authenticated and not request.profile.mute %}
        <a href="{{ url('new_problem_ticket', problem.code) }}" class="clarify">
            <i class="fa fa-flag" style="margin-right:0.5em"></i>
            {%- if contest_problem and contest_problem.contest.use_clarifications and request.profile.current_contest.live -%}
                {{ _('Request clarification') }}
            {%- else -%}
                {{ _('Report an issue') }}
            {%- endif -%}
        </a>
        <div style="clear: both"></div>
    {% endif %}
    {% if not (contest_problem and contest_problem.contest.use_clarifications) %}
        <div id="comment-announcement-container">
            <div id="comment-announcement">
                {% if has_comments %}
                    {{_('View comments')}} ({{comment_list.count()}})
                {% else %}
                    {{_('Be the first to comment')}}
                {% endif %}
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block comments %}
    {% if contest_problem and contest_problem.contest.use_clarifications %}
        <div class="clarifications-area">
            <h2><i class="fa fa-question-circle"></i> {{ _('Clarifications') }}</h2>
            {% if has_clarifications %}
                {% for clarification in clarifications %}
                    <div class="problem-clarification">
                        <div class="time">{{ relative_time(clarification.date) }}</div>
                        <span class="body">
                            {{ clarification.description|markdown('problem', MATH_ENGINE)|reference }}
                        </span>
                    </div>
                {% endfor %}
            {% else %}
                <p class="no-comments-message">{{ _('No clarifications have been made at this time.') }}</p>
            {% endif %}
        </div>
    {% else %}
        <div id="comment-section">
            {% include "comments/list.html" %}
        </div>
    {% endif %}
    <iframe name="raw_problem" id="raw_problem"></iframe>
{% endblock %}

{% block bodyend %}
    {{ super() }}
    {% include "comments/math.html" %}
{% endblock %}