{% load i18n baseurl common_tags store_tags cleanhtml cache locale %}
{% get_current_language as LANGUAGE_CODE %}
{% get_current_language_bidi as LANGUAGE_BIDI %}
{% cache settings.POOTLE_CACHE_TIMEOUT unit_edit unit.id unit.mtime cantranslate cansuggest canreview altsrcs profile.id LANGUAGE_CODE unit.get_terminology %}
<td colspan="2" rowspan="1" class="translate-full translate-focus{% if unit.isfuzzy %} fuzzy-unit{% endif %}" dir="{% locale_dir %}">
  <div class="translate-container{% if unit.get_active_critical_qualitychecks.exists %} error{% endif %}">
    <div class="unit-path">
      <ul>
        <li><span class="content-wrapper">{{ language.name }}</span></li>
        <li><span class="content-wrapper">{{ project }}</span></li>
        <li><span class="content-wrapper">{{ unit.store.path }}</span></li>
        <li><span class="content-wrapper">{% blocktrans with url=unit.get_translate_url id=unit.id %}<a href="{{ url }}">Unit #{{ id }}</a>{% endblocktrans %}</span></li>
      </ul>
    </div>
    <div class="translate-{% locale_align %}">
      <!-- Priority -->
      {% if priority %}
      <div class="sidebar" dir="{% locale_dir %}">
        <span class="sidetitle" lang="{{ LANGUAGE_CODE }}">{% trans "Priority:" %}</span>
        <div class="translate-priority">{{ priority }}</div>
      </div>
      {% endif %}
      {% if unit.getcontext and unit.locations != unit.context %}
      <!-- Context information and comments -->
      <div class="translate-context sidebar">
        <span class="sidetitle" lang="{{ LANGUAGE_CODE }}">{% trans "Context:" %}</span>
        <div class="translate-context-value">
          {{ unit.getcontext }}
        </div>
      </div>
      {% endif %}

      {% if unit.locations %}
      <!-- Location comments -->
      <div class="comments sidebar">
        <span class="sidetitle" lang="{{ LANGUAGE_CODE }}">{% trans "Locations:" %}</span>
        <a lang="en" dir="ltr" class="translate-locations" title="{{ unit.locations }}"
            href="{{ unit.get_search_locations_url }}">{{ unit.locations|truncatewords:4 }}</a>
      </div>
      {% endif %}

      <!-- Terminology suggestions -->
      {% with unit.get_terminology as terms %}
      {% if terms %}
      <div id="tm" class="sidebar" dir="{% locale_dir %}">
        <span class="sidetitle" lang="{{ LANGUAGE_CODE }}">{% trans "Terminology:" %}</span>
        {% for term in terms %}
        <div class="tm-unit js-editor-copytext" data-string="{{ term.target }}"
          title="{% trans 'Insert the translated term into the editor' %}">
          <span class="tm-original" dir="{{ source_language.direction }}" lang="{{ source_language.code }}">{{ term.source }}</span>
          <span class="tm-translation" dir="{{ language.direction }}" lang="{{ language.code }}">{{ term.target }}</span>
        </div>
        {% endfor %}
      </div>
      {% endif %}
      {% endwith %}

      {% if unit.developer_comment %}
      <!-- Developer comments -->
      <div class="comments sidebar">
        <div lang="{{ source_language.code }}" dir="{{ source_language.direction }}">
          <span class="sidetitle" lang="{{ LANGUAGE_CODE }}">{% trans "Comments:" %}</span>
          <div class="js-developer-comments developer-comments">
            {{ unit.developer_comment|urlize|url_target_blank|url_trim|linebreaks }}
          </div>
        </div>
        {% with image_urls=unit.developer_comment|image_urls %}
          {% if image_urls %}
          <div class="developer-images hr">
          {% for image_url in image_urls %}
            <a class="js-dev-img" href="{{ image_url }}"
               title="{% trans 'Click to open the image in a popup' %}">
            <img src="{{ image_url }}"/>
            </a>
          {% endfor %}
          </div>
          {% endif %}
        {% endwith %}
      </div>
      {% endif %}

      {% if project.screenshot_search_prefix %}
      <!-- Screenshot links -->
      <div class="screenshot-link sidebar">
        <a href="{{ unit.get_screenshot_url }}" target="_blank">
          {% trans 'Screenshots...' %}
        </a>
      </div>
      {% endif %}
    </div>
    <div class="translate-middle">
      <!-- Quality Checks -->
      <div id="translate-checks-block" class="js-unit-checks"
        dir="{% locale_dir %}">
      {% include 'editor/units/xhr_checks.html' %}
      </div>
      <div id="target-item-content">
        <form action="" method="post" name="translate" id="translate">
          {{ form.id.as_hidden }}
          {{ form.index.as_hidden }}
          <div class="sources">
            <!-- Alternative source language translations -->
            {% for altunit in altsrcs %}
            <div class="source-language alternative">
              <div class="translation-text-headers" lang="{{ LANGUAGE_CODE }}" dir="{% locale_dir %}">
                <div class="language-name">{{ altunit.store.translation_project.language.name }}</div>
                {% if cansuggest or cantranslate %}
                <div class="translate-toolbar">
                  <span class="js-mt-{{ altunit.store.translation_project.language.code }}"></span>
                  <a class="icon-copy js-copyoriginal" data-uid="{{ altunit.id }}"
                     title="{% trans 'Copy into translation' %}" accesskey="c"></a>
                </div>
                {% endif %}
              </div>
              <div id="js-unit-{{ altunit.id }}"
                   class="translate-original{% if unit.hasplural %} translate-plural{% endif %}">
                {% for i, target, title in altunit|pluralize_target %}
                <div class="translation-text js-translation-text" lang="{{ altunit.store.translation_project.language.code }}" dir="{{ altunit.store.translation_project.language.direction }}"{% if title %} title="{{ title }}"{% endif %}>{{ target|fancy_highlight }}</div>
                {% endfor %}
                <div class="placeholder"></div>
              </div>
            </div>
            {% endfor %}
            <!-- Original -->
            <div class="source-language original">
              <div class="translation-text-headers" lang="{{ LANGUAGE_CODE }}" dir="{% locale_dir %}">
                <div class="language-name">{{ source_language.name }}</div>
                {% if cansuggest or cantranslate %}
                <div class="translate-toolbar">
                  <span class="report-issue">
                    <a class="js-popup-ajax"
                       href="{% url 'pootle-contact-report-error' %}?report={{ unit.id }}">
                      {% trans "Report a problem with this string" %}
                    </a>
                  </span>
                  <span class="js-mt-{{ source_language.code }}"></span>
                  <a class="icon-copy js-copyoriginal" data-uid="{{ unit.id }}"
                     title="{% trans 'Copy into translation' %}" accesskey="c"></a>
                </div>
                {% endif %}
              </div>
              <div id="js-unit-{{ unit.id }}"
                   class="translate-original{% if unit.hasplural %} translate-plural{% endif %}">
                {% for i, source, title in unit|pluralize_source %}
                <div class="translation-text js-translation-text" lang="{{ source_language.code }}" dir="{{ source_language.direction }}"{% if title %} title="{{ title }}"{% endif %}>{{ source|fancy_highlight }}</div>
                {% endfor %}
                <div class="placeholder"></div>
              </div>
            </div>
          </div>
          <!-- Buttons, resize links, special characters -->
          <div class="buttons translate-buttons-block" lang="{{ LANGUAGE_CODE }}" dir="{% locale_dir %}">
            {% if cantranslate %}
            <input type="submit" name="submit" tabindex="11" accesskey="s"
              class="btn btn-success submit unit-submit js-submit" disabled
              value="{% trans 'Submit' %}"
              title="{% trans 'Submit translation and go to the next string (Ctrl+Enter)' %}" />
            {% endif %}
            {% if cansuggest %}
            <input type="submit" name="suggest" tabindex="11" accesskey="s"
              class="btn btn-warning suggest unit-submit js-suggest" disabled
              value="{% trans 'Suggest' %}"
              title="{% trans 'Suggest translation and go to the next string (Ctrl+Enter)' %}" />
            {% endif %}
            {% if cansuggest and cantranslate %}
            <div class="switch-suggest-mode tiny" lang="{{ LANGUAGE_CODE }}">
                <div class="suggest"><a href="#" title="{% trans 'Switch to translation mode (Ctrl+Shift+Space)' %}">&harr; {% trans "Submit" %}</a></div>
              <div class="submit"><a href="#" title="{% trans 'Switch to suggestion mode (Ctrl+Shift+Space)' %}">&harr; {% trans "Suggest" %}</a></div>
            </div>
            {% endif %}
            <div class="translate-fuzzy-block js-fuzzy-block{% if not is_admin and not unit.isfuzzy %} hide{% endif %}"
              lang="{{ LANGUAGE_CODE }}"
              title="{% trans 'Mark this string as needing further work (Ctrl+Space)' %}">
              {{ form.state }} {{ form.state|label_tag:'' }}
            </div>
          </div>
          <!-- Translation -->
          <div id="orig{{ unit.index }}" class="js-translate-translation translate-translation" lang="{{ LANGUAGE_CODE }}" dir="{% locale_dir %}">
            {% if unit.submitted_by %}
            <div id="target-item-gravatar">
              {% include 'core/_avatar.html' with user=unit.submitted_by %}
            </div>
            {% endif %}

            {{ form.target_f }}

            <div class="extras-bar">
              <a id="js-toggle-timeline" href="{% url 'pootle-xhr-units-timeline' unit.id %}"><i class="icon-timeline" title="{% trans 'Show Timeline' %}"></i></a>
              {% block translator_comment_edit_trigger %}
              {% if cantranslate %}<a class="js-editor-comment" tabindex="15"><i class="icon-comment-add" title="{% trans 'Add Comment' %}"></i></a>{% endif %}
              {% endblock %}
              <a class="js-toggle-raw"><i class="icon-raw-mode" title="{% trans 'Raw View' %}"></i></a>
            </div>
            {% if unit.submitted_by and unit.submitted_on %}
            <div class="unit-meta">
              <time class="js-relative-date"
                title="{{ unit.submitted_on|dateformat }}"
                datetime="{{ unit.submitted_on.isoformat }}">&nbsp;</time>
              {% with reviewer=unit.reviewed_by %}
              {% if reviewer %}
              <br>
              <span>({% blocktrans with profile_url=reviewer.get_absolute_url%}reviewed by <a href="{{ profile_url }}">{{ reviewer }}</a>{% endblocktrans %})</span>
              {% endif %}
              {% endwith %}
            </div>
            {% endif %}
            {% if language.specialchars or language.direction == "rtl" %}
              {% if cantranslate or cansuggest %}
              <div class="editor-specialchars-block" lang="{{ language.code }}">
                {% if language.direction == "rtl" %}
                <a class="editor-specialchar js-editor-copytext"
                  title="{% trans 'Insert RLM (Right-To-Left Mark) into the editor' %}"
                  data-string="&#8207;">RLM</a>
                <a class="editor-specialchar js-editor-copytext"
                  title="{% trans 'Insert LRM (Left-To-Right Mark) into the editor' %}"
                  data-string="&#8206;">LRM</a>
                <a class="editor-specialchar js-editor-copytext"
                  title="{% trans 'Insert RLE (Right-To-Left Embedding) into the editor' %}"
                  data-string="&#8235;">RLE</a>
                <a class="editor-specialchar js-editor-copytext"
                  title="{% trans 'Insert LRE (Left-To-Right Embedding) into the editor' %}"
                  data-string="&#8234;">LRE</a>
                <a class="editor-specialchar js-editor-copytext"
                  title="{% trans 'Insert RLO (Right-To-Left Override) into the editor' %}"
                  data-string="&#8238;">RLO</a>
                <a class="editor-specialchar js-editor-copytext"
                  title="{% trans 'Insert LRO (Left-To-Right Override) into the editor' %}"
                  data-string="&#8237;">LRO</a>
                <a class="editor-specialchar js-editor-copytext"
                  title="{% trans 'Insert PDF (Pop Directional Format ) into the editor' %}"
                  data-string="&#8236;">PDF</a>
                <a class="editor-specialchar js-editor-copytext"
                  title="{% trans 'Insert ZWJ (Zero Width Joiner) into the editor' %}"
                  data-string="&#8205;">ZWJ</a>
                <a class="editor-specialchar js-editor-copytext"
                  title="{% trans 'Insert ZWNJ (Zero Width Non Joiner) into the editor' %}"
                  data-string="&#8204;">ZWNJ</a>
                {% endif %}
                {% for specialchar in language.specialchars %}
                {% if not specialchar.isspace %}
                <a class="editor-specialchar js-editor-copytext"
                   data-string="{{ specialchar }}"
                   title="{% trans 'Insert this symbol into the editor' %}">{{ specialchar }}</a>
                {% else %}
                <span class="extraspace"> </span>
                {% endif %}
                {% endfor %}
              </div>
              {% endif %}
            {% endif %}
          </div>
        </form>
        {% block translator_comment_form_wrapper %}
        {% if cantranslate %}
        <div id="editor-comment" class="js-editor-comment-form hide">
          <form id="js-comment-form">
            {% block translator_comment_form %}
            {{ comment_form.translator_comment }}
            {% endblock %}
            <input type="submit" class="btn btn-xs btn-primary"
                      value="{% trans 'Submit' %}" />
          </form>
        </div>
        {% endif %}
        {% endblock %}
      </div>
      <!-- Latest comment, [timeline of changes], suggestions from users
           and Translation Memory -->
      <div id="extras-container">
        {% block translator_comment %}
        {% if unit.translator_comment %}
        <!-- Latest comment -->
        <div id="translator-comment" lang="{{ LANGUAGE_CODE }}">
          {% include "editor/units/xhr_comment.html" %}
        </div>
        {% endif %}
        {% endblock %}
        {% with unit.get_suggestions as suggestions %}
        {% if suggestions %}
        <div id="suggestions">
          <div class="extra-item-title">{% trans 'User suggestions' %}</div>
          {% for sugg in suggestions %}
          <div id="suggestion-{{ sugg.id }}"
            class="js-user-suggestion js-editor-copytext extra-item-block"
            data-action="overwrite" data-translation-aid="{{ sugg.target }}"
            data-sugg-id="{{ sugg.id }}"
            data-suggestor-id="{{ sugg.user.id }}">
            {% for i, target, diff, title in sugg|pluralize_diff_sugg %}
            <div class="extra-item-content">
              {% if sugg.user %}
              <div class="extra-item-gravatar">
                {% include 'core/_avatar.html' with user=sugg.user %}
              </div>
              {% endif %}
              <div class="extra-item">
                {% if canreview %}
                <a accesskey="a" class="suggestion-action js-suggestion-accept"
                  data-sugg-id="{{ sugg.id }}">
                  <i class="icon-accept" dir="{% locale_dir %}"
                    title="{% trans 'Accept suggestion' %}"></i>
                </a>
                <a accesskey="r" class="suggestion-action js-suggestion-reject"
                  data-sugg-id="{{ sugg.id }}">
                  <i class="icon-reject" dir="{% locale_dir %}"
                    title="{% trans 'Reject suggestion' %}"></i>
                </a>
                {% elif user.is_authenticated and profile == sugg.user %}
                <a accesskey="r" class="suggestion-action js-suggestion-reject"
                  data-sugg-id="{{ sugg.id }}">
                  <i class="icon-reject" dir="{% locale_dir %}"
                    title="{% trans 'Remove suggestion' %}"></i>
                </a>
                {% endif %}

                <div id="suggdiff-{{sugg.id}}-{{i}}" class="suggestion-translation"
                  lang="{{ language.code }}" {% if title %} title="{{ title }}"{% endif %}
                  >{{ diff }}</div>
              </div>
              {% block suggestion_comment %}{% endblock %}
              {% if sugg.creation_time %}
              <time class="extra-item-meta js-relative-date"
                title="{{ sugg.creation_time|dateformat }}"
                datetime="{{ sugg.creation_time.isoformat }}">&nbsp;</time>
              {% else %}
              <time class="extra-item-meta">{% trans 'A long time ago' %}</time>
              {% endif%}
            </div>
            {% endfor %}
          </div>
          {% endfor %}
        </div>
        {% endif %}
        {% endwith %}
      </div>
    </div>
  </div>
</td>
{% endcache %}
