{% extends "translation_projects/terminology/base.html" %}

{% load i18n assets render_pager store_tags terminology_tags locale %}

{% get_current_language as LANGUAGE_CODE %}

{% block css %}
{{ block.super }}
{% assets "css_editor" %}
<link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
{% endassets %}
{% endblock css %}

{% block scripts_extra %}
{% assets "js_admin_general_app" %}
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}
{% endblock scripts_extra %}

{% block content %}
<div class="settings-container centered">
{% if formset %}
  <div class="pagination-control">
  {{ objects|render_pager }}
  </div>

  <div class="translate-form">
    <form action="" method="post">
      {% csrf_token %}
      {{ formset.management_form }}
      <table dir="{% locale_dir %}">
      <thead>
      <tr lang="{{ LANGUAGE_CODE }}">
        <th colspan="1" rowspan="1" class="translate-table-title translate-original">{% trans "Term" %}</th>
        <th colspan="1" rowspan="1" class="translate-table-title translate-translation">{% trans "Translation" %}</th>
        <th colspan="1" rowspan="1" class="translate-table-title translate-edit">{% trans "Delete" %}</th>
      </tr>
      </thead>
      {% for form in formset.forms %}
      <tr class="item">
        {% render_term_edit form %}
        <td class="DELETE">{% for hidden_field in form.hidden_fields %}{{ hidden_field }}{% endfor %}
          {{ form.DELETE }}
        </td>
      </tr>
      {% endfor %}
      </table>
      <p class="buttons">
        <input type="submit" class="btn" name="submit" value="{% trans 'Save Changes' %}" />
      </p>
    </form>
  </div>

  <div class="pagination-control">
  {{ objects|render_pager }}
  </div>
{% else %}
  <h2>{% trans 'No terminology file has been found' %}</h2>
  <p>
  {% blocktrans trimmed %}
  In order to use the terminology feature, make sure to add to your translation
  project a "pootle-terminology" file named after your project's extension.
  {% endblocktrans %}
  </p>
{% endif %}
</div>
{% endblock %}
