{% extends "base.html" %}
{% load url from future %}
{% load i18n %}
{% load static %}
{% load translations %}
{% load crispy_forms_tags %}

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

{% block breadcrumbs %}
<li><a href="{{ unit.translation.subproject.project.get_absolute_url }}">{{ unit.translation.subproject.project }}</a></li>
<li><a href="{{ unit.translation.subproject.get_absolute_url }}">{{ unit.translation.subproject.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>
{% endblock %}

{% block content %}

{% if perms.trans.save_translation %}
<a href="{% url 'zen' project=unit.translation.subproject.project.slug subproject=unit.translation.subproject.slug lang=unit.translation.language.code %}?sid={{ search_id }}" title="{% trans "Edit in Zen mode" %} (experimental)" class="btn btn-default pull-right flip"><i class="fa fa-arrows-alt"></i> {% trans "Zen" %}</a>
{% endif %}

{% with unit.translation as object %}
{% include "show-lock.html" %}
{% endwith %}

{% with unit.get_comments as comments %}

<ul class="pagination">
<li><a id="button-first" href="{{ first_unit_url }}" title="{% trans "First" %}"><i class="fa fa-step-backward"></i></a></li>
<li><a id="button-prev" href="{{ prev_unit_url }}" title="{% trans "Previous" %}"><i class="fa fa-backward"></i></a></li>
<li><a>
{% if filter_name %}
{% blocktrans %}{{ filter_name }} ({{ filter_pos }} / {{ filter_count }}){% endblocktrans %}
{% else %}
{% blocktrans with unit.position as position %}{{ position }} / {{ total }}{% endblocktrans %}
{% endif %}
</a></li>
<li><a id="button-next" href="{{ next_unit_url }}" title="{% trans "Next" %}"><i class="fa fa-forward"></i></a></li>
<li><a id="button-end" href="{{ last_unit_url }}" title="{% trans "Last" %}"><i class="fa fa-step-forward"></i></a></li>
</ul>


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

<form action="{{ this_unit_url }}" method="post" class="translation-form">
<div class="panel panel-primary">

  <div class="panel-heading"><span class="pull-right flip">
  <i class="fa fa-keyboard-o html-tooltip" data-toggle="tooltip" data-placement="bottom"
    data-title="{% trans "Keyboard shortcuts available:"%}<br />{% trans "Ctrl+Enter - Save" %}<br />{% trans "Alt+PageUp/PageDown/Home/End - Translation units navigation"%}" 
  ></i>
  </span><h4 class="panel-title">{% trans "Translate" %}</h4></div>
  <div class="panel-body">
    {% csrf_token %}
    {% if antispam %}<div id="s_content">{{ antispam|crispy }}</div>{% endif %}
    {% if secondary %}
    {% for unit in secondary %}
    <div class="form-group">
    <label>{{ unit.translation.language }}</label>
    {% format_translation unit.target unit.translation.language %}
    </div>
    {% endfor %}
    {% endif %}
    {% if unit.previous_source and unit.fuzzy %}
    <div class="form-group">
    <label>{% trans "Source change" %}</label>
    {% format_translation unit.source unit.translation.language unit.previous_source %}
    </div>
    {% endif %}
    <div class="form-group">
    <label>{% trans "Source" %}</label>
    {% format_translation unit.source search_match=search_query %}
    </div>
    {{ form|crispy }}
  </div>
  <div class="panel-footer">
    {% if not unit.only_vote_suggestions or perms.trans.override_suggestion %}
    {% if perms.trans.save_translation %}
    <input class="btn btn-default" type="submit" value="{% trans "Save" %}" name="save" tabindex="150" {% if locked %}disabled="disabled"{% endif %} />
    {% else %}
    {% url 'login' as login_url %}
    {% with unit.translation.get_translate_url as translate_url %}
    {% blocktrans %}<a href="{{ login_url }}?next={{ translate_url }}">Log in</a> for saving translations.{% endblocktrans %}
    {% endwith %}
    {% endif %}
    {% endif %}

    {% if unit.translation.subproject.enable_suggestions %}
    {% if perms.trans.add_suggestion %}
    <input class="btn btn-default" type="submit" value="{% trans "Suggest" %}" name="suggest" tabindex="151" {% if project_locked %}disabled="disabled"{% endif %} />
    {% else %}
    {% trans "No privileges for adding suggestions!" %}
    {% endif %}
    {% endif %}

    {% if perms.trans.save_translation %}
    <div class="pull-right flip hidden-xs">
    {% trans "Commit message:" %} 
    <input type="text" name="commit_message" class="tooltip-control" 
        data-toggle="tooltip" data-placement="bottom"
        placeholder="{% trans "Additional text to include in the commit message." %}" 
        tabindex="152" 
        value="{{ unit.translation.commit_message }}" 
        title="{% trans "You can leave this empty in most cases as Weblate generates basic commit messages automatically." %}"
    />
    </div>
    {% endif %}
  </div>
</div>
</form>

<ul class="nav nav-pills">
<li class="active"><a href="#nearby" data-toggle="tab" title="{% trans "Messages placed around this one" %}">{% trans "Nearby messages" %}</a></li>
{% if unit.suggestions %}
<li><a href="#suggestions" data-toggle="tab">{% trans "Suggestions" %} <span class="badge">{{ unit.suggestions.count }}</span></a></li>
{% endif %}
{% if others %}
<li><a href="#others" data-toggle="tab">{% trans "Other translations" %} <span class="badge">{{ others.count }}</span></a></li>
{% endif %}
{% if comments or perms.trans.add_comment %}
<li><a href="#comments" data-toggle="tab">{% trans "Comments" %}{% if comments %} <span class="badge">{{ comments.count }}</span>{% endif %}</a></li>
{% endif %}
{% if mt_enabled and perms.trans.use_mt %}
<li><a href="#machine" data-toggle="tab" data-load="mt" title="{% trans "Machine translation suggestions" %}">{% trans "Machine translation" %}</a></li>
{% endif %}
<li><a href="#search" data-toggle="tab">{% trans "Search" %}</a></li>
<li><a href="#history" data-toggle="tab" data-href="{% url 'js-unit-changes' unit_id=unit.id %}" 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">
<div class="panel panel-primary">
  <div class="panel-heading"><h4 class="panel-title">{% trans "Nearby messages" %}</h4></div>
  <div class="panel-body">
<table class="table table-condensed">
<thead>
<tr><th></th><th>{% trans "Source" %}</th><th>{% trans "Translation" %}</th><th>{% trans "State" %}</th></tr>
</thead>
<tbody>
{% for item in unit.nearby %}
<tr {% if unit.position == item.position %}class="current_translation"{% endif %}>
<td class="number"><a href="{{ item.get_absolute_url }}">{{ item.position }}</a></td>
<td><a href="{{ item.get_absolute_url }}">{% format_translation item.source %}</a></td>
<td><a href="{{ item.get_absolute_url }}">{% format_translation item.target unit.translation.language %}</a></td>
<td>{% get_state_flags item %}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>

{% if unit.suggestions %}
<div class="tab-pane" id="suggestions">
<form action="{{ this_unit_url }}" method="post">
    {% csrf_token %}
<div class="panel panel-primary">
  <div class="panel-heading"><h4 class="panel-title">{% trans "Suggestions" %}</h4></div>
  <div class="panel-body">

{% for suggestion in unit.suggestions %}
<h5><strong>
{% if suggestion.user %}
{% blocktrans with suggestion.get_user_display as user %}{{ user }} has suggested{% endblocktrans %}
{% else %}
{% trans "Anonymous user has suggested" %}
{% endif %}
</strong></h5>
{% format_translation suggestion.target unit.translation.language unit.target %}
{% if unit.can_vote_suggestions %}
<p class="help-block">
{% blocktrans count count=suggestion.get_num_votes %}{{ count }} vote{% plural %}{{ count }} votes{% endblocktrans %}
</p>
{% endif %}
<div class="pull-right flip">
{% if unit.can_vote_suggestions and perms.trans.vote_suggestion %}
<button type="submit" class="btn btn-success btn-xs" name="upvote" value="{{ suggestion.id }}"><i class="fa fa-thumbs-up"></i> {% trans "Vote for" %}</button>
<button type="submit" class="btn btn-danger btn-xs" name="downvote" value="{{ suggestion.id }}"><i class="fa fa-thumbs-down"></i> {% trans "Vote against" %}</button>
{% endif %}
{% if not unit.only_vote_suggestions or perms.trans.override_suggestion %}
{% if perms.trans.accept_suggestion %}
<button type="submit" class="btn btn-success btn-xs" name="accept" value="{{ suggestion.id }}"><i class="fa fa-check"></i> {% trans "Accept" %}</button>
{% endif %}
{% if perms.trans.delete_suggestion %}
<button type="submit" class="btn btn-danger btn-xs" name="delete" value="{{ suggestion.id }}"><i class="fa fa-trash"></i> {% trans "Delete" %}</button>
{% endif %}
{% endif %}
</div>
<div class="clearfix"></div>
{% endfor %}
  </div>
</div>
</form>
</div>
{% endif %}

{% if others %}
<div class="tab-pane" id="others">
<div class="panel panel-primary">
  <div class="panel-heading"><h4 class="panel-title">{% trans "Other translations" %}</h4></div>
  <div class="panel-body">
<table class="table table-condensed">
    <thead>
    <tr><th>{% trans "Component" %}</th><th>{% trans "Translation" %}</th><th>{% trans "State" %}</th><th></th></tr>
    </thead>
    <tbody>
    {% for item in others %}
    <tr>
    <td>{{ item.translation.subproject }}</td>
    <td><a href="{{ item.get_absolute_url }}">{% format_translation item.target item.translation.language unit.target %}</a></td>
    <td>{% get_state_flags item %}</td>
    <td>
    {% if perms.trans.save_translation %}
    <a class="mergebutton small-button btn btn-default" href="{{ unit.translation.get_translate_url}}?sid={{ search_id }}&amp;offset={{ offset }}&amp;checksum={{ unit.checksum }}&amp;merge={{ item.id }}" title="{% trans "Use this translation for all subprojects" %}">{% trans "Use this translation" %}</a>
    {% endif %}
    </td>
    </tr>
    {% endfor %}
    </tbody>
    </table>
  </div>
</div>
</div>
{% endif %}

<div class="tab-pane" id="search">
<form action="{{ unit.translation.get_translate_url }}" method="GET">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Search" %}</h4></div>
  <div class="panel-body">
{{ search_form|crispy }}
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Search" %}" class="btn btn-default" />
</div>
</div>
</form>
</div>

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

{% if mt_enabled and perms.trans.use_mt %}
<div class="tab-pane" id="machine">
<div class="panel panel-primary">
<div class="panel-heading">
  <h4 class="panel-title">
    {% trans "Machine translation" %}
    <i id="mt-loading" class="fa fa-spinner fa-spin pull-right flip"></i>
  </h4></div>
  <div class="panel-body">
<table class="table table-compact table-striped">
<thead>
<tr>
<th>{% trans "Translation" %}</th>
<th>{% trans "Source" %}</th>
<th>{% trans "Service" %}</th>
<th></th>
<tr>
</thead>
<tbody id="machine-translations">
</tbody>
</table>
<ul id="mt-errors">
</ul>
</div>
</div>
</div>
{% endif %}

{% if comments or perms.trans.add_comment %}
<div class="tab-pane" id="comments">

{% if comments %}
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Comments" %}</h4></div>
  <div class="panel-body">
    {% include "list-comments.html" %}
  </div>
</div>
{% endif %}

{% if perms.trans.add_comment %}
<form method="post" action="{% url 'comment' pk=unit.id %}">
{% csrf_token %}
<input type="hidden" name="next" value="{{ this_unit_url }}" />
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "New comment" %}</h4></div>
  <div class="panel-body">
  <p class="help-block">{% trans "You can share comments about this string with other translators and developers." %}</p>
{{ comment_form|crispy }}
</div>
<div class="panel-footer">
<input type="submit" value="{% trans "Save" %}" class="btn btn-default" />
</div>
</div>
</form>
{% endif %}

</div>
{% endif %}


</div>

</div>

<div class="col-sm-3 small">

{% with unit.active_checks as checks %}
{% if checks or unit.suggestions or others%}
<div class="panel panel-danger">
  <div class="panel-heading"><h4 class="panel-title">{% trans "Things to check" %}</h4></div>
  <div class="panel-body">
  {% if unit.suggestions %}
  <div class="alert alert-warning check"><a href="#suggestions" data-toggle="tab" class="alert-link">{% trans "Suggestions" %}</a> <span class="badge pull-right flip">{{ unit.suggestions.count }}</span></div>
  {% endif %}
  {% if others %}
  <div class="alert alert-warning check"><a href="#others" data-toggle="tab" class="alert-link">{% trans "Other translations" %}</a> <span class="badge pull-right flip">{{ others.count }}</span></div>
  {% endif %}
  {% show_checks checks user %}
  {% if comments %}
  <div class="alert alert-info check"><a href="#comments" data-toggle="tab" class="alert-link">{% trans "Comments" %}</a> <span class="badge pull-right flip">{{ comments.count }}</span></div>
  {% endif %}
  </div>
</div>
{% endif %}
{% endwith %}

<div class="panel panel-primary">
  <div class="panel-heading"><h4 class="panel-title">{% trans "Glossary" %}</h4></div>
  <div class="panel-body">
    {% if glossary %}
    <table class="table table-condensed table-striped">
        <thead>
        <tr>
        <th>{% trans "Source" %}</th>
        <th>{% trans "Translation" %}</th>
        <th></th>
        </tr>
        </thead>
        <tbody>
    {% for item in glossary %}
        <tr>
        <td>{{ item.source }}</td>
        <td class="target">{% format_translation item.target unit.translation.language simple=True %}</td>
        <td>
        {% if perms.trans.save_translation %}
        <a class="copydict btn btn-default btn-xs" title="{% trans "Copy word to translation" %}">{% trans "Copy" %}</a>
        {% endif %}
        </td>
        </tr>
    {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p>{% trans "No related strings were found in the glossary." %}</p>
    {% endif %}
  </div>
  <div class="panel-footer">
    <a href="{% url 'show_dictionary' project=unit.translation.subproject.project.slug lang=unit.translation.language.code %}" class="btn btn-default">{% trans "Manage glossary" %}</a>
  </div>
</div>

<div class="panel panel-primary">
  <div class="panel-heading"><h4 class="panel-title">{% trans "Source information" %}</h4></div>
  <div class="panel-body">
  <table class="table table-striped table-condensed">
    {% if unit.context %}
    <tr>
    <th>{% trans "Context" %}</th>
    </tr>
    <tr>
    <td>{% format_translation unit.context search_match=search_query simple=True %}</td>
    </tr>
    {% endif %}
    {% if unit.flags or perms.trans.edit_flags %}
    <tr>
    <th>{% trans "Flags" %}</th>
    </tr>
    <tr>
    <td>
    {{ unit.all_flags|join:", " }}
    {% if perms.trans.edit_flags %} <a class="button smallbutton" href="{% url 'review_source' project=unit.translation.subproject.project.slug subproject=unit.translation.subproject.slug  %}?checksum={{ unit.checksum }}"><i class="fa fa-pencil"></i></a>{% endif %}
    </td>
    </tr>
    {% endif %}
    {% include "unit-details.html" %}
    <tr>
    <th>{% trans "String priority" %}</th>
    </tr>
    <tr>
    <td>
    {{ unit.source_info.get_priority_display }}
    {% if perms.trans.edit_priority %} <a class="button smallbutton" href="{% url 'review_source' project=unit.translation.subproject.project.slug subproject=unit.translation.subproject.slug  %}?checksum={{ unit.checksum }}"><i class="fa fa-pencil"></i></a>{% endif %}
    </td>
    </tr>
    {% with unit.active_source_checks as checks %}
    {% if checks %}
    <tr>
    <th>{% trans "Failing checks" %}</th>
    </tr>
    <tr>
    <td>{% show_checks checks user %}</td>
    </tr>
    {% endif %}
    {% endwith %}
  </table>
  </div>
</div>

</div>

</div>

<a href="{% url 'js-translate' unit_id=unit.id %}" class="hidden" id="js-translate"></a>
<a href="{% url 'js-mt-services' %}" class="hidden" id="js-mt-services"></a>
{% if update_lock %}
<a href="{% url 'js-lock' project=unit.translation.subproject.project.slug subproject=unit.translation.subproject.slug lang=unit.translation.language.code %}" class="hidden" id="js-lock"></a>
{% endif %}

{% endwith %}

{% endblock %}