{% extends "base.html" %}

{% load crispy_forms_tags i18n icons static translations %}

{% block extra_script %}
  <script defer src="{% static 'editor/base.js' %}"></script>
  <script defer src="{% static 'editor/zen.js' %}"></script>
{% endblock extra_script %}

{% block breadcrumbs %}
  {% path_object_breadcrumbs path_object %}
  <li class="breadcrumb-item">
    <a href="{% url 'zen' path=object.get_url_path %}">{% translate "Zen" %}</a>
  </li>
  <a class="float-end ms-auto" href="{{ object.get_widgets_url }}">
    <img src="{% url 'widget-image' path=object.get_url_path widget='svg' color='badge' extension='svg' %}?native=1" />
  </a>
{% endblock breadcrumbs %}

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

{% block content %}

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

  <div class="btn-group float-end btn-group-settings" role="group">

    <a href="{% url 'translate' path=object.get_url_path %}?{{ search_url }}"
       data-params="{{ search_url }}"
       title="{% translate "Edit in single string mode" %}"
       class="btn btn-link">{% icon "close.svg" %} {% translate "Exit Zen" %}</a>

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

  <div class="query-container">
    <form method="get" class="result-page-form double-submission">
      {% crispy search_form %}
      <p id="search-cache-help" class="form-text mb-0">
        {% translate "Search results stay fixed while you translate. Refresh results to show strings matching the filters now." %}
      </p>
    </form>
  </div>

  <table class="zen table table-sm {% 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' path=object.get_url_path %}?{{ search_url }}"
             class="hidden"
             id="zen-load"
             data-offset="{{ offset }}"></a>
        </td>
      </tr>
    </tfoot>
  </table>

{% endblock content %}