{% extends './base.html'%}
{% load i18n bootstrap4 html navigation %}

{% block body_class %}topics{% endblock %}

{% block content %}{% newlineless %}{% spaceless %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'textrank:index' %}">TextRank</a></li>
        <li class="breadcrumb-item active" aria-current="page">{% trans 'Разделы' %}</li>
    </ol>
</nav>

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
{% if instance %}
    <h1 class="h2">{% trans 'Раздел' %} #{{ instance.id }}</h1>
{% else %}
    <h1 class="h2">{% trans 'Разделы' %}</h1>
{% endif %}
    <div class="btn-toolbar mb-2 mb-md-0">
    {% if instance %}
        <div class="btn-group">
            <a href="{% url 'textrank:topics' %}" class="btn btn-sm btn-outline-secondary">
                <span class="ml-1">{% trans 'Список разделов' %}</span>
            </a>
        </div>
    {% else %}
        {% url 'textrank:topics' as path %}
        <div class="btn-group mr-2">{% include './_search_form.html' %}</div>
        <div class="btn-group">
            <a href="#form" class="btn btn-sm btn-outline-secondary">
                <span class="fa fa-plus"></span>
                <span class="ml-1">{% trans 'добавить' %}</span>
            </a>
            {% include './_is_active_button.html' with path=path %}
        </div>
        <div class="dropdown mr-0">
            <button type="button" id="dropdownMenuOrdering" data-toggle="dropdown" \
                aria-haspopup="true" aria-expanded="false" \
                class="btn btn-sm btn-outline-secondary ml-2 dropdown-toggle \
                {% if orders %}active{% endif %}">
                <span class="fa fa-sort"></span>
                <span class="ml-1">{% trans 'сортировка' %}</span>
            </button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuOrdering">
                <a href="{{ path }}{% delparams request 'o' %}" \
                    class="dropdown-item {% if not orders %}active{% endif %}"> \
                    name \
                </a>
                <a href="{{ path }}{% addparams request o='-name' %}" \
                    class="dropdown-item {% if orders_string == '-name' %}active{% endif %}"> \
                    -name \
                </a>
                <a href="{{ path }}{% addparams request o='is_active,name' %}" \
                    class="dropdown-item {% if orders_string == 'is_active,name' %}active{% endif %}"> \
                    is_active,name \
                </a>
                <a href="{{ path }}{% addparams request o='-is_active,name' %}" \
                    class="dropdown-item {% if orders_string == '-is_active,name' %}active{% endif %}"> \
                    -is_active,name \
                </a>
                <a href="{{ path }}{% addparams request o='updated' %}" \
                    class="dropdown-item {% if orders_string == 'updated' %}active{% endif %}"> \
                    updated \
                </a>
                <a href="{{ path }}{% addparams request o='-updated' %}" \
                    class="dropdown-item {% if orders_string == '-updated' %}active{% endif %}"> \
                    -updated \
                </a>
                <a href="{{ path }}{% addparams request o='created' %}" \
                    class="dropdown-item {% if orders_string == 'created' %}active{% endif %}"> \
                    created \
                </a>
                <a href="{{ path }}{% addparams request o='-created' %}" \
                    class="dropdown-item {% if orders_string == '-created' %}active{% endif %}"> \
                    -created \
                </a>
                <a href="{{ path }}{% addparams request o='last_editor__username' %}" \
                    class="dropdown-item {% if orders_string == 'last_editor__username' %}active{% endif %}"> \
                    last_editor__username \
                </a>
                <a href="{{ path }}{% addparams request o='-last_editor__username' %}" \
                    class="dropdown-item {% if orders_string == '-last_editor__username' %}active{% endif %}"> \
                    -last_editor__username \
                </a>
                <a href="{{ path }}{% addparams request o='id' %}" \
                    class="dropdown-item {% if orders_string == 'id' %}active{% endif %}"> \
                    id \
                </a>
                <a href="{{ path }}{% addparams request o='-id' %}" \
                    class="dropdown-item {% if orders_string == '-id' %}active{% endif %}"> \
                    -id \
                </a>
            </div>
        </div>
    {% endif %}
    </div>
</div>

{% if not instance %}
<div class="table-responsive">
    <table class="table table-striped table-sm mb-3">
        <thead class="bg-dark text-white">
            <tr>
                <th>{% trans 'Название' %}</th>
                <th>{% trans 'Код' %}</th>
                <th>{% trans 'Активен' %}</th>
                <th>{% trans 'Создан' %}</th>
                <th>{% trans 'Обновлён' %}</th>
                <th>{% trans 'Редактор' %}</th>
                <th>ID</th>
            </tr>
        </thead>
        <tbody>
        {% for topic in page.object_list %}
            <tr>
                <td>
                    <a class="text-body" href="{% url 'textrank:topic' id=topic.id %}">{{ topic.name }}</a>
                {% if topic.description %}
                    <span class="fa fa-question-circle-o ml-1 text-muted" title="{{ topic.get_description }}"></span>
                {% endif %}
                </td>
                <td><small class="text-monospace">{{ topic.code }}</small></td>
                <td>
                {% if topic.is_active %}
                    <span class="fa fa-check"></span>
                {% endif %}
                </td>
                <td class="text-nowrap isoformat">{{ topic.created.isoformat }}</td>
                <td class="text-nowrap isoformat">{{ topic.updated.isoformat }}</td>
                <td>{{ topic.last_editor|default:'---' }}</td>
                <td>{{ topic.id }}</td>
            </tr>
        {% empty %}
            <tr>
                <td colspan="8">{% trans 'Не найдено ни одной записи.' %}</td>
            </tr>
        {% endfor %}
        </tbody>
    {% if page.object_list %}
        <tfoot>
            <tr>
                <td colspan="8" class="pr-0">{% include './_table_pagination.html' %}</td>
            </tr>
        </tfoot>
    {% endif %}
    </table>
</div>
<h2 class="h3">{% trans 'Добавить новый раздел' %}</h2>
{% endif %}

{% if instance %}
<p>
    <span class="badge badge-pill badge-dark m-1">{% trans 'ID' %}: {{ instance.id }}</span>
    <span class="badge badge-pill badge-secondary m-1">{% trans 'создан' %}: <span class="isoformat">{{ instance.created.isoformat }}</span></span>
    <span class="badge badge-pill badge-warning m-1">{% trans 'обновлен' %}: <span class="isoformat">{{ instance.updated.isoformat }}</span> {{ instance.last_editor }}</span>
</p>
{% endif %}

<form id="form" class="form bg-light p-2 mb-4" role="form" method="post" enctype="multipart/form-data">
    <input type="hidden" name="next" value="{{ next|escape }}" />
    {% csrf_token %}
    {{ form.non_field_errors }}
    {% for hidden in form.hidden_fields %}{{ hidden }}{% endfor %}
    <div class="row">
        <div class="col-md-6">
            {{ form.name|form_group }}
            {{ form.code|form_group }}
            {{ form.is_active|form_group }}
        </div>
        <div class="col-md-6">{{ form.description|form_group }}</div>
    </div>
    <button type="submit" class="btn btn-dark">
        <i class="fa fa-save" aria-hidden="true"></i> \
        {% trans 'Сохранить' %} \
    </button>
</form>

{% endspaceless %}{% endnewlineless %}{% endblock %}

{% block javascript_page %}{% newlineless_javascript %}
<script type="text/javascript">

$(document).ready(function($) {
    var language = $('html').attr('lang') || 'ru';
    moment.updateLocale(language, {});
    // Перерисовываем ISO дату по локальному времени юзера.
    $('.isoformat').each(function(i, el) {
        var $el = $(el);
        $el.text(moment($el.text()).format('L LT'));
    });
{% if DEMO_MODE and not user.is_authenticated %}
    $('#form').on('submit', function(e) {
        e.preventDefault();
        alert("{% trans 'Это демо-режим, авторизуйтесь, чтобы изменять данные.' %}")
    });
{% endif %}
})
</script>
{% endnewlineless_javascript %}{% endblock %}
