{% extends "layout/basic.html" %}
{% block content %}
{{ set(UiContext, 'codeTemplates', codeTemplates|default({})) }}
{{ set(UiContext, 'editLangs', model.setting.langs) }}
<div class="row">
  <div class="medium-9 columns">
    <div class="section">
      <div class="section__body">
        <form method="post">
          <div class="form-card">
            <div class="form-card__title"><span class="icon icon-file"></span>{{ _('Problem details') }}</div>
            <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'] or ''
               }) }}
            </div>
          </div>
          <div class="form-card form-card--schedule">
            <div class="form-card__title"><span class="icon icon-schedule"></span>{{ _('Availability and exam') }}</div>
            <div class="row">
              <div class="medium-6 columns">
                <label class="material textbox-container">
                  {{ _('Available from') }}
                  <input type="datetime-local" name="availableFrom" class="textbox" value="{{ availableFrom|default('') }}">
                </label>
              </div>
              <div class="medium-6 columns">
                <label class="material textbox-container">
                  {{ _('Available until') }}
                  <input type="datetime-local" name="availableUntil" class="textbox" value="{{ availableUntil|default('') }}">
                </label>
              </div>
            </div>
            <div class="row"><div class="columns">
              <label class="checkbox">
                <input type="checkbox" name="examMode" value="true"{% if examMode %} checked{% endif %}> {{ _('Exam mode (disable pasting code in the editor)') }}
              </label>
              <p class="help-text">{{ _('Scheduled open/close and exam mode only apply to students; teachers always see the problem.') }}</p>
            </div></div>
          </div>
          <div class="form-card">
            <div class="form-card__title"><span class="icon icon-help"></span>{{ _('Hints and template') }}</div>
            <div class="row"><div class="columns">
              <label class="material textbox-container">
                {{ _('Hints') }}
                <textarea name="hints" class="textbox form-textarea form-textarea--md" placeholder="{{ _('hints_placeholder') }}">{{ hintsText|default('') }}</textarea>
              </label>
              <p class="help-text">{{ _('hints_help') }}</p>
            </div></div>
            <div class="row"><div class="columns">
              <label class="material textbox-container">
                {{ _('Code template') }}
                <textarea name="codeTemplate" class="textbox form-textarea form-textarea--code" placeholder="{{ _('code_template_help') }}">{{ codeTemplate|default('') }}</textarea>
              </label>
              <p class="help-text">{{ _('code_template_default_help') }}</p>
            </div></div>
            <div class="row"><div class="columns">
              <label class="material textbox-container">{{ _('Per-language templates') }}</label>
              <p class="help-text">{{ _('per_language_template_help') }}</p>
              <div id="code-templates" class="code-templates nojs--hide">
                <div class="code-templates__bar">
                  <select id="ct-lang" class="select inline compact"></select>
                  <button type="button" id="ct-save" class="compact button">{{ _('Set template for language') }}</button>
                </div>
                <textarea id="ct-textarea" class="textbox form-textarea form-textarea--code" placeholder="{{ _('code_template_help') }}"></textarea>
                <ul id="ct-list" class="code-templates__list"></ul>
              </div>
              <input type="hidden" name="codeTemplates" id="ct-hidden" value="">
            </div></div>
          </div>
          <div class="form-card">
            <div class="form-card__title"><span class="icon icon-book"></span>{{ _('Statement') }}</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 statementLangs %}{% 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 form-textarea form-textarea--statement" data-markdown-upload>{% if pdoc %}{{ pdoc['content']|toString }}{% else %}{% include 'partials/problem_default.md' %}{% endif %}</textarea>
          </div>
          <div class="form-actions">
          {% 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>
        </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" data-type="additional_file" data-sidebar>
        <div class="section__header">
          <h1 class="section__title">{{_('Additional Files')}}</h1>
          <div class="section__tools">
            <button class="primary rounded button" name="upload_file">{{ _('Upload') }}</button>
          </div>
        </div>
        {% 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 %}