{# Adapted from @hydrooj/ui-default 4.58.5; AGPL-3.0. See NOTICE.md. #}
{% import "components/record.html" as record with context %}
{% import "components/problem.html" as problem with context %}
{% extends "layout/basic.html" %}
{% block content %}
  <div class="row">
    <div class="medium-9 columns">
      <div class="section display-mode">
        <div class="section__body no-padding">
          <form method="get" id="searchForm" action="{{ url('problem_main') }}">
            <div class="search">
              <input name="q" type="search" value="{{ qs }}" placeholder="搜索题号、题名或知识点" aria-label="搜索题目">
              {% include "partials/problem_stat.html" %}
              <select name="sort" class="search-sort" aria-label="题目排序">
                {%- for sortType in ["default", "recent"] -%}
                  <option value="{{ sortType }}" {{ "selected" if sort == sortType else "" }}>{{ _('sort::' + sortType) }}</option>
                {%- endfor -%}
              </select>
              <button type="submit" aria-label="搜索题目">
                <span class="icon icon-search"></span>
              </button>
            </div>
          </form>
          <div class="turing-filter-bar"><span class="turing-filter-value" data-turing-filter-value>{% if qs %}当前条件：{{ qs }}{% else %}全部题目 · 按知识点、难度与来源筛选{% endif %}</span><a href="/p">清除条件</a><button type="button" class="button compact turing-filter-toggle nojs--hide" data-turing-toggle="turing-filters" aria-controls="turing-filters" aria-expanded="false">筛选题目</button></div>
        </div>
        <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 nojs--hide">
          <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>
            <div id="problem_selection" class="display-mode-hide"></div>
            {% if handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) %}
              <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="download_selected_problems">
                <span class="icon icon-download"></span>
                {{ _('Download Selected') }}
              </a>

            {% endif %}

          </ol>
        </div>
      {% endif %}
      {% 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.getNodes('ProblemAdd') -%}
              <a href="{{ url(item.name, item.args) }}" class="menu__link">
                <span class="icon icon-{{ item.args.icon|default('add') }}"></span>
                {{ _(item.args.text) }}
              </a>
            {%- endfor -%}
          </ol>
          <div class="section__body">
            <div class="typo supplementary">
              <p>{{ _('You have permission to create problems for this domain.') }}</p>
            </div>
          </div>
        </div>
      {% endif %}
      <div class="section side turing-filter-panel" id="turing-filters" data-turing-panel aria-label="题目分类筛选">
        <div class="turing-drawer-heading"><strong>FILTER / 题目筛选</strong><button type="button" class="button" data-turing-close aria-label="关闭筛选">关闭 ×</button></div>
        <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>
  </div>
{% endblock %}