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

{% block breadcrumbs %}
<li><a href="{{ object.project.get_absolute_url }}">{{ object.project }}</a></li>
{% include "snippets/component-breadcrumb.html" %}
<li><a href="{% url 'matrix' project=object.project.slug component=object.slug %}">{% trans "Matrix" %}</a></li>
{% endblock %}

{% block content %}

{% if languages %}
<table class="table matrix">
<thead>
<tr>
<th><a href="{% url 'translation' project=object.project.slug component=object.slug lang=object.source_language.code %}">{{ object.source_language }}</a></th>
{% for language in languages %}
<th><a href="{% url 'translation' project=object.project.slug component=object.slug lang=language.code %}">{{ language }}</a></th>
{% endfor %}
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr><td colspan="3" class="loading-icon">
{% loading_icon "next" %}
<a href="{% url 'matrix-load' project=object.project.slug component=object.slug %}?lang={{ language_codes }}" class="hidden" id="matrix-load" data-offset="0" data-last="0"></a>
</td></tr>
</tfoot>
</table>
{% endif %}

<form>
<div class="panel panel-default">
<div class="panel-heading"><h4 class="panel-title">{% trans "Displayed languages" %}</h4></div>
  <div class="panel-body">
{{ languages_form | crispy }}
  </div>
<div class="panel-footer">
<input class="btn btn-primary" type="submit" value="{% trans "Choose" %}" />
</div>
</div>
</form>


{% endblock %}
