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

{% block breadcrumbs %}
<li><a href="{{ project.get_absolute_url }}">{{ project }}</a></li>
<li><a href="{% url 'show_dictionaries' project=project.slug %}">{% trans "glossaries" %}</a></li>
<li><a href="{% url 'show_dictionary' project=project.slug lang=language.code %}">{{ language }}</a></li>
{% endblock %}

{% block content %}

<ul class="nav nav-pills">
<li class="active"><a href="#browse" data-toggle="tab">{% trans "Browse" %}</a></li>
{% if perms.trans.add_dictionary %}
<li><a href="#add" data-toggle="tab">{% trans "Add new word" %}</a></li>
{% endif %}
{% if perms.trans.upload_dictionary %}
<li><a href="#import" data-toggle="tab">{% trans "Import glossary" %}</a></li>
{% endif %}
<li><a href="#export" data-toggle="tab">{% trans "Export glossary" %}</a></li>
<li><a href="#changes" data-toggle="tab">{% trans "History" %}</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="browse">
{% include "paginator.html" %}

<form class="autosubmit paginatoraddon">
{% crispy letterform %}
</form>

{% if page_obj.object_list %}
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>{% trans "Source" %}</th>
<th>{% trans "Translation" %}</th>
<th></th>
</tr>
</thead>
<tbody>
{% for word in page_obj.object_list %}
<tr>
<td>{{ word.source }}</td>
<td>{% format_translation word.target language simple=True %}</td>
<td>
{% if perms.trans.change_dictionary %}
<form action="{% url 'edit_dictionary' project=project.slug lang=language.code %}" method="get" class="inlineform">
<input type="hidden" name="id" value="{{ word.id }}" />
<button type="submit" class="btn btn-xs btn-info"><i class="fa fa-pencil"></i> {% trans "Edit" %}</button>
</form>
{% endif %}
{% if perms.trans.delete_dictionary %}
<form action="{% url 'delete_dictionary' project=project.slug lang=language.code %}" method="post" class="inlineform">
{% csrf_token %}
<input type="hidden" name="id" value="{{ word.id }}" />
<button type="submit" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> {% trans "Delete" %}</button>
</form>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>{% trans "No words found!" %}</p>
{% endif %}
</div>

{% if perms.trans.add_dictionary %}
<div class="tab-pane" id="add">

<form action="{% url 'show_dictionary' project=project.slug lang=language.code %}" method="POST">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Add new word" %}</h4></div>
  <div class="panel-body">
{% csrf_token %}
{{ form|crispy }}
</div>
  <div class="panel-footer">
<input type="submit" value="{% trans "Add" %}" class="btn btn-default" />
</div>
</div>
</form>

</div>
{% endif %}

{% if perms.trans.upload_dictionary %}
<div class="tab-pane" id="import">
<form action="{% url 'upload_dictionary' project=project.slug lang=language.code %}" method="post" enctype="multipart/form-data">
<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Import glossary" %}</h4></div>
  <div class="panel-body">

{% csrf_token %}
{{ uploadform|crispy }}
</div>
  <div class="panel-footer">
<input type="submit" class="btn btn-default" value="{% trans "Import" %}" />
</div>
</div>
</form>

</div>
{% endif %}

<div class="tab-pane" id="export">

<div class="panel panel-primary">
<div class="panel-heading"><h4 class="panel-title">{% trans "Export glossary" %}</h4></div>
  <div class="panel-body">
<p>{% trans "You can download glossary in following formats:" %}</p>

<ul>
<li><a href="{% url 'download_dictionary' project=project.slug lang=language.code %}?format=csv">{% trans "Comma separated values (CSV)" %}</a></li>
<li><a href="{% url 'download_dictionary' project=project.slug lang=language.code %}?format=po">{% trans "Gettext (PO)" %}</a></li>
<li><a href="{% url 'download_dictionary' project=project.slug lang=language.code %}?format=tbx">{% trans "TermBase eXchange (TBX)" %}</a></li>
</ul>
</div>
</div>
</div>

<div class="tab-pane" id="changes">
{% include "last-changes.html" %}
</div>

</div>

{% endblock %}
