{% extends "base.html" %}
{% load i18n %}
{% load i18n_utils %}

{% block head %}
<style type="text/css">
    .progress {
        margin-bottom: 0;
    }
    td {
        width: 33%;
    }
</style>
{% endblock head %}

{% block subtitle %}
    {% trans "Interface translation" %}
{% endblock subtitle %}

{% block actions %}
    <button class="btn btn-success" type="button" data-toggle="modal" data-target="#modal_add_language"><i class="fa fa-plus"></i> {% trans 'New language' %}</button>
{% endblock actions %}

{% block main %}
    <div class="modal fade" id="modal_add_language" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form id="myForm" method="post">{% csrf_token %}
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">{% trans "Add a New Language" %}</h4>
                    </div>
                    <div class="modal-body">
                        {% if form.get_remaining_languages %}
                            {{ form }}
                        {% else %}
                            {% trans "No new language is available." %}
                        {% endif %}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
                        <button type="submit" class="btn btn-primary {% if not form.get_remaining_languages %}disabled{% endif %}">{% trans "Add" %}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>{% trans "Language" %}</th>
                    <th>{% trans "Progression" %}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for item in translations %}
                    <tr>
                        <td>
                            {% get_country_flag item.language_code as flag_path %}
                            {% if flag_path %}
                                <img class="flag" src="{{ flag_path }}" />
                            {% endif %}
                            {{ item.language }}
                        </td>
                        <td>
                            <div class="progress">
                                <div class="progress-bar progress-bar-{% if item.translation.progression >= 75 %}success{% elif item.translation.progression >= 25 %}warning{% else %}danger{% endif %} progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: {{ item.translation.progression }}%;">
                                    {% if item.translation.progression %}
                                        {{ item.translation.progression }}%
                                    {% endif %}
                                </div>
                            </div>
                        </td>
                        <td align="left">
                            <a class="btn btn-xs btn-primary" href="{% url 'translation:export-interface' item.language_code %}">{% trans "Export" %}</a>
                            <a class="btn btn-xs btn-warning" href="{% url 'translation:import-interface' item.language_code %}">{% trans "Import" %}</a>
                            <small>
                            {% if item.translation.last_modified != None %}
                                {% blocktrans with date=item.translation.last_modified|date %}Last translation : {{ date }} {% endblocktrans %}
                            {% endif %}
                            </small>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock main %}