{% extends "wiki/base.html" %}
{% from "includes/common_macros.html" import for_contributors_sidebar %}
{% from "layout/errorlist.html" import errorlist %}
{% from "includes/common_macros.html" import content_editor with context %}
{% from "wiki/includes/document_macros.html" import submit_revision %}
{% set title = _('Create a New Article | Knowledge Base') %}
{# TODO: Change KB url to landing page when we have one #}
{% set crumbs = [(None, _('New Article'))] %}
{% set classes = 'new' %}
{# Always include "switching-devices" because there's no way to predict when it's really needed. #}
{% set scripts = ('wiki', 'wiki.editor', 'switching-devices') %}
{% set ga_content_group = "kb-cms" %}

{% block content %}
  <div class="grid_9">
    <article id="edit-document">
      <h1 class="sumo-page-heading">{{ _('Create a New Knowledge Base Article') }}</h1>
      <div id="document-form">
        {{ errorlist(document_form) }}
        {{ errorlist(revision_form) }}
        <form action="" method="post" data-json-url="{{ url('wiki.json') }}" id="id_new_document_form">
          {% csrf_token %}
          <ul>
            {% if in_staff_group(request.user) %}
            <li class="mzp-c-emphasis-box field has-large-textarea">
              <fieldset>
                  <legend>{{ _("Restrict Visibility") }}</legend>
                  <span class="field has-large-textarea {% if document_form.restrict_to_groups.errors %}has-error{% endif %}">
                    {{ document_form.restrict_to_groups|label_with_help }}
                    {{ document_form.restrict_to_groups }}
                    {{ document_form.restrict_to_groups.errors }}
                  </span>
              </fieldset>
            </li>
            {% endif %}
            {% for field in document_form.visible_fields() if (field.name != 'restrict_to_groups') and (field.name != 'is_localizable' or settings.WIKI_DEFAULT_LANGUAGE == request.LANGUAGE_CODE) %}
              <li class="
                  field
                  has-large-textarea
                  {% if field.name in ['allow_discussion', 'is_localizable'] %}checkbox{% endif %}
                  {% if field.errors %}has-error{% endif %}">
                {# manually reorder checkboxes #}
                {% if field.name in ['allow_discussion', 'is_localizable'] %}
                  {{ field|safe }}
                  {{ field|label_with_help }}
                {% else %}
                  {{ field|label_with_help }}
                  {% if field.name in ['products', 'topics'] %}
                    <span id="relevant-{{ field.name }}-disabled-message" hidden>{{ _("Disabled " + field.name + " are not available given the selections") }}</span>
                    <img id="relevant-{{ field.name }}-selected-checkmark" class="relevant-{{ field.name }}-selected" src="{{ webpack_static('sumo/img/green-checkmark.svg') }}" alt="checkmark" hidden/>
                    <span id="relevant-{{ field.name }}-selected-message" class="relevant-{{ field.name }}-selected" hidden></span>
                    <a href="#" id="relevant-{{ field.name }}-clear-selected" class="relevant-{{ field.name }}-selected" hidden>{{ _("Clear") }}</a>
                  {% endif %}
                  {{ field|safe }}
                {% endif %}
                {{ field.errors }}
              </li>
            {% endfor %}
          </ul>
          <ul>
            {% for field in revision_form.visible_fields() %}
              <li class="field has-large-textarea {% if field.errors %}has-error{% endif %}">
                {% if field.name not in ['comment', 'content'] %}
                  {{ field|label_with_help }}{{ field|safe }}
                {% elif field.name == 'content' %}
                  {{ revision_form.content.label_tag()|safe }}
                  {{ content_editor(revision_form.content) }}
                {% endif %}
                {{ field.errors }}


                {% if field.name == 'summary' %}
                  <p><span id="remaining-characters">{{ field.field.max_length }}</span> {{ _('characters remaining.') }}</p>
                {% endif %}
              </li>
            {% endfor %}
          </ul>
          {{ revision_form.hidden_fields()|join|safe }}
          {{ submit_revision(revision_form) }}
        </form>
      </div>
      <div id="preview"></div>
    </article>
  </div>

  <script type="application/json" class="showfor-data">
    {{ showfor_data(products) }}
  </script>
{% endblock %}

{% block side_top %}
  <nav id="doc-tools">
    <ul class="sidebar-nav sidebar-folding">
      {{ for_contributors_sidebar(user, settings.WIKI_DEFAULT_LANGUAGE) }}
    </ul>
  </nav>
{% endblock %}