{% extends "base.html" %}
{% block title %}Список пользователей{% endblock %}
{% block content %}

<script>

    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
    });

    var query = '{{query}}';
    var currentPersonLogin = '';

    function onPersonItemClick(personLogin) {
        currentPersonLogin = personLogin;
        $.get('/_user_settings/admin/' + personLogin, {}, function(data) {
            $('#person_settings_json').val(JSON.stringify(data, null, 2));
        });
    }

    function onSettingsSaveClick() {
        $.ajax({
            url: '/_user_settings/admin/' + currentPersonLogin + '/',
            type: 'POST',
            data: { json: $('#person_settings_json').val() },
        success: function(data) {
            alert('Настройки сохранились. Спасибо за то, что нажали на кнопочку. Кнопочке приятно.')
            $('#person_settings_json').val(JSON.stringify(data, null, 2));
        },
        error: function(xhr, errmsg, err) {
            alert('Настройки не сохранились. Детали в консоли браузера.')
            console.log(xhr.status + ": " + xhr.responseText);
        }});
    }

    function onQuery(event) {
        if (!event || event.keyCode == 13) {
            query = $("#query").val();
            window.location.search = 'query=' + query + '&page={{ persons.number }}';
            return false;
        } else return true;
    }

</script>

<style>
    body {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .persons_list {
        width: 50%;
    }
    .person_settings {
        width: 40%;
    }
    .fixed {
        position: fixed;
    }
    .textcenter {
        padding: 30px;
    }
</style>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <p class="navbar-text">Список пользователей</p>
        </div>
        <div class="navbar-form navbar-left">
            <input type="text" class="form-control" id="query" onkeypress="return onQuery(event)" value="{{query}}">
            <button type="button" class="btn btn-default" onclick="onQuery(false);">Фильтровать</button>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="https://staff.yandex-team.ru">staff.yandex-team.ru</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-lg-6 persons_list">
            <div class="list-group">
            {% for person in persons %}
                <a href="javascript:void(0);" class="list-group-item" id="{{person.login}}" onclick="onPersonItemClick(this.id);"><h5 class="list-group-item-heading">{{person.first_name}} {{person.last_name}} (id = {{person.id}} | login = {{person.login}})</h5></a>
            {% endfor %}
            </div>
        </div>
        <div class="col-lg-6">
            <div class="panel panel-success fixed person_settings">
                <div class="panel-heading">Настройки</div>
                <div class="panel-body">
                    <textarea class="form-control" rows="5" id="person_settings_json"></textarea>
                    <a href="javascript:void(0);" onclick="onSettingsSaveClick();" id="edit_button" class="btn btn-primary btn-warning">Сохранить</a>
                </div>
            </div>
        </div>
    </div>
</div>

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <div class="navbar-left">
            {% if persons.paginator.num_pages > 1 %}
            <ul class="pagination">
                <li><a href="?page=1&query={{query}}" aria-label="First">1</a></li>
            </ul>
            {% endif %}
            <ul class="pagination">
                {% if persons.has_previous %}
                <li>
                    <a href="?page={{ persons.previous_page_number }}&query={{query}}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                </li>
                {% endif %}
                {% for p_num in pages_nums %}
                    {% if p_num == persons.number %}
                    <li class="active"><a href="javascript:void(0);">{{ p_num }}</a></li>
                    {% else %}
                    <li><a href="?page={{ p_num }}&query={{query}}">{{ p_num }}</a></li>
                    {% endif %}
                {% endfor %}
                {% if persons.has_next %}
                <li>
                    <a href="?page={{ persons.next_page_number }}&query={{query}}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
                </li>
                {% endif %}
            </ul>
            {% if persons.paginator.num_pages > 1 %}
            <ul class="pagination">
                <li><a href="?page={{ persons.paginator.num_pages }}&query={{query}}" aria-label="Last">{{ persons.paginator.num_pages }}</a></li>
            </ul>
            {% endif %}
        </div>
        <div class="navbar-right textcenter">
            По вопросам работы этой страницы обращайтесь на <a href="mailto:tools@yandex-team.ru">tools@yandex-team.ru</a>
        </div>
    </div>
</nav>

{% endblock %}

