{% 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="{{ unit.translation.component.project.get_absolute_url }}">{{ unit.translation.component.project }}</a></li>
<li><a href="{{ unit.translation.component.get_absolute_url }}">{{ unit.translation.component.name }}</a></li>
<li><a href="{{ unit.translation.get_absolute_url }}">{{ unit.translation.language }}</a></li>
<li><a href="{{ unit.translation.get_translate_url }}">{% trans "translate" %}</a></li>
<a class="pull-right flip" href="{{ object.get_widgets_url }}">
<img src="{% url 'widget-image' project=object.component.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 "show-component-state.html" with object=unit.translation.component %}

{% perm 'unit.edit' unit as user_can_translate %}
{% 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_mt %}
{% perm 'memory.view' unit.translation as user_can_use_tm %}
{% perm 'source.edit' unit.translation as user_can_edit_source %}
{% perm 'unit.check' unit.translation as user_can_ignore_check %}
{% perm 'screenshot.add' project as user_can_add_screenshot %}
{% perm 'comment.add' project as user_can_add_comment %}
{% perm 'glossary.add' project as user_can_add_glossary %}

<div class="btn-group pull-right flip btn-group-settings" role="group">
{% if user_can_translate %}
<a href="{% url 'zen' project=unit.translation.component.project.slug component=unit.translation.component.slug lang=unit.translation.language.code %}?{{ 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 nearby=unit.nearby nearby_keys=unit.nearby_keys variants=unit.variants %}

<div class="query-container">
  <form action="{{ unit.translation.get_translate_url }}" 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.translation.is_source %}panel-warning{% else %}panel-default{% endif %}">

  <div class="panel-heading">
  <a class="btn btn-link btn-xs pull-right flip" data-clipboard-text="{{ site_url }}{{ unit.get_absolute_url }}" title="{% trans "Copy permalink" %}">{% icon "link.svg" %}</a>
  <h4 class="panel-title">
    {% if unit.translation.is_source %}
        {% trans "Source string" %}
    {% else %}
        {% trans "Translation" %}
    {% endif %}
    {% include "snippets/unit-readonly-badge.html" %}
  </h4></div>
  <div class="panel-body">
    {% csrf_token %}
    {% if antispam %}<div id="s_content">{{ antispam|crispy }}</div>{% endif %}

    <!-- secondary -->
    {% if secondary %}
    {% for secondary_unit in secondary %}
    <div class="form-group">
    <label>{{ secondary_unit.translation.language }}</label>
    {% perm 'unit.edit' secondary_unit as user_can_edit_secondary %}
    {% if user_can_edit_secondary %}
    <a title="{% trans "Edit string" %}"href="{{ secondary_unit.get_absolute_url }}" class="btn btn-link btn-xs">{% icon "pencil.svg" %}</a>
    {% 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.project.source_language diff=unit.previous_source num_plurals=unit.translation.plural.number %}
    </div>
    {% endif %}

    {% if unit.translation.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.project.source_language search_match=search_query num_plurals=unit.translation.plural.number %}
            </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.project.source_language search_match=search_query num_plurals=unit.translation.plural.number unit=unit %}
            </div>
        {% endif %}
    {% endif %}
    {% if unit.note %}
        <!-- note -->
        <div class="form-group help-block">
        <label>{% trans "Source string comment" %}</label>
        {% format_translation unit.note unit.translation.component.project.source_language %}
        </div>
    {% endif %}

    {% if 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.explanation|markdown }}
                </div>
            </div>
        </div>
        </div>
    {% endif %}

    {% if not unit.translation.is_source %}
        {% if not user.profile.hide_source_secondary or not secondary %}
            <!-- source -->
            <div class="form-group">
            {% if unit.context %}
                <div class="pull-right flip">
                <label>{{ unit.translation.component.context_label }}</label>
                {{ unit.context }}
                </div>
            {% endif %}
            <label>{{ unit.translation.component.project.source_language }}</label>
            <a title="{% trans "Edit source string" %}" href="{{ unit.source_info.get_absolute_url }}" class="btn btn-link btn-xs">{% icon "pencil.svg" %}</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 %}
            {% format_translation unit.source unit.translation.component.project.source_language search_match=search_query num_plurals=unit.translation.plural.number unit=unit %}
            </div>
        {% endif %}
    {% endif %}

    <!-- edit form -->
    {% crispy form %}
  </div>
  <div class="panel-footer">
    <button class="btn btn-primary" type="submit" name="save" tabindex="150"
    {% if locked or not user_can_translate %}
        disabled="disabled"
        {% if locked %}
            title="{% trans "This translation is currently locked." %}"
        {% elif 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 "Contribution to this translation requires you to agree with a 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 unit.translation.component.enable_suggestions %}
    <button class="btn btn-warning btn-spaced" type="submit" name="suggest" tabindex="151"
    {% if project_locked or not user_can_suggest %}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." %}"
    {% endif %}
    >{% icon "suggest.svg" %} {% trans "Suggest" %}</button>
    {% endif %}
    <button class="btn btn-warning btn-spaced" type="submit" name="skip" tabindex="152">{% 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 "Nearby 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_mt %}
<li><a href="#machine" data-toggle="tab" id="toggle-machine" data-load="mt" title="{% trans "Machine translation suggestions" %}">{% trans "Machine translation" %}</a></li>
{% endif %}
{% if user_can_use_tm %}
<li><a href="#memory" data-toggle="tab" id="toggle-machine" data-load="memory">{% trans "Translation memory" %}</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" %}</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 %}
</div>

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

{% if variants|length > 1 %}
<div class="tab-pane" id="variants">
{% include "snippets/embed-units.html" with current_unit=unit units=variants %}
</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">
<table class="table table-condensed">
    <thead>
    <tr><th>{% trans "Component" %}</th><th>{% trans "Translation" %}</th><th></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="3" class="warning">{% blocktrans count count=others.matching|length %}Following string has same context and same source.{% plural %}Following strings have same context and same source.{% endblocktrans %}</th></tr>
    <tbody>
    {% for item in others.matching %}
    {% include "trans/other-row.html" %}
    {% endfor %}
    </tbody>
    {% endif %}
    {% if others.source %}
    <tr><th colspan="3" class="warning">{% blocktrans count count=others.source|length %}Following string has different context but same source.{% plural %}Following strings have different contexts but 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="3" class="warning">{% blocktrans count count=others.context|length %}Following string has different source but same context.{% plural %}Following strings have different sources but same context.{% endblocktrans %}</th></tr>
    <tbody>
    {% for item in others.context %}
    {% include "trans/other-row.html" %}
    {% endfor %}
    </tbody>
    {% endif %}
    </table>
</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_mt %}
<div class="tab-pane" id="machine">
<table class="table table-compact table-striped">
<thead>
<tr>
<th>{% trans "Translation" %}</th>
<th>{% trans "Source" %}</th>
<th>{% trans "Service" %}</th>
<th>{% trans "Quality" %}</th>
<th colspan="2">
{% loading_icon "mt" %}
</th>
<tr>
</thead>
<tbody id="mt-translations">
</tbody>
</table>
</div>
{% endif %}

{% if user_can_use_tm %}
<div class="tab-pane" id="memory">
<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 "memory" %}
</th>
<tr>
</thead>
<tbody id="memory-translations">
</tbody>
</table>
</div>
{% endif %}

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

{% if unit.all_comments %}
  {% with this_unit_url as next_url %}
    {% include "list-comments.html" with object=unit.translation comments=unit.all_comments %}
  {% endwith %}
{% 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 }}
            <span class="check-number"></span>
        </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">{% trans "Fix string" %}</a>
        </p>
        {% endif %}
        {% endwith %}
        {% if not check.is_enforced %}
        <p class="list-group-item-text list-buttons">
            {% if user_can_ignore_check %}
            <a href="{% url 'js-ignore-check' check_id=check.id %}" class="btn btn-warning check-dismiss check-dismiss-single">{% trans "Dismiss" %}</a>
            {% if user_can_edit_source %}
            <a href="{% url 'js-ignore-check-source' check_id=check.id %}" class="btn btn-warning check-dismiss check-dismiss-all">{% trans "Dismiss for all languages" %}</a>
            {% 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 for this string.{% plural %}There are {{ count }} variants for 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">
    <a class="pull-right flip btn btn-link btn-xs" title="{% trans "Manage glossary" %}" href="{% url 'show_glossary' project=unit.translation.component.project.slug lang=unit.translation.language.code %}">{% icon "pencil.svg" %}</a>
    {% loading_icon "glossary-add" %}
    {% trans "Glossary" %}
  </h4>
  </div>
    <table class="table table-condensed table-simple">
        <thead>
        <tr>
        <th>{{ unit.translation.component.project.source_language }}</th>
        <th>{{ unit.translation.language }}</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 "Source information" %}
  </h4>
  </div>
  <div class="list-group">
    {% with unit.source_info.screenshots.order as screenshots %}
    {% 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 %}
    </div>
    {% endif %}
    {% endwith %}
    {% if 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.explanation %}
    <p>{{ 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.project.source_language search_match=search_query simple=True %}
    </div>
    {% endif %}
    {% if unit.note %}
    <div class="list-group-item">
    <h5>
    {% trans "Source string comment" %}
    </h5>
    {% format_translation unit.note unit.translation.component.project.source_language search_match=search_query simple=True %}
    </div>
    {% endif %}
    {% if unit.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.labels.all %}
    {{ label }}
    {% 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 "Source string age" %}
    </h5>
    {{ unit.timestamp|naturaltime }}
    </div>
    {% if unit.position %}
    <div class="list-group-item">
    <h5>
    {% trans "Translation file" %}
    </h5>
    <span class="long-filename">
    {% blocktrans with unit.translation.filename as filename and unit.position as position %}{{ filename }}, string {{ position }}{% endblocktrans %}
    </span>
    </div>
    {% endif %}
  </div>
</div>

</div>

</div>

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

<form method="post" action="{% url 'edit_context' pk=unit.source_info.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 %}
      </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 %}

{% endblock %}
