<!-- Paginator -->
<input type="hidden" id="paginator_page" name="paginator_page" value="{{paginator_page}}"/>
<input type="hidden" id="paginator_size" name="paginator_size" value="{{paginator_size}}"/>

<div class="paginator" style="display: flex">
    <button class="btn btn-default btn-xs {% if not page_init %}disabled{% endif %}" onclick="set_paginator_page({{page_init}});">
        <i class="fa fa-fast-backward smallicon" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-xs {% if not page_prev %}disabled{% endif %}"
        data-toggle="tooltip" data-placement="bottom" title="Page précédente (Alt + &#x2190)"
        onclick="set_paginator_page({{page_prev}});">
        <i class="fa fa-step-backward smallicon" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-xs {% if not page_next %}disabled{% endif %}"
        data-toggle="tooltip" data-placement="bottom" title="Page suivante (Alt + &#x2192)"
        onclick="set_paginator_page({{page_next}});">
        <i class="fa fa-step-forward smallicon" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-xs {% if not page_last %}disabled{% endif %}" onclick="set_paginator_page({{page_last}});">
        <i class="fa fa-fast-forward smallicon" aria-hidden="true"></i>
    </button>

    <div>
    <div class="btn-group btn-group-toggle" data-toggle="buttons" style="display: flex; padding-top: 2px; padding-left: 5px;">
      <label class="btn btn-default btn-xs pg_sizer {%if paginator_size == 10%}active{% endif %}" style="padding-top: 3px;">
        <input type="radio" name="options" id="option1" autocomplete="off" onchange="set_paginator_size(10);">10
      </label>
      <label class="btn btn-default btn-xs pg_sizer {%if paginator_size == 15%}active{% endif %}" style="padding-top: 3px;">
        <input type="radio" name="options" id="option2" autocomplete="off" onchange="set_paginator_size(15);">15
      </label>
      <label class="btn btn-default btn-xs pg_sizer {%if paginator_size == 20%}active{% endif %}" style="padding-top: 3px;">
        <input type="radio" name="options" id="option3" autocomplete="off" onchange="set_paginator_size(20);">20
      </label>
    </div>
    </div>

    <script>
        $(document).keydown(function(event){
            if (event.which=="37" && event.altKey) goto_prev()
            if (event.which=="39" && event.altKey) goto_next()
        });
        function goto_prev() {
            {% if page_prev %}
            set_paginator_page({{page_prev}});
            {% endif %}
        }
        function goto_next() {
            {% if page_next %}
            set_paginator_page({{page_next}});
            {% endif %}
        }
    </script>

    <div style="min-width: 300px; padding-top: 2px; padding-left: 30px;">Page {{paginator_page}} sur {{page_last}}</div>
</div>
