{% 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() %}
          {% include "organization/tag.html" %}
        {% 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 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-paper-plane"></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-paper-plane"></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-paper-plane"></i>
        </div>
      </button>
    </a>
  {% endif %}

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

  {% if request.user.is_authenticated and has_submissions %}
    <div class="link-row">
      <a href="{{url('user_submissions', problem.code, request.user.username) }}">
        <i class="fa fa-address-book"></i><span> {{ _('My submissions') }}</span>
      </a>
    </div>
  {% endif %}
  <div class="link-row">
    <a href="{{ url('chronological_submissions', problem.code) }}">
      <i class="fa fa-rectangle-list"></i><span> {{ _('All submissions') }}</span>
    </a>
  </div>
  <div class="link-row">
    <a href="{{ url('ranked_submissions', problem.code) }}">
      <i class="fa fa-list-check"></i><span> {{ _('Best submissions') }}</span>
    </a>
  </div>
  {% if editorial and editorial.is_public and not (request.user.is_authenticated and request.in_contest_mode) %}
    <hr>
    <div class="link-row">
      <a href="{{ url('problem_editorial', problem.code) }}">
        <i class="fa fa-newspaper"></i><span> {{ _('Read editorial') }}</span>
      </a>
    </div>
  {% endif %}

  {% if can_edit_problem %}
    <hr>
    <div class="link-row">
      <a href="{{ url('problem_ticket_list', problem.code) }}">
        <i class="fa fa-clipboard-list"></i><span> {{ _('Manage tickets') }}
          {% if num_open_tickets %}<span class="badge">{{ num_open_tickets }}</span>{% endif %}
        </span>
      </a>
    </div>
    <div class="link-row">
      <a href="{{ url('admin:judge_problem_change', problem.id) }}">
        <i class="fa fa-edit"></i><span> {{ _('Edit problem') }}</span>
      </a>
    </div>
    {% if not problem.is_manually_managed %}
      <div class="link-row">
        <a href="{{ url('problem_data', problem.code) }}">
          <i class="fa fa-database"></i><span> {{ _('Edit test data') }}</span>
        </a>
      </div>
    {% endif %}
  {% elif request.user.is_authenticated and has_tickets %}
    <hr>
    <div class="link-row">
      <a href="{{ url('problem_ticket_list', problem.code) }}">
        <i class="fa fa-inbox"></i><span> {{ _('My tickets') }}
          {% if num_open_tickets %}<span class="badge">{{ num_open_tickets }}</span>{% endif %}
        </span>
      </a>
    </div>
  {% endif %}

  {% if problem.is_subs_manageable_by(request.user) %}
    <div class="link-row">
      <a href="{{ url('problem_manage_submissions', problem.code) }}">
        <i class="fas fa-table"></i><span> {{ _('Manage submissions') }}</span>
      </a>
    </div>
  {% endif %}

  {% if perms.judge.clone_problem %}
    <div class="link-row">
      <a href="{{ url('problem_clone', problem.code) }}">
        <i class="fas fa-clone"></i><span> {{ _('Clone problem') }}</span>
      </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"></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"></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">

  {% with authors=problem.get_authors() %}
    {% if authors %}
      <div class="problem-info-entry">
        <i class="far fa-pen-to-square"></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 %}

  {% 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"></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"></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"></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"></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"></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"></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"></i><span class="pi-name"> {{ _('Input:') }}</span>
      <span class="new-pi-value">
        {{ fileio_input or _('stdin') }}
      </span>
    </span>

    <span>
      <i class="fa fa-file"></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 %}