{% extends "layout/basic.html" %}
{% block content %}
<div class="row">
  <div class="medium-9 columns">
    <div class="section">
      <div class="section__body">
        <form method="post">
          <div class="row">
            <div class="medium-3 columns">
              <label>
                {{ _('pid') }}
                <br>
                <label>
                  <input name="pid" placeholder="P1000" value="{{ pdoc['pid']|default('') }}" class="textbox">
                </label>
              </label>
            </div>
            <div class="medium-7 columns">
              <label>
                {{ _('Title') }}
                <input name="title" placeholder="{{ _('title') }}" value="{{ pdoc['title']|default('') }}" class="textbox"{% if page_name == 'problem_create' %} autofocus{% endif %}>
              </label>
            </div>
            <div class="medium-2 columns">
              <label>
                <br>
                <label class="checkbox">
                  <input type="checkbox" name="hidden" value="on"{% if pdoc['hidden'] %} checked{% endif %} class="checkbox">{{ _('Hidden') }}
                </label>
              </label>
            </div>
          </div>
          <div class="row">
          {{ form.form_text({
               row:false,
               columns:9,
               label:'Tags',
               help_text:'Split by \', \'.',
               name:'tag',
               value:pdoc['tag']|default([])|join(', ')
             }) }}
          {{ form.form_text({
               row:false,
               columns:3,
               label:'Difficulty',
               help_text:'From 1-10',
               name:'difficulty',
               value:pdoc['difficulty']
             }) }}
          </div>
          <div class="section__tab-container nojs--hide">
          <div class="section__tab-header-wrapper">
            <ul class="section__tab-header">
              <li class="section__tab-header-item tab--active" data-lang="{{ _('__id') }}">{{ _('__langname') }}</li>
              {% for k, v in model.setting.SETTINGS_BY_KEY['viewLang'].range %}
                {% if k != handler.user.viewLang %}
                  <li class="section__tab-header-item" data-lang="{{ k }}">{{ v }}</li>
                {% endif %}
              {% endfor %}
            </ul>
          </div>
          </div>
          <div><textarea data-editor{% if page_name == 'problem_edit' %} autofocus{% endif %} class="textbox auto-resize nojs--hide"></textarea></div>
          <textarea name="content" class="textbox hasjs--hide" data-markdown-upload style="height: 500px">{% if pdoc %}{{ pdoc['content']|toString }}{% else %}{% include 'partials/problem_default.md' %}{% endif %}</textarea>
          <div class="row"><div class="columns">
          {% if page_name == 'problem_edit' %}
            <button type="submit" class="rounded primary button">
              {{ _('Update') }}
            </button>
            {% if handler.user.own(pdoc, perm.PERM_EDIT_PROBLEM_SELF) or handler.user.hasPerm(perm.PERM_EDIT_PROBLEM) %}
              <button name="operation" value="delete" type="submit" class="rounded button">
                {{ _('Delete') }}
              </button>
            {% endif %}
          {% else %}
            <button type="submit" class="rounded primary button">
              {{ _('Create') }}
            </button>
          {% endif %}
          </div></div>
        </form>
      </div>
    </div>
  </div>
  <div class="medium-3 columns">
    <div class="section side visiable nojs--hide section--problem-sidebar-tags">
      <div class="section__header">
        <h1 class="section__title">{{ _('Categories') }} ({{ _('click to add') }})</h1>
      </div>
      <div class="section__body problem-sidebar-tags__detail">
        {% include "partials/category.html" %}
      </div>
    </div>
    {% if page_name == 'problem_edit' %}
      <div class="section side">
        <div class="section__header">
          <h1 class="section__title">{{ additional_file.length|default(0) }} {{_('Additional File')}}</h1>
        </div>
        <ol class="menu">
          <li class="menu__item flex-row">
            <a class="menu__link half" href="javascript:;" name="additional_file__upload">
              <span class="icon icon-upload"></span> {{ _('Upload') }}
            </a>
            <a class="menu__link half" href="javascript:;" name="additional_file__download">
              <span class="icon icon-download"></span> {{ _('Download All') }}
            </a>
          </li>
        </ol>
        {% set sidebar = true %}
        {% set can_edit = true %}
        {% set filetype = "additional_file" %}
        {% include "partials/problem_files.html" %}
      </div>
      {% include "partials/problem_sidebar.html" %}
    {% else %}
      {% include 'components/md_hint.html' %}
    {% endif %}
  </div>
</div>
{% endblock %}