{% import "components/record.html" as record with context %}
{% import "components/problem.html" as problem with context %}
{% extends "layout/basic.html" %}
{% block content %}
  {{ set(UiContext, {
      getProblemUrlWithCategory: url('problem_category', category='{category}'),
      getProblemUrlWithoutCategory: url('problem_main'),
      currentCategory: category
  }) }}
  <div class="row">
    <div class="medium-9 columns">
      <div class="section">
        <div class="section__body no-padding">
          {% include "partials/problem_list.html" %}
        </div>
      </div>
    </div>
    <div class="medium-3 columns">
      {% if handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) %}
        <div class="section side">
          <ol class="menu">
            <a href="javascript:;" class="menu__link edit-mode-hide" name="enter-edit-mode">
              <span class="icon icon-edit"></span>
              {{ _('Enter Edit Mode') }}
            </a>
            <a href="javascript:;" class="menu__link display-mode-hide" name="leave-edit-mode">
              <span class="icon icon-edit"></span>
              {{ _('Leave Edit Mode') }}
            </a>
            {% if pdocs.length %}
              <a href="javascript:;" class="menu__link display-mode-hide" name="hide_selected_problems">
                <span class="icon icon-close"></span>
                {{ _('Hide Selected') }}
              </a>
              <a href="javascript:;" class="menu__link display-mode-hide" name="unhide_selected_problems">
                <span class="icon icon-check"></span>
                {{ _('Unhide Selected') }}
              </a>
              <a href="javascript:;" class="menu__link display-mode-hide" name="remove_selected_problems">
                <span class="icon icon-delete"></span>
                {{ _('Remove Selected') }}
              </a>
            {% endif %}
          </ol>
        </div>
      {% endif %}
      <div class="section side">
        <div class="section__header edit-mode-hide">
          <h1 class="section__title">{{ _('Categories') }}</h1>
        </div>
        <div class="section__body">
          {% include "partials/category.html" %}
        </div>
        <div class="section__body edit-mode-hide">
          {% include "partials/problem_lucky.html" %}
        </div>
      </div>
      <div class="section side">
        <div class="section__header">
          <h1 class="section__title">{{ _('Search') }}</h1>
        </div>
        <form method="get" action="{{ url('problem_main') }}">
          <div class="section__body">
            <label>
              <input name="q" type="text" class="textbox" value="{{ category }}" placeholder="1001">
            </label>
            <button type="submit" id="search" class="primary button">{{ _('Search') }}</button>
          </div>
        </form>
      </div>
      {% if handler.user.hasPerm(perm.PERM_CREATE_PROBLEM) %}
        <div class="section side">
          <div class="section__header">
            <h1 class="section__title">{{ _('Create Problem') }}</h1>
          </div>
          <ol class="menu">
            {%- for item in ui.nodes.problem_add -%}
              <a href="{{ url(item.name, item.args) }}" class="menu__link">
                <span class="icon icon-{{ item.icon|default('add') }}"></span>
                {{ _(item.text) }}
              </a>
            {%- endfor -%}
          </ol>
          <div class="section__body">
            <div class="typo supplementary">
              <p>{{ _('You have permissions to create problems for this domain.') }}</p>
            </div>
          </div>
        </div>
      {% endif %}
      <div class="section side">
        <div class="section__header">
          <h1 class="section__title">{{ _('Statistics') }}</h1>
        </div>
        {% include "partials/problem_stat.html" %}
      </div>
    </div>
  </div>
{% endblock %}