{% extends "wiki/base.html" %}
{% from "includes/error_list.html" import errorlist %}
{% from "includes/common_macros.html" import content_editor %}
{% set title = _('Translate Article | {document}')|f(document=parent.title) %}
{% block title %}{{ page_title(title) }}{% endblock %}
{% block bodyclass%}translate{% endblock %}

{% block extrahead %}
  {{ css('home') }}
{% endblock %}

{% block site_css %}
    {{ super() }}
    {{ css('wiki-edit') }}
    {{ css('jquery-ui') }}
{% endblock %}

{% block content %}
  {% set language = settings.LANGUAGES_DICT[locale.lower()] %}

      <form action="" method="post" data-json-url="{{ url('wiki.json') }}" id="translate-document">
        {{ csrf() }}
        <input type="hidden" name="form" value="both" />

  <div id="localize-document" class="editing">
    <header id="article-head">
      <div class="title">
        <h1>{{ _('<span class="action">Translating</span> <em>{title}</em>')|fe(title=parent.title) }}</h1>
      </div>

      <div class="change-locale">
        {{ _('Translating article to {locale}' )|f(locale=language) }}.
      </div>

    {% include 'wiki/includes/page_buttons.html' %}
    </header>

    {% include 'wiki/includes/translate_description.html' %}

    {% if revision_form %}
      <details id="trans-content" open="open">
        <summary>{{ _('Translate Content') }}</summary>
        {{ errorlist(revision_form) }}
        {# TODO: restore keywords and summary when we restore search app
        <ul class="description">
          <li>
            <dl class="approved">
              <dt>{{ _('Keywords:') }}</dt>
              <dd>{{ based_on.keywords }}</dd>
            </dl>
            <dl class="localized">
              <dt><label for="{{ revision_form.keywords.auto_id }}" title="{{ revision_form.keywords.help_text }}">{{ _('Keywords in {locale}:')|f(locale=language) }}</label></dt>
              <dd>{{ revision_form.keywords|safe }}</dd>
            </dl>
          </li>
          <li>
            <dl class="approved">
              <dt>{{ _('Search result summary:') }}</dt>
              <dd>{{ based_on.summary }}</dd>
            </dl>
            <dl class="localized">
              <dt><label for="{{ revision_form.summary.auto_id }}" title="{{ revision_form.summary.help_text }}">{{ _('Search result summary in {locale}:')|f(locale=language) }}</label></dt>
              <dd>{{ revision_form.summary|safe }}</dd>
            </dl>
          </li>
        </ul>
        #}
        {% if document.current_revision and document.current_revision.based_on %}
          {% if parent.current_revision != document.current_revision.based_on %}
            {# Diff between the English version the current translation is based on and the current English version. #}
            {% set revision_from = document.current_revision.based_on %}
            {% set revision_to = parent.current_revision %}
            {% include 'wiki/includes/revision_diff.html' %}
            {# TODO: 'change revisions' link and modal selector #}
          {% endif %}
        {% endif %}

        <div id="content-fields">
          <article class="approved text-content">
            <header>
              <h3>{{ _('Approved {default_locale} version:')|f(default_locale=settings.LANGUAGES_DICT[settings.WIKI_DEFAULT_LANGUAGE.lower()]) }}</h3>
            </header>
            <div class="boxed translate-display">
              {{ based_on.content|safe }}
            </div>

            <section class="page-meta">
            <section class="page-tags">
              <h3><i aria-hidden="true" class="icon-tag"></i>{{ _('Tags') }}</h3>
                {% set parent_tags = parent.tags.all() %}
              <div id="translate-tags">
                {% if parent_tags | length %}
                  <ul class="tag-list tagit ui-widget ui-widget-content">
                    {% for parent_tag in parent_tags %}
                    <li class="tagit-choice ui-widget-content ui-state-default">
                        <a class="text tagit-label" href="{{url('wiki.tag', parent_tag.name)}}">{{ parent_tag.name }}</a>
                    </li>
                    {% endfor %}
                  </ul>
                {% else %}
                  <p>{{ _('This document has no tags.') }}</p>
                {% endif %}
              </div>
            </section>
            </section>
          </article>

          <article class="localized">
            <header>
              {% include 'wiki/includes/guide_links.html' %}
              <h3>{{ _('{locale} translation:')|f(locale=language) }}</h3>
            </header>
            <div class="ckeditor-container editor-container">
              {{ content_editor(revision_form.content) }}
            </div>
          </article>
        </div>
        {{ revision_form.hidden_fields()|join|safe }}


        <div class="approved">&nbsp;</div>
        <div class="localized">

            <section id="page-tags" class="page-tags wiki-block">
              <h2><i aria-hidden="true" class="icon-tag"></i>{{ _('Tags') }} <a href="{{ devmo_url('Project:MDN/Contributing/Editor_guide/Editing#The_tags_box') }}"><i aria-hidden="true" title="{{ _('Learn how to tag an article') }}" class="icon-question-sign editor-help-icon"></i></a></h2>
              <p>
                {% trans url=devmo_url('Project:MDN/Contributing/Tagging_standards') %}
                  Categorize the article. It will make the article findable under the right filters in the search engine. <a target="_blank" href="{{ url }}">Read the Tagging Guide</a>.
                {% endtrans %}
              </p>
              <input id="tagit_tags" type="text" name="tags" value="{% if document.tags %}{% for tag in document.tags.all() %}{{ tag.name }},{% endfor %}{% endif %}" maxlength="255">
            </section>

          <section class="wiki-block">
            <h2>{{_('Localization flags')}}</h2>
            {{ revision_form.localization_tags|safe }}
          </section>

          {% include 'wiki/includes/revision_comment.html' %}

      	   {% include 'wiki/includes/review_tags.html' %}

        </div>
      </details>
    {% endif %}

  </div>
  {% include 'wiki/includes/wiki_notifier.html' %}
</form>

    {% include 'wiki/includes/attachment_list.html' %}

{% endblock %}

{% block js %}
  {{ js('jquery-ui') }}

  {% include 'wiki/includes/tag_suggestions.html' %}
  {% include 'wiki/includes/ckeditor_scripts.html' %}
  {{ js('wiki-edit') }}

{% endblock %}