{% extends 'Web/base.html.twig' %}

{% block head_js %}
    {{ parent() }}
    {# https://github.com/bassjobsen/Bootstrap-3-Typeahead #}
    <script src="{{ asset('js/lib/bootstrap3-typeahead.min.js') }}"></script>
{% endblock %}

{% block content %}
    <div class="well well-lg">
        {{ form_start(form, {'attr': {'class': 'form-inline'} }) }}
            <div class="form-group">
                {{ form_errors(form.login) }}
                {{ form_widget(form.login, {
                    'attr': {
                        'autocomplete': 'off',
                        'placeholder': 'Login',
                        'autofocus': true
                    }
                }) }}

                <script type="text/javascript">
                    $(function() {
                        $field = $('#{{ form.login.vars.id }}');

                        $field.typeahead({
                            minLength: 2,
                            items: {{ autocomplete_size|e('js') }},
                            delay: 500,
                            autoSelect: true,
                            source: function (query, processCallback) {
                                $.get('{{ path('user_search_ajax', {'login': ''}) }}' + query, function (data) {
                                    processCallback(data);
                                });
                            },
                            afterSelect: function () {
                                $field.parents('form').first().submit();
                            },
                            displayText: function (item) {
                                // Crutches to place only login into the field after selecting the item
                                if (typeof item === 'object') {
                                    return item.login+(item.name ? ' ('+item.name+')' : '');
                                } else if (typeof item === 'string') {
                                    return item;
                                }
                            },
                            updater: function (item) {
                                // Crutches to place only login into the field after selecting the item
                                return item.login;
                            }
                        });
                    });
                </script>

                <input type="submit" value="{{ 'Search'|trans }}" class="btn btn-default" />
            </div>
        {{ form_end(form) }}
    </div>

    <div class="container service-stats">
        <div class="row">
            <div class="col-xs-8 col-sm-3"><span class="glyphicon glyphicon-user"></span> {{ 'All users'|trans }}</div>
            <div class="col-xs-4 col-sm-2">{{ users_count }}</div>
        </div>
        <div class="row">
            <div class="col-xs-8 col-sm-3"><span class="glyphicon glyphicon-user"></span> {{ 'Subscribed users'|trans }}</div>
            <div class="col-xs-4 col-sm-2"><a href="{{ url('user_show', {'login': service_login}) }}">{{ subscribers_count }}</a></div>
        </div>
        <div class="row">
            <div class="col-xs-8 col-sm-3"><span class="glyphicon glyphicon-list"></span> {{ '24 hours events'|trans }}</div>
            <div class="col-xs-4 col-sm-2"><a href="{{ url('events_last') }}">{{ events_count }}</a></div>
        </div>
    </div>
{% endblock %}