{% extends "common-content.html" %}

{% set has_hidden_subtasks = request.in_contest_mode and request.participation.contest.format.has_hidden_subtasks %}

{% 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;
    }

    .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;
    }

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

{% block content_js_media %}
  {% include "comments/media-js.html" %}
  {% include "actionbar/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')
          $('#raw_problem').on('load', function() {
            renderKatex(frames['raw_problem'].document);
            setTimeout(() => {
              frames['raw_problem'].print();
            }, 500);
          });
        }
        else {
          frames['raw_problem'].print();
          return;
        }
      });
      $('#clarification_header').on('click', function() {
        $('#clarification_header_container').hide();
        window.scrollTo(0, document.body.scrollHeight);
      })

      if (window.location.href.includes('#comment')) {
        $('#comment-section').show();
      }

      {% if not available_judges %}
        $('#judge-toggle').click();
      {% endif %}
    });
  </script>
{% endblock %}

{% block title_row %}
  <div class="problem-title">
    {% if request.user.is_authenticated and not has_hidden_subtasks %}
      {% 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 class="title-row" style="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" target="_blank">
    {% elif problem.pdf_description %}
      <a href="{{ url('problem_pdf_description', problem.code) }}" class="view-pdf" target="_blank">
    {% 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) }}">
        <button class="btn-green btn btn-primary btn-block btn-round">
          <span>{{ _('Submit') }}</span>
          <div class="icon icon-round d-flex align-items-center justify-content-center">
            <i class="fa fa-send"></i>
          </div>
        </button>
      </a>
      <div class="submissions-left">
        {% trans trimmed counter=submissions_left %}
          {{ counter }} submission left
          {% pluralize %}
          {{ counter }} submissions left
        {% endtrans %}
      </div>
    {% else %}
      <button class="btn btn-disabled btn-block btn-round">
        <span>{{ _('Submit') }}</span>
        <div class="icon icon-round d-flex align-items-center justify-content-center">
          <i class="fa fa-send"></i>
        </div>
      </button>
      <div class="no-submissions-left submissions-left">{{ _('0 submissions left') }}</div>
    {% endif %}
  {% else %}
    <a href="{{ url('problem_submit', problem.code) }}">
      <button class="btn-green btn btn-primary btn-block btn-round">
        <span>{{ _('Submit') }}</span>
        <div class="icon icon-round d-flex align-items-center justify-content-center">
          <i class="fa fa-send"></i>
        </div>
      </button>
    </a>
  {% endif %}

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

  {% if request.user.is_authenticated and has_submissions %}
    <div>
      <a class="a-problem" href="{{ url('user_submissions', problem.code, request.user.username) }}">{{ _('My submissions') }}</a>
    </div>
  {% endif %}
  <div><a class="a-problem" href="{{ url('chronological_submissions', problem.code) }}">{{ _('All submissions') }}</a></div>
  <div><a class="a-problem" 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 class="a-problem" href="{{ url('problem_editorial', problem.code) }}">{{ _('Read editorial') }}</a></div>
{% endif %}
{% if can_edit_problem %}
  <hr>
  <div>
    <a class="a-problem" 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 class="a-problem" href="{{ url('admin:judge_problem_change', problem.id) }}">{{ _('Edit problem') }}</a></div>
  {% if not problem.is_manually_managed %}
    <div><a class="a-problem" href="{{ url('problem_data', problem.code) }}">{{ _('Edit test data') }}</a></div>
  {% endif %}
{% elif request.user.is_authenticated and has_tickets %}
  <hr>
  <div>
    <a class="a-problem" 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 class="a-problem" href="{{ url('problem_manage_submissions', problem.code) }}">{{ _('Manage submissions') }}</a>
  </div>
{% endif %}

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

{% if problem.language_time_limit or problem.language_memory_limit %}
  <hr style="padding-top: 0.3em">
{% endif %}
{% if problem.language_time_limit %}
  <div class="problem-info-entry">
    <i class="fa fa-clock-o fa-fw"></i><span class="pi-name">{{ _('Time limit:') }}</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>
{% endif %}
{% if problem.language_memory_limit %}
  <div class="problem-info-entry">
    <i class="fa fa-server fa-fw"></i><span class="pi-name">{{ _('Memory limit:') }}</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>
{% endif%}

<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">
    <div class="toggle closed" id="judge-toggle">
      <i class="fa fa-chevron-right fa-fw"></i><span
        class="pi-name">{% trans trimmed count=available_judges|length %}
          Judge
          {% pluralize count %}
          Judges
        {% endtrans %}
      </span>
    </div>
    <div class="pi-value judges-value toggled" style="display: none;">
      {% 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 class="red">{{ _('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 %}
  <div class = "new-problem-info d-flex-problem">
    <span class="info-block">
      <i class="fa fa-check fa-fw"></i><span class="pi-name">{{ _('Points:') }}</span>
      <span class="new-pi-value">
        {% if contest_problem %}
          {{ contest_problem.points }} {% if contest_problem.partial %}(p){% endif %}
        {% else %}
          {{ problem.points|floatformat }} {% if problem.partial %}(p){% endif %}
        {% endif %}
      </span>
    </span>

    <span class="info-block">
      <i class="fa fa-clock-o fa-fw"></i><span class="pi-name">{{ _('Time limit:') }}</span>
      <span class="new-pi-value">{{ problem.time_limit }}s</span>
    </span>

    <span class="info-block">
      <i class="fa fa-server fa-fw"></i><span class="pi-name">{{ _('Memory limit:') }}</span>
      <span class="new-pi-value">{{ problem.memory_limit|kbsimpleformat }}</span>
    </span>

    <span class="info-block">
      <i class="fa fa-file-o fa-fw"></i><span class="pi-name">{{ _('Input:') }}</span>
      <span class="new-pi-value">
        {{ fileio_input or _('stdin') }}
      </span>
    </span>

    <span>
      <i class="fa fa-file fa-fw"></i><span class="pi-name">{{ _('Output:') }}</span>
      <span class="new-pi-value">{{ fileio_output or _('stdout') }}</span>
    </span>
  </div>

  {% cache 86400 'problem_html' problem.id LANGUAGE_CODE %}
    {{ description|markdown(lazy_load=True)|reference|str|safe }}
  {% endcache %}

  {% if problem.pdf_description %}
    <embed src="{{url('problem_pdf_description', problem.code)}}" width="100%" height="500" type="application/pdf">
  {% endif %}

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

{% block post_description_end %}
  {% if request.user.is_authenticated and not request.profile.mute %}
    {%- if contest_problem and contest_problem.contest.use_clarifications and request.profile.current_contest.live -%}
      <a href="{{ url('new_problem_ticket', problem.code) }}" class="clarify">
        <i class="fa fa-flag" style="margin-right:0.5em"></i>
        {{ _('Request clarification') }}
      </a>
      <div style="clear: both"></div>
    {%- else -%}
      {% set actionbar_report_url = url('new_problem_ticket', problem.code) %}
      {% include "actionbar/list.html" %}
      <br>
    {%- endif -%}
  {% 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|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 %}
  {% include "problem/related_problems.html" %}
  <iframe name="raw_problem" id="raw_problem"></iframe>
{% endblock %}

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