{% extends "base.html" %}
{% load compress %}
{% load i18n %}
{% load crispy_forms_tags %}
{% load translations %}
{% load icons %}
{% 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/zen.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 }}">{{ object.component.project }}</a></li>
{% if object.component.slug != "-" %}
{% include "snippets/component-breadcrumb.html" with object=object.component %}
{% endif %}
{% include "snippets/translation-breadcrumb.html" %}
<li><a href="{% url 'zen' project=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=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 %}

{% if object.component.slug == "-" %}
  {% for component in project.component_set.all %}
    {% include "snippets/component/state.html" with object=component %}
  {% endfor %}
{% else %}
  {% include "snippets/component/state.html" with object=object.component %}
{% endif %}

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

<a href="{% url 'translate' project=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="query-container">
  <form method="GET" class="result-page-form">
    {% crispy search_form  %}
  </form>
</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=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 %}
