{% extends "wiki/base.html" %}
{% from "layout/errorlist.html" import errorlist %}
{% from "wiki/includes/sidebar_modules.html" import document_tools with context %}
{% from "includes/common_macros.html" import content_editor with context %}
{% from "wiki/includes/document_macros.html" import revision_diff, submit_revision, edit_messages with context %}
{% from "wiki/includes/document_macros.html" import document_lock_warning with context %}
{% set title = _('Translate Article | {document}')|f(document=parent.title) %}
{% set crumbs = [(parent.get_absolute_url(), parent.title),
                 (None, _('Translate Article'))] %}
{% set classes = 'translate' %}
{% set scripts = ('wiki', 'wiki.diff', 'wiki.editor') %}
{% if document.is_switching_devices_document %}
  {% set scripts = scripts + ('switching-devices',) %}
{% endif %}
{% set ga_content_group = "kb-cms" %}

{% block content %}
  {% set language = settings.LANGUAGES_DICT[locale.lower()] %}
    <article id="localize-document" class="main form-page{% if locked %} locked{% endif %}" data-slug="{{ parent.slug }}">

      <ul class="user-messages">
        {% if not based_on.is_ready_for_localization %}
          <li class=" mzp-c-notification-bar mzp-t-warning warning">
            <button class="mzp-c-notification-bar-button" type="button"></button>
            {{ _('You are translating an English document which is not yet ready for localization.') }}
          </li>
        {% endif %}

        {% if draft_revision %}
          <li class="mzp-c-notification-bar mzp-t-info info">
            <button class="mzp-c-notification-bar-button" type="button"></button>
            <div>
            <p><strong>{{ _('You have a draft revision for this article saved on {date_time}')|f(date_time=draft_revision.created) }}</strong></p>
            <form action="{{ url('wiki.translate', parent.slug) }}" method="post">
              {% csrf_token %}
              <input class="btn" name="restore" value={{ _('Restore') }} type="submit">
              <input class="btn" name="discard" value={{ _('Discard') }} type="submit">
            </form>
            </div>
          </li>
        {% endif %}
        {% if more_updated_rev %}
          <li class="warning draft-warning">
            <p><strong>{{ _('This version is outdated, but there is a new version <a href="{link}">{revision}</a> available.')|fe(link=url('wiki.revision', document.slug, more_updated_rev.id, locale=locale), revision=more_updated_rev.id) }}</strong></p>
          </li>
        {% endif %}
        {{ edit_messages(document, show_revision_warning) }}
        {{ document_lock_warning() }}
      </ul>

      <h1 class="sumo-page-heading">{{ _('Translating {title}')|f(title=parent.title) }}</h1>
      <div class="change-locale">
        <p class="sumo-page-intro">
          {{ _('Translating article to {locale}.' )|f(locale=language) }}
        </p>
      </div>
      {% if not document %}
        {# If this is the first translation to this locale, we use 1 big form. #}
        <form id="both_form" action="" method="post" data-json-url="{{ url('wiki.json') }}">
          {% csrf_token %}
          <input type="hidden" name="form" value="both" />
          <input type="hidden" name="slug" value="{{ parent.slug }}" />
          <input type="hidden" name="locale" value="{{ parent.locale }}">
      {% endif %}
      {% if document_form %}
        <details {% if disclose_description %} open="open"{% endif %}>
          <summary class="sumo-card-heading">{{ _('Translate Description') }}</summary>
          <div class="details-content-wrap">
          {{ errorlist(document_form) }}
          {% if document %}
            {# If there are existing translations in this locale, we use 2 separate forms. #}
            <form id="doc_form" action="" method="post" data-json-url="{{ url('wiki.json') }}" data-document-id="{{ document.id }}">
              {% csrf_token %}
              <input type="hidden" name="form" value="doc" />
              <input type="hidden" name="slug" value="{{ document.slug }}" />
              <input type="hidden" name="locale" value="{{ document.locale }}">
          {% endif %}
          <ul class="description">
            <li>
              <div class="approved">
                <label>{{ _('Title:') }}</label>
                <div class="val">{{ parent.title }}</div>
              </div>
              <div class="localized">
                <label for="{{ document_form.title.auto_id }}" title="{{ document_form.title.help_text }}">{{ _('Title in {locale}:')|f(locale=language) }}</label>
                {{ document_form.title|safe }}
              </div>
            </li>
            <li>
              <div class="approved">
                <label>{{ _('Slug:') }}</label>
                <div class="val">{{ parent.slug }}</div>
              </div>
              <div class="localized">
                <h3 class="sumo-page-subheading"><label for="{{ document_form.slug.auto_id }}" title="{{ document_form.slug.help_text }}">{{ _('Slug in {locale}:')|f(locale=language) }}</label></h3>
                {{ document_form.slug|safe }}
              </div>
            </li>
            <li class="field checkbox">
              {{ document_form.allow_discussion }}
              <label for="{{ document_form.allow_discussion.id_for_label }}">{{ document_form.allow_discussion.label }}</label>
            </li>
          </ul>
          {% if document %}
              <div class="submit">
                <button class="sumo-button primary-button btn btn-important" type="submit">{{ _('Save description') }}</button>
              </div>
            </form>
          {% endif %}
          </div>
        </details>
      {% endif %}

      {% if revision_form %}
        <details open="open">
          <summary class="sumo-card-heading">{{ _('Translate Content') }}</summary>
          <div class="details-content-wrap">
          {{ errorlist(revision_form) }}
          {% if document %}
            {# If there are existing translations in this locale, we use 2 separate forms. #}
            <form id="rev_form" action="" method="post">
              {% csrf_token %}
              <input type="hidden" name="form" value="rev" />
              <input type="hidden" name="slug" value="{{ document.slug }}" />
              <input type="hidden" name="locale" value="{{ document.locale }}" />
              {# Do not add a closing form tag here it is added below #}
          {% endif %}
          {% if recent_approved_revs %}
            <h3 class="sumo-page-subheading">{{ _('Recently approved updates') }}:</h3>
            <ul class="recent-revisions">
              {% for rev in recent_approved_revs %}
                <li>
                  <a href="{{ url('wiki.revision', parent.slug, rev.id, locale=parent.locale) }}" rel="nofollow, noindex">{{ datetimeformat(rev.created, format='date') }}</a>:
                  [<a rel="nofollow" href="{{ profile_url(rev.creator) }}">{{ display_name(rev.creator) }}</a>]
                  {{ rev.comment }}
                </li>
              {% endfor %}
            </ul>
          {% endif %}

          <h3 class="sumo-page-subheading">{{ _('Differences') }}:</h3>

          {% if document.current_revision and document.current_revision.based_on and parent.latest_localizable_revision %}
            {# Diff between the English version the current translation is based on and the most recent ready-to-localize English version. #}
            {{ revision_diff(document.current_revision.based_on, parent.latest_localizable_revision, show_picker=True) }}
          {% elif not parent.latest_localizable_revision %}
            <p>{{ _('Note: This article has no revisions ready for localization.') }}</p>
          {% else %}
            <p>{{ _('Note: There are no approved translations for this article.') }}</p>
          {% endif %}
          <ul class="description">
            <li>
              <div class="approved">
                <label>{{ _('Keywords:') }}</label>
                <div class="val">{{ based_on.keywords }}</div>
              </div>
              <div class="localized">
                <label for="{{ revision_form.keywords.auto_id }}" title="{{ revision_form.keywords.help_text }}">{{ _('Keywords in {locale}:')|f(locale=language) }}</label>
                {{ revision_form.keywords|safe }}
              </div>
            </li>
            <li>
              <div class="approved">
                <label>{{ _('Search result summary:') }}</label>
                <div class="val">{{ based_on.summary }}</div>
              </div>
              <div class="localized">
                <label for="{{ revision_form.summary.auto_id }}" title="{{ revision_form.summary.help_text }}">{{ _('Search result summary in {locale}:')|f(locale=language) }}</label>
                {{ revision_form.summary|safe }}
                <p><span id="remaining-characters">{{ revision_form.summary.field.max_length }}</span> {{_('characters remaining.') }}</p>
              </div>
            </li>
          </ul>
          <div id="content-fields">
            <div class="approved">
              <label>{{ _('Approved {default_locale} version:')|f(default_locale=settings.LANGUAGES_DICT[settings.WIKI_DEFAULT_LANGUAGE.lower()]) }}</label>
              <div id="content-or-diff" class="content">
                <textarea readonly="readonly"{% if settings.WIKI_DEFAULT_LANGUAGE.lower() not in settings.LANGUAGES_BIDI %} dir="ltr"{% endif %}>{{ based_on.content }}</textarea>
              </div>
            </div>
            <div class="localized">
              <h3 class="sumo-page-subheading">{{ _('{locale} translation:')|f(locale=language) }}</h3>
              {{ content_editor(revision_form.content) }}
            </div>
          </div>
          {{ revision_form.hidden_fields()|join|safe }}
          <div class="buttons-and-preview">
            {# If the document has been created and has a current revision,
               we allow the localizer to keep the translation out of date
               with this new revision. #}
            {{ submit_revision(revision_form, show_no_update_checkbox=(document and document.current_revision), include_diff=True, translate=True) }}
            <div id="preview" class="cf"></div>
            <div id="preview-diff">
                <div class="from">{{ revision_form.content.value() }}</div>
                <div class="to"></div>
                <div class="output"></div>
              </div>
            <div class="submit" id="preview-bottom">
              {{ submit_revision(revision_form, buttons_only=True, include_diff=True, translate=True) }}
            </div>
            <div id="draft-message" class="alert" hidden>
            </div>
          </div>
          {% if document %}
            </form>
          {% endif %}
          </div>
        </details>
      {% endif %}
      {% if not document %}
        </form>
      {% endif %}
    </article>
  <script type="application/json" class="showfor-data">
    {{ showfor_data(parent.get_products()) }}
  </script>
{% endblock %}

{% block side %}
  {{ document_tools(document, parent, user, 'edit', settings) }}
{% endblock %}