{% extends "base.html" %}
{% load compress %}
{% load i18n %}
{% load icons %}
{% load translations %}
{% load crispy_forms_tags %}
{% load permissions %}
{% load static %}

{% block extra_script %}
{% compress js %}
<script defer data-cfasync="false" src="{% static 'editor/base.js' %}{{ cache_param }}"></script>
<script defer data-cfasync="false" src="{% static 'editor/full.js' %}{{ cache_param }}"></script>
{% endcompress %}
{% endblock %}

{% block extra_meta %}
<link rel="canonical" href="{{ unit.get_absolute_url }}" />
{% endblock %}

{% block breadcrumbs %}
<li><a href="{{ project.get_absolute_url }}">{{ project }}</a></li>
{% if object.component.slug != "-" %}
{% include "snippets/component-breadcrumb.html" with object=object.component %}
{% endif %}
{% include "snippets/translation-breadcrumb.html" %}
{% if object.component.slug == "-" %}
<li><a href="{{ unit.translation.component.get_absolute_url }}">{{ unit.translation.component.name }}</a></li>
{% endif %}
<li><a href="{{ object.get_translate_url }}">{% trans "Translate" %}</a></li>
<a class="pull-right flip" href="{{ object.get_widgets_url }}">
<img src="{% url 'widget-image' project=project.slug component=object.component.slug widget='svg' color='badge' lang=object.language.code extension='svg' %}?native=1" />
</a>
{% endblock %}

{% block content_class %}js-editor{% endblock %}

{% block content %}

{% include "snippets/component/state.html" with object=unit.translation.component %}

{% perm 'unit.edit' unit as user_can_translate %}
{% perm 'unit.delete' unit as user_can_delete %}
{% perm 'suggestion.add' unit as user_can_suggest %}
{% perm 'suggestion.accept' unit as user_can_accept_suggestion %}
{% perm 'suggestion.vote' unit.translation as user_can_vote_suggestion %}
{% perm 'machinery.view' unit.translation as user_can_use_machinery %}
{% perm 'source.edit' unit.translation as user_can_edit_source %}
{% perm 'unit.flag' unit.translation as user_can_edit_flags %}
{% perm 'screenshot.add' unit.translation as user_can_add_screenshot %}
{% perm 'comment.add' unit.translation as user_can_add_comment %}
{% perm 'glossary.add' project as user_can_add_glossary %}
{% perm 'unit.add' unit.translation as user_can_add_unit %}

<div class="btn-group pull-right flip btn-group-settings" role="group">
{% if user_can_translate %}
<a href="{% url 'zen' project=project.slug component=object.component.slug lang=object.language.code %}?offset={{offset}}&amp;{{ search_url }}" data-params="{{ search_url }}" title="{% trans "Edit in Zen mode" %}" class="btn btn-link">{% icon "flash.svg" %} {% trans "Zen" %}</a>
{% endif %}

<a href="{% url 'profile' %}#preferences" class="btn btn-link" title="{% trans "Configure editor" %}">{% icon "settings.svg" %}</a>
</div>

{% with variants=unit.variants %}

<div class="query-container">
  <form method="GET" class="result-page-form">
    {% crispy search_form  %}
  </form>
</div>

<div class="row">
<div class="col-sm-9">

<form action="{{ this_unit_url }}" method="post" class="translation-form translator">
<div class="panel {% if unit.approved %}panel-success{% elif unit.is_source %}panel-warning{% else %}panel-default{% endif %}">

  <div class="panel-heading">
  <a class="btn btn-link btn-xs pull-right flip" href="{{ site_url }}{{ unit.get_absolute_url }}" data-clipboard-text="{{ site_url }}{{ unit.get_absolute_url }}" data-clipboard-message="{% trans "Permalink copied to clipboard." %}" title="{% trans "Copy permalink" %}">{% icon "link.svg" %}</a>
  <h4 class="panel-title">
    {% if unit.translation.component.is_glossary %}
      {% if "forbidden" in item.all_flags %}
        {% trans "Forbidden glossary term" %}
      {% else %}
        {% trans "Glossary term" %}
      {% endif %}
    {% else %}
      {% if unit.is_source %}
        {% trans "Source string" %}
      {% else %}
        {% trans "Translation" %}
      {% endif %}
    {% endif %}
    {% include "snippets/unit-readonly-badge.html" %}
  </h4></div>
  <div class="panel-body">
    {% csrf_token %}
    <!-- secondary -->
    {% if secondary %}
    {% for secondary_unit in secondary %}
    <div class="form-group">
    <a class="language" href="{{ secondary_unit.get_absolute_url }}">{{ secondary_unit.translation.language }}</a>
    {% if user.profile.hide_source_secondary %}
      {% include "snippets/note-badge.html" with unit=unit %}
    {% endif %}
    {% format_translation secondary_unit.target secondary_unit.translation.language secondary_unit.translation.plural search_match=search_query num_plurals=unit.translation.plural.number unit=secondary_unit %}
    </div>
    {% endfor %}
    {% endif %}

    <!-- source change -->
    {% if unit.previous_source and unit.fuzzy %}
    <div class="form-group">
    <label>{% trans "Source change" %}</label>
    {% format_translation unit.source unit.translation.component.source_language diff=unit.previous_source num_plurals=unit.translation.plural.number %}
    </div>
    {% endif %}

    {% if unit.is_source %}
        {% if unit.context %}
            <!-- editing template -->
            <div class="form-group">
            <label>{{ unit.translation.component.context_label }}</label>
            {% format_translation unit.context unit.translation.component.source_language search_match=search_query num_plurals=unit.translation.plural.number wrap=True %}
            </div>
        {% endif %}
        {% if unit.translation.component.intermediate %}
            <!-- editing template -->
            <div class="form-group">
            <label>{% trans "Intermediate language" %}</label>
            {% format_translation unit.source unit.translation.component.source_language search_match=search_query num_plurals=unit.translation.plural.number unit=unit %}
            </div>
        {% endif %}
    {% endif %}

    {% if unit.source_unit.explanation %}
        <!-- source string context  -->
        <div class="form-group help-block">
        <label>{% trans "Explanation" %}</label>
        <div class="list-group">
            <div class="list-group-item">
                <div class="list-group-item-text">
                    {{ unit.source_unit.explanation|markdown }}
                </div>
            </div>
        </div>
        </div>
    {% endif %}

    {% if not unit.is_source %}
        {% if not user.profile.hide_source_secondary or not secondary %}
          <!-- source -->
          <div class="form-group source-language-group">
            {% if unit.context %}
                <div class="pull-right flip">
                <label>{{ unit.translation.component.context_label }}</label>
                {% format_translation unit.context unit.translation.component.source_language simple=True wrap=True noformat=True %}
                </div>
            {% endif %}
            <a class="language" href="{{ unit.source_unit.get_absolute_url }}">{{ unit.translation.component.source_language }}</a>
            {% if unit.translation.component.project.source_review %}
            <a title="{% trans "Report issue with the source string" %}" href="#" class="btn btn-link btn-xs bug-comment">{% icon "bug.svg" %}</a>
            {% endif %}
            {% include "snippets/note-badge.html" with unit=unit %}
            {% format_translation unit.source unit.translation.component.source_language search_match=search_query num_plurals=unit.translation.plural.number unit=unit glossary=glossary %}
          </div>
        {% endif %}
    {% endif %}

    <!-- edit form -->
    {% crispy form %}
  </div>
  <div class="panel-footer">
    {% with flag_actions=unit.get_flag_actions %}
      {% if user_can_delete or user_can_edit_flags and flag_actions or user_can_add_unit %}
        <div class="btn-group pull-right flip">
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="unit_tools_dropdown">
            {% trans "Tools" %} <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            {% if user_can_delete %}
              <li><a href="{% url "delete-unit" unit_id=unit.pk %}" class="link-post">{% trans "Delete string" %}</a></li>
            {% endif %}
            {% if user_can_edit_flags and flag_actions %}
              {% for action, value, name in flag_actions %}
                <li><a href="{% url 'edit_context' pk=unit.pk %}" class="link-post" data-params='{"{{ action|escapejs }}": "{{ value|escapejs }}", "next": "{{ this_unit_url|escapejs }}"}'>{{ name }}</a></li>
              {% endfor %}
            {% endif %}
            {% if user_can_add_unit %}
              <li><a href="#" data-toggle="modal" data-target="#add-unit-form">{% trans "Add variant of this string" %}</a></li>
            {% endif %}
          </ul>
        </div>
      {% endif %}
    {% endwith %}
    <button class="btn btn-primary" type="submit" name="save" tabindex="150"
    {% if locked %}
        disabled="disabled"
        title="{% trans "This translation is currently locked." %}"
    {% elif not user_can_translate and not user_can_edit_flags %}
        disabled="disabled"
        {% if not user.is_authenticated %}
            title="{% trans "Please sign in to save translations." %}"
        {% elif unit.approved %}
            title="{% trans "Only reviewers can change approved strings, please add a suggestion if you think the string should be changed." %}"
        {% elif unit.translation.component.suggestion_voting %}
            title="{% trans "This translation only accepts suggestions, and these are approved by voting." %}"
        {% elif unit.translation.component.agreement %}
            title="{% trans "Contributing to this translation requires you agree to its contributor agreement." %}"
        {% elif unit.readonly %}
            title="{% trans "Read only" %}"
        {% elif unit.translation.is_template %}
            title="{% trans "Insufficient privileges for editing source strings." %}"
        {% else %}
            title="{% trans "Insufficient privileges for saving translations." %}"
        {% endif %}
    {% endif %}
    > {% trans "Save" %}</button>

    {% if not locked and user_can_translate %}
      <button class="btn btn-warning btn-spaced" type="submit" name="save-stay" tabindex="151">{% trans "Save and stay" %}</button>
    {% endif %}

    {% if unit.translation.component.enable_suggestions %}
    <button class="btn btn-warning btn-spaced" type="submit" name="suggest" tabindex="152"
    {% if project_locked or not user_can_suggest or unit.readonly %}disabled="disabled"{% endif %}
      {% if not user_can_suggest %}
        title="{% trans "Insufficient privileges for adding suggestions." %}"
      {% elif project_locked %}
        title="{% trans "This translation is currently locked." %}"
      {% elif unit.readonly %}
        title="{% trans "Read only" %}"
      {% endif %}
    >{% icon "suggest.svg" %} {% trans "Suggest" %}</button>
    {% endif %}
    <button class="btn btn-warning btn-spaced" type="submit" name="skip" tabindex="153">{% if LANGUAGE_BIDI %}{% icon "rewind.svg" %}{% else %}{% icon "fast-forward.svg" %}{% endif %} {% trans "Skip" %}</button>
  </div>
</div>
</form>

<ul class="nav nav-pills translation-tabs">
<li class="active"><a href="#nearby" data-toggle="tab" id="toggle-nearby" title="{% trans "Messages placed around this one" %}">{% trans "Nearby strings" %} <span class="badge">{{ nearby|length }}</span></a></li>
{% if nearby_keys %}
<li><a href="#keys" data-toggle="tab" id="toggle-keys" title="{% trans "Strings with similar keys" %}">{% trans "Similar keys" %} <span class="badge">{{ nearby_keys|length }}</span></a></li>
{% endif %}
{% if variants|length > 1 %}
<li><a href="#variants" data-toggle="tab" id="toggle-variants" title="{% trans "Variants of the string" %}">{% trans "Variants" %} <span class="badge">{{ variants|length }}</span></a></li>
{% endif %}
{% if unit.suggestions %}
<li><a href="#suggestions" data-toggle="tab" id="toggle-suggestions">{% trans "Suggestions" %} <span class="badge">{{ unit.suggestions|length }}</span></a></li>
{% endif %}
{% if others.total %}
<li><a href="#others" data-toggle="tab" id="toggle-others">{% trans "Other occurrences" %} <span class="badge">{{ others.total }}</span></a></li>
{% endif %}
{% if unit.all_comments or user_can_add_comment %}
<li><a href="#comments" data-toggle="tab" id="toggle-comments">{% trans "Comments" %}{% if unit.all_comments %} <span class="badge">{{ unit.all_comments|length }}</span>{% endif %}</a></li>
{% endif %}
{% if user_can_use_machinery %}
<li><a href="#machinery" data-toggle="tab" id="toggle-machinery" data-load="machinery" title="{% trans "Computer-aided translation suggestions" %}">{% trans "Automatic suggestions" %}</a></li>
{% endif %}
<li><a href="#translations" data-toggle="tab" id="toggle-translations" data-href="{% url 'js-unit-translations' unit_id=unit.id %}" title="{% trans "Translations of this string in the other languages" %}">{% trans "Other languages" %} <span class="badge">{{ unit.source_unit.unit_set.count|add:-1 }}</span> </a></li>
<li><a href="#history" data-toggle="tab" id="toggle-history" title="{% trans "List of recent changes done in Weblate" %}">{% trans "History" %}</a></li>
</ul>

<div class="tab-content">

<div class="tab-pane active" id="nearby">
{% include "snippets/embed-units.html" with current_unit=unit units=nearby translation=unit.translation component=unit.translation.component %}
</div>

{% if nearby_keys %}
<div class="tab-pane" id="keys">
{% include "snippets/embed-units.html" with current_unit=unit units=nearby_keys translation=unit.translation component=unit.translation.component %}
</div>
{% endif %}

{% if variants|length > 1 %}
<div class="tab-pane" id="variants">
{% include "snippets/embed-units.html" with current_unit=unit units=variants translation=unit.translation component=unit.translation.component %}
</div>
{% endif %}

{% if unit.suggestions %}
<div class="tab-pane" id="suggestions">
<form action="{{ this_unit_url }}" method="post">
    {% csrf_token %}
<input type="hidden" name="checksum" value="{{ unit.checksum }}" />

{% include "snippets/suggestions.html" with suggestions=unit.suggestions %}
</form>
</div>
{% endif %}

{% if others.total %}
<div class="tab-pane" id="others">
{% if others.skipped %}
  <p class="help-block">{% trans "Showing only subset of the strings as there were too many matches." %}</p>
{% endif %}
<form method="POST" action="{{ unit.translation.get_translate_url}}?{{ search_url }}&amp;offset={{ offset }}&amp;checksum={{ unit.checksum }}">
  {% csrf_token %}
  <table class="table table-condensed">
    <thead>
    <tr>
      <th></th>
      <th>{% trans "Component" %}</th>
      <th>{% trans "Translation" %}</th>
      <th>{% trans "Difference to current string" %}</th>
    </tr>
    </thead>
    {% if others.same %}
    <tbody>
    {% for item in others.same %}
    {% include "trans/other-row.html" %}
    {% endfor %}
    </tbody>
    {% endif %}
    {% if others.matching %}
    <tr><th colspan="4" class="warning">{% blocktrans count count=others.matching|length %}The following string has the same context and source.{% plural %}The following strings have the same context and source.{% endblocktrans %}</th></tr>
    <tbody>
    {% for item in others.matching %}
    {% include "trans/other-row.html" %}
    {% endfor %}
    </tbody>
    {% endif %}
    {% if others.source %}
    <tr><th colspan="4" class="warning">{% blocktrans count count=others.source|length %}The following string has different context, but the same source.{% plural %}The following strings have different contexts, but the same source.{% endblocktrans %}</th></tr>
    <tbody>
    {% for item in others.source %}
    {% include "trans/other-row.html" %}
    {% endfor %}
    </tbody>
    {% endif %}
    {% if others.context %}
    <tr><th colspan="4" class="warning">{% blocktrans count count=others.context|length %}The following string has a different source, but the same context.{% plural %}The following strings have different sources, but the same context.{% endblocktrans %}</th></tr>
    <tbody>
    {% for item in others.context %}
    {% include "trans/other-row.html" %}
    {% endfor %}
    </tbody>
    {% endif %}
  </table>
  {% if user_can_translate and others.allow_merge %}
    {% if object.component.allow_translation_propagation %}
      <input type="submit" value="{% trans "Apply selected translation to all propagated strings" %}" class="btn btn-primary" />
    {% else %}
      <input type="submit" value="{% trans "Apply selected translation to current string" %}" class="btn btn-primary" />
    {% endif %}
  {% endif %}
</form>
</div>
{% endif %}

<div class="tab-pane" id="translations">
<p>{% trans "Loading…" %}</p>
</div>

<div class="tab-pane" id="history">
{% include "last-changes-content.html" %}

<a class="btn btn-link" href="{% url 'changes' %}?{{ last_changes_url }}">{% trans "Browse all component changes" %}</a>
</div>

{% if user_can_use_machinery %}
<div class="tab-pane" id="machinery">
  <form class="form-inline" id="memory-search" action="{% url 'js-memory' unit_id=unit.id %}">
    {% csrf_token %}
    <div class="form-group">
      <label for="memory-search-input">{% trans "Translation memory" %}</label>
      <input type="text" class="form-control" id="memory-search-input" name="q">
    </div>
    <button type="submit" class="btn btn-primary">{% trans "Search" %}</button>
  </form>
  <table class="table table-compact table-striped">
    <thead>
      <tr>
        <th>{% trans "Translation" %}</th>
        <th>{% trans "Source" %}</th>
        <th>{% trans "Origin" %}</th>
        <th>{% trans "Similarity" %}</th>
        <th colspan="2">
        {% loading_icon "machinery" %}
      </th>
      <tr>
    </thead>
    <tbody id="machinery-translations"></tbody>
  </table>
</div>
{% endif %}

{% if unit.all_comments or user_can_add_comment %}
<div class="tab-pane" id="comments">

{% if unit.all_comments %}
    {% include "list-comments.html" with object=unit.translation comments=unit.all_comments next_url=this_unit_url %}
{% endif %}

{% if user_can_add_comment %}
<form method="post" action="{% url 'comment' pk=unit.id %}" class="auto-save-translation" id="comment-form">
{% csrf_token %}
<input type="hidden" name="next" value="{{ this_unit_url }}#comments" />
<div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title">{% trans "New comment" %}</h4></div>
  <div class="panel-body">
  <p class="help-block">{% trans "Comment on this string for fellow translators and developers to read." %}</p>
{{ comment_form|crispy }}
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Save" %}" class="btn btn-primary" />
</div>
</div>
</form>
{% endif %}

</div>
{% endif %}


</div>

</div>

<div class="col-sm-3 source-info">

{% if unit.all_checks or unit.suggestions or variants or display_checks %}
<div class="panel panel-danger">
  <div class="panel-heading"><h4 class="panel-title">{% trans "Things to check" %}</h4></div>

  <div class="list-group">
  {% if unit.suggestions %}
    <div class="list-group-item check">
        <h5 class="list-group-item-heading">
            {% documentation_icon 'user/translating' 'suggestions' right=True %}
            {% icon "suggest.svg" %}
            {% trans "Suggestions" %}
        </h4>
        <p class="list-group-item-text">{% blocktrans count count=unit.suggestions|length %}There is {{ count }} suggestion for this string.{% plural %}There are {{ count }} suggestions for this string.{% endblocktrans %}</p>
        <p class="list-group-item-text list-buttons">
            <a href="#suggestions" data-toggle="tab" class="btn btn-warning">{% trans "View" %}</a>
        </p>
    </div>
  {% endif %}

    {% for check in unit.all_checks %}
    <div class="list-group-item check check-item {% if check.dismissed %}check-dismissed{% endif %}">
        <h5>
            {% documentation_icon 'user/checks' check.check_obj.doc_id right=True %}
            <span class="red">{% icon "alert.svg" %}</span>
            {{ check.get_name }}
            {% if check.is_enforced %}
              <span class="badge">{% trans "Enforced" %}</span>
            {% else %}
              <span class="check-number"></span>
            {% endif %}
        </h5>
        <p class="list-group-item-text check-description">{{ check.get_description }}</p>
        {% with fixup=check.get_fixup_json %}
        {% if fixup %}
        <p class="list-group-item-text list-buttons check-fixup">
            <a data-check-fixup="{{ fixup }}" class="btn btn-primary"
              {% if locked or not user_can_translate %}
                disabled="disabled"
              {% endif %}
            >{% trans "Fix string" %}</a>
        </p>
        {% endif %}
        {% endwith %}
        {% if not check.is_enforced %}
        <p class="list-group-item-text list-buttons">
            {% perm 'unit.check' check as user_can_ignore_check %}
            {% if user_can_ignore_check %}
              <a href="{% url 'js-ignore-check' check_id=check.id %}" data-check="{{ check.id }}" data-dismiss-all="{% url 'js-ignore-check-source' check_id=check.id %}" class="btn btn-warning check-dismiss check-dismiss-single">{% trans "Dismiss" %}</a>
              {% if user_can_edit_source %}
                <label class="dismiss-all"><input type="checkbox" name="dismiss-all-{{ check.id }}" /> {% trans "For all languages" %}</label>
              {% endif %}
            {% endif %}
            <a href="{% url 'js-ignore-check' check_id=check.id %}?revert=1" class="btn btn-info check-dismiss check-revert">{% trans "Reset" %}</a>
        </p>
        {% endif %}
    </div>
    {% endfor %}

    {% comment %}Display only checks{% endcomment %}
    {% for check in display_checks %}
    <div class="list-group-item check check-item">
        <h5>
            {% documentation_icon 'user/checks' check.check_obj.doc_id right=True %}
            <span class="green">{% icon "check.svg" %}</span>
            {{ check.get_name }}
        </h5>
        <p class="list-group-item-text check-description">{{ check.get_description }}</p>
    </div>
    {% endfor %}

  {% if unit.all_comments %}
    <div class="list-group-item check">
        <h5 class="list-group-item-heading">
            {% documentation_icon 'user/translating' 'comments' right=True %}
            {% icon "comment.svg" %}
            {% trans "Comments" %}
        </h5>
        <p class="list-group-item-text">{% blocktrans count count=unit.all_comments|length %}There is {{ count }} comment for this string.{% plural %}There are {{ count }} comments for this string.{% endblocktrans %}</p>
        <p class="list-group-item-text list-buttons">
            <a href="#comments" data-toggle="tab" class="btn btn-warning">{% trans "View" %}</a>
        </p>
    </div>
  {% endif %}

  {% if variants|length > 1 %}
    <div class="list-group-item check">
        <h5 class="list-group-item-heading">
            {% documentation_icon 'user/translating' 'variants' right=True %}
            {% icon "variant.svg" %}
            {% trans "Variants" %}
        </h5>
        <p class="list-group-item-text">{% blocktrans count count=variants|length %}There is {{ count }} variant of this string.{% plural %}There are {{ count }} variants of this string.{% endblocktrans %}</p>
        <p class="list-group-item-text list-buttons">
            <a href="#variants" data-toggle="tab" class="btn btn-warning">{% trans "View" %}</a>
        </p>
    </div>
  {% endif %}

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


<div class="panel panel-default">
  <div class="panel-heading">
  <h4 class="panel-title">
    {% with glossaries=unit.translation.component.project.glossaries %}
      {% for glossary in glossaries %}
        <a class="pull-right flip btn btn-link btn-xs btn-{{glossary.glossary_color}}" title="{% blocktrans with name=glossary.name %}Browse glossary {{ name }}{% endblocktrans %}" href="{% url 'browse' project=glossary.project.slug component=glossary.slug lang=unit.translation.language.code %}">{% icon "folder-search-outline.svg" %}</a>
      {% endfor %}
    {% endwith %}
    {% loading_icon "glossary-add" %}
    {% trans "Glossary" %}
  </h4>
  </div>
    <table class="table table-condensed table-simple">
        <thead>
        <tr>
        <th>{{ unit.translation.component.source_language }}</th>
        <th>{{ unit.translation.language }}</th>
        <th></th>
        <th></th>
        </tr>
        </thead>
        <tbody id="glossary-terms">
            {% include "snippets/glossary.html" %}
        </tbody>
    </table>
{% if user_can_add_glossary %}
    <div class="panel-footer panel-footer-links">
        <a class="btn btn-link green" href="#" data-toggle="modal" data-target="#add-glossary-form">{% icon "plus-circle.svg" %} {% trans "Add term to glossary" %}</a>
    </div>
    <form action="{% url 'js-add-glossary' unit_id=unit.id %}" method="POST" class="add-dict-inline double-submission">
    {% csrf_token %}
    <input type="hidden" name="next" value="{{ this_unit_url }}" />
    <div class="modal fade" tabindex="-1" role="dialog" id="add-glossary-form">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="{% trans "Close" %}"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">{% trans "Add term to glossary" %}</h4>
          </div>
          <div class="modal-body">
            {{ addterm_form|crispy }}
          </div>
          <div class="modal-footer">
            <input type="submit" class="btn btn-primary" value="{% trans "Save" %}" />
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    </form>
{% endif %}
</div>

<div class="panel panel-default string-info">
  <div class="panel-heading">
  <h4 class="panel-title">
    {% documentation_icon 'user/translating' 'source-context' right=True %}
  {% trans "String information" %}
  </h4>
  </div>
  <div class="list-group">
    {% if screenshots or user_can_add_screenshot %}
    <div class="list-group-item">
    <h5>{% if user_can_add_screenshot %} <a class="btn btn-link btn-xs pull-right flip" id="edit-screenshot" href="{% url 'screenshots' project=unit.translation.component.project.slug component=unit.translation.component.slug %}">{% icon "pencil.svg" %}</a>{% endif %}
    {% trans "Screenshot context" %}
    </h5>
    {% for screenshot in screenshots %}
    {% include "screenshots/screenshot_show.html" %}
    {% empty %}
    <em>{% trans "No screenshot currently associated." %}</em>
    {% endfor %}
    <br />
    <a class="btn btn-link green" href="#" data-toggle="modal" data-target="#add-screenshot-form">{% icon "plus-circle.svg" %} {% trans "Add screenshot" %}</a>
    </div>
    {% endif %}
    {% if unit.source_unit.explanation or user_can_edit_source %}
    <div class="list-group-item">
    <h5>
    {% if user_can_edit_source %} <a class="btn btn-link btn-xs pull-right flip" id="edit-context" href="#" data-toggle="modal" data-focus="#id_explanation" data-target="#context-edit-form">{% icon "pencil.svg" %}</a>{% endif %}
    {% trans "Explanation" %}
    </h5>
    {% if unit.source_unit.explanation %}
    <p>{{ unit.source_unit.explanation|markdown }}</p>
    {% else %}
    <em>{% trans "No explanation currently provided." %}</em>
    {% endif %}
    </div>
    {% endif %}
    {% if unit.context %}
    <div class="list-group-item">
    <h5>
        {{ unit.translation.component.context_label }}
    </h5>
    {% format_translation unit.context unit.translation.component.source_language search_match=search_query simple=True wrap=True %}
    </div>
    {% endif %}
    {% if unit.note %}
    <div class="list-group-item">
    <h5>
    {% trans "Source string comment" %}
    </h5>
    {{ unit.note|urlize_ugc }}
    </div>
    {% endif %}
    {% if unit.all_labels or user_can_edit_source %}
    <div class="list-group-item">
    <h5>
    {% if user_can_edit_source %} <a class="btn btn-link btn-xs pull-right flip" href="#" data-toggle="modal" data-focus="#id_labels" data-target="#context-edit-form">{% icon "pencil.svg" %}</a>{% endif %}
    {% trans "Labels" %}
    </h5>
    {% for label in unit.all_labels %}
      <a href="?q=label:{{ label.name|urlencode }}"><span class="label label-{{ label.color }}">{{ label.name }}</span></a>
    {% empty %}
    <em>{% trans "No labels currently set." %}</em>
    {% endfor %}
    </div>
    {% endif %}
    {% if unit.all_flags or user_can_edit_source %}
    <div class="list-group-item">
    <h5>
    {% if user_can_edit_source %} <a class="btn btn-link btn-xs pull-right flip" href="#" data-toggle="modal" data-focus="#id_extra_flags" data-target="#context-edit-form">{% icon "pencil.svg" %}</a>{% endif %}
    {% trans "Flags" %}
    </h5>
    {% if unit.all_flags %}
    {{ unit.all_flags.format }}
    {% else %}
    <em>{% trans "No flags currently set." %}</em>
    {% endif %}
    </div>
    {% endif %}
    {% if unit.location %}
    <div class="list-group-item">
    <h5>
    {% trans "Source string location" %}
    </h5>
    {% get_location_links user.profile unit %}
    </div>
    {% endif %}
    {% if unit.comment %}
    <div class="list-group-item">
    <h5>
    {% trans "Comments" %}
    </h5>
    {{ unit.comment }}
    </div>
    {% endif %}
    <div class="list-group-item">
    <h5>
    {% trans "String age" %}
    </h5>
    {{ unit.timestamp|naturaltime }}
    </div>
    <div class="list-group-item">
    <h5>
    {% trans "Source string age" %}
    </h5>
    {{ unit.source_unit.timestamp|naturaltime }}
    </div>
    {% if unit.position %}
    <div class="list-group-item">
    <h5>
    {% trans "Translation file" %}
    </h5>
    <span>
    {% if unit.translation.filename %}
      <span class="wrap-text">{% blocktrans with filename=unit.translation.filename position=unit.position %}{{ filename }}, string {{ position }}{% endblocktrans %}</span>
    {% else %}
      <span class="wrap-text">{% blocktrans with filename=unit.translation.filename %}string {{ position }}{% endblocktrans %}</span>
    {% endif %}
    {% if unit.pending %}
      <span class="badge" title="{% trans "Pending changes not yet committed to the Weblate repository" %}">{% trans "pending" %}</span>
    {% endif %}
    </span>
    </div>
    {% endif %}
  </div>
</div>

</div>

</div>

<a href="{% url 'js-translate' unit_id=unit.id service="__service__" %}" class="hidden" id="js-translate" data-services="{{ machinery_services }}"></a>

<form method="post" action="{% url 'edit_context' pk=unit.source_unit.pk %}">
{% csrf_token %}
<input type="hidden" name="next" value="{{ this_unit_url }}" />
<div class="modal fade" tabindex="-1" role="dialog" id="context-edit-form">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="{% trans "Close" %}"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">{% trans "Edit additional string info" %}</h4>
      </div>
      <div class="modal-body">
        {% crispy context_form %}
        {% if unit.translation.check_flags or unit.translation.component.check_flags or unit.flags %}
          <div class="form-group">
            <label>
              {% trans "Inherited flags" %}
              {% documentation_icon 'admin/checks' 'custom-checks' %}
            </label>
            <div class="controls">
            {% if unit.flags %}
              <p>
                {% blocktrans with filename=unit.translation.filename flags=unit.flags %}<code>{{ flags }}</code> was extracted from {{ filename }}.{% endblocktrans %}
              </p>
            {% endif %}
            {% if unit.translation.check_flags %}
              <p>
                {% blocktrans with object=unit.translation flags=unit.translation.check_flags %}<code>{{ flags }}</code> is inherited from {{ object }}.{% endblocktrans %}
              </p>
            {% endif %}
            {% if unit.translation.component.check_flags %}
              <p>
                {% blocktrans with object=unit.translation.component flags=unit.translation.component.check_flags %}<code>{{ flags }}</code> is inherited from {{ object }}.{% endblocktrans %}
              </p>
            {% endif %}
            </div>
          </div>
        {% endif %}
      </div>
      <div class="modal-footer">
        <input type="submit" class="btn btn-primary" value="{% trans "Save" %}" />
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</form>

{% endwith %}

{% if user_can_add_unit %}
  <form action="{% url 'new-unit' project=unit.translation.component.project.slug component=unit.translation.component.slug lang=unit.translation.language.code %}" method="post">
    {% csrf_token %}
    <input type="hidden" name="next" value="{{ this_unit_url }}" />
    <div class="modal fade" tabindex="-1" role="dialog" id="add-unit-form">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="{% trans "Close" %}"><span aria-hidden="true">&times;</span></button>
            <h4 class="panel-title">{% blocktrans with existing=unit.get_source_plurals.0 %}Add a new variant for "{{ existing }}"{% endblocktrans %}</h4>
          </div>
          <div class="modal-body">
            {{ new_unit_form|crispy }}
          </div>
          <div class="modal-footer">
            <input type="submit" class="btn btn-primary" value="{% trans "Add" %}" />
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </form>
{% endif %}

{% if screenshot_form %}
  <form action="{% url 'screenshots' project=unit.translation.component.project.slug component=unit.translation.component.slug %}" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="modal fade" tabindex="-1" role="dialog" id="add-screenshot-form">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="{% trans "Close" %}"><span aria-hidden="true">&times;</span></button>
            <h4 class="panel-title">{% trans "Add new screenshot" %}</h4>
          </div>
          <div class="modal-body">
            {{ screenshot_form|crispy }}
            <input type="hidden" name="source" value="{{ unit.pk }}" />
          </div>
          <div class="modal-footer">
            <input type="submit" class="btn btn-primary" value="{% trans "Upload" %}" />
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </form>
{% endif %}

{% endblock %}
