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

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

{% block breadcrumbs %}
<li><a href="{{ object.component.project.get_absolute_url }}">{{ object.component.project }}</a></li>
<li><a href="{{ object.component.get_absolute_url }}">{{ object.component.name }}</a></li>
<li><a href="{{ object.get_absolute_url }}">{{ object.language }}</a></li>
<li><a href="{% url 'zen' project=object.component.project.slug component=object.component.slug lang=object.language.code %}">{% trans "zen" %}</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 %}

{% include "show-component-state.html" with object=object.component %}

<div class="btn-group pull-right flip btn-group-settings" role="group">

<a href="{% url 'translate' project=object.component.project.slug component=object.component.slug lang=object.language.code %}?{{ search_url }}" data-params="{{ search_url }}" title="{% trans "Edit in single string mode" %}" class="btn btn-link">{% icon "close.svg" %} {% trans "Exit Zen" %}</a>

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

<div class="btn-group">
<ul class="pagination unit-navi">
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="{% trans "Edit search parameters" %}" id="search-dropdown">
{% icon "magnify.svg" %}
{% blocktrans %}{{ filter_name }} ({{ filter_count }}){% endblocktrans %}
<span class="caret"></span>
</a>
  <div class="dropdown-menu">

<div class="panel-group">
<form action="" method="GET">
{{ search_form|crispy }}
<input type="submit" value="{% trans "Search" %}" class="btn btn-primary" />
</form>
</div>

</div>
</li>
</ul>
</div>

<table class="zen table table-condensed {% if user.profile.zen_mode == user.profile.ZEN_HORIZONTAL %}zen-horizontal{% endif %}">
{% include 'zen-units.html' %}
<tfoot>
<tr><td colspan="3" class="loading-icon">
{% loading_icon "next" %}
<a href="{% url 'load_zen' project=object.component.project.slug component=object.component.slug lang=object.language.code %}?{{ search_url }}" class="hidden" id="zen-load" data-offset="{{ offset }}"></a>
</td></tr>
</tfoot>
</table>

{% endblock %}
