<!-- Paginator {{space}} -->
<input type="hidden" id="{{paginator.space}}_page" name="{{paginator.space}}_page" value="{{paginator.page}}"/>
<input type="hidden" id="{{paginator.space}}_size" name="{{paginator.space}}_size" value="{{paginator.size}}"/>

<div class="paginator" style="display: flex">

    <button class="btn btn-default btn-xs {% if not paginator.init %}disabled{% endif %}"
        onclick="set_paginator_page2('{{paginator.space}}', {{paginator.init}});">
        <i class="fa fa-fast-backward smallicon" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-xs {% if not paginator.prev %}disabled{% endif %}"
        data-toggle="tooltip" data-placement="bottom" title="Page précédente (Alt + &#x2190)"
        onclick="set_paginator_page2('{{paginator.space}}', {{paginator.prev}});">
        <i class="fa fa-step-backward smallicon" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-xs {% if not paginator.next %}disabled{% endif %}"
        data-toggle="tooltip" data-placement="bottom" title="Page suivante (Alt + &#x2192)"
        onclick="set_paginator_page2('{{paginator.space}}', {{paginator.next}});">
        <i class="fa fa-step-forward smallicon" aria-hidden="true"></i>
    </button>
    <button class="btn btn-default btn-xs {% if not paginator.last %}disabled{% endif %}"
        onclick="set_paginator_page2('{{paginator.space}}', {{paginator.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_size2('{{paginator.space}}', 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_size2('{{paginator.space}}', 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_size2('{{paginator.space}}', 20);">20
      </label>
    </div>
    </div>

    <script>
        $(document).keydown(function(event){
            if (event.which=="37" && event.altKey) {{paginator.space}}_goto_prev()
            if (event.which=="39" && event.altKey) {{paginator.space}}_goto_next()
        });
        function {{paginator.space}}_goto_prev() {
            {% if paginator.prev %}
            set_paginator_page2('{{paginator.space}}', {{paginator.prev}});
            {% endif %}
        }
        function {{paginator.space}}_goto_next() {
            {% if paginator.next %}
            set_paginator_page2('{{paginator.space}}', {{paginator.next}});
            {% endif %}
        }
    </script>

    <div style="min-width: 300px; padding-top: 2px; padding-left: 30px;">Page {{paginator.page}} sur {{paginator.last}}</div>
</div>
