{% extends 'admin/model/list.html' %}
{% import 'bukuserver/lib.html' as buku with context %}

{% block head %}
  {{ super() }}
  {{ buku.close_if_popup() }}
  {{ buku.brand_dbname() }}
  <script>
    function promptSwap(input, rowId, maxId={{count|tojson}}) {
      let _id = input.value = prompt({{ _('Swap record #{} with record #')|tojson }}.replace('{}', rowId), rowId) || "";
      let error = (!_id                       ? "" :
                   !/^[1-9][0-9]*$/.test(_id) ? {{ _("Not a valid record index: '{}'")|tojson }}.replace('{}', _id) :
                   _id > maxId                ? {{ _('There are only {} records in total!')|tojson }}.replace('{}', maxId) :
                   _id == `${rowId}`          ? {{ _('Swapping a record with itself has no effect!')|tojson }} : null);
      error && alert(error);
      return (error == null);
    }
  </script>
{% endblock %}

{% block model_menu_bar_before_filters %}
  {{ super() }}
  {% if data %}
    {% set _random = url_for('.details_view', modal=True, id='random', url=return_url, **(request.args|flt)) %}
    <li class="nav-item">
      <a id="random" class="nav-link" data-target="#fa_modal_window" data-toggle="modal" href="{{ _random }}">{{ _('Random') }}</a>
    </li>
  {% endif %}
  <li id="reorderButton" class="nav-item d-none">
    <form id="reorder" class="d-none" method="POST" action="reorder">
      <input type="hidden" name="filters"/>
    </form>
    <a class="nav-link" href="#" title="{{ _('Update indices to match this order') }}"
       onclick="reorder.confirmAndSubmit()">{{ _('Reorder') }}</a>
  </li>
  <script>
    reorder.confirmAndSubmit = () => confirm({{ _('Save this order in DB?') | tojson }}) && reorder.submit();
    addEventListener('DOMContentLoaded', () => {
      let flt = JSON.parse( $('#active-filters-data').attr('data-initial') );
      if ((flt.length > 0) && flt.every(x => x[1] == 'order')) {
        reorderButton.classList.remove('d-none');
        $('#reorder [name=filters]').val(JSON.stringify(flt));
        $(`.field-filters .filter, .filters .remove-filter`).on('click', () => reorderButton.classList.add('d-none'));
        $(`.filters select`).on('change', () => reorderButton.classList.add('d-none'));
        $(`.filters input`).on('input', () => reorderButton.classList.add('d-none'));
      }
    });
  </script>
{% endblock %}

{% macro swap_rows_action(icon, row_id, step=None) %}  {# based on admin/model/row_actions.delete_row() #}
<form class="icon" method="POST" action="{{ get_url('.swap') }}">
  {% if csrf_token %}
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
  {% endif %}
  {% set _input = 'swap' + row_id|string %}
  <input type="hidden" name="url" value="{{ return_url }}"/>
  <input type="hidden" name="id1" value="{{ row_id }}"/>
  <input type="hidden" name="id2"{% if step %} value="{{ row_id + step }}"{% else %} id="{{ _input }}"{% endif %}/>
  <button title="{{ _('Swap with…') if not step else _('Move down') if step > 0 else _('Move up') }}"
          {%- if not step %} onclick="return promptSwap({{_input}}, {{row_id}})"{% endif %}>
    <span class="fa fa-{{icon}} glyphicon glyphicon-{{icon}}"></span>
  </button>
</form>
{% endmacro %}

{% block list_row_actions scoped %}
  {% for action in list_row_actions %}
    {{ action.render_ctx(get_pk_value(row), row) }}
  {% endfor %}
  {% if request.args|flt|length == 0 %}  {# only shown when filters/ordering are disabled #}
    <div class="swap-toolbar" style="margin-left: 9px">
      {% if row.id < 2 %}
        <div class="d-inline-block" style="width: 14px"><!-- placeholder for the 1st row button --></div>
      {% else %}
        {{ swap_rows_action('arrow-up', row.id, -1) }}
      {% endif %}
      {{ swap_rows_action('exchange', row.id) }}
      {% if row.id < count %}
        {{ swap_rows_action('arrow-down', row.id, +1) }}
      {% endif %}
    </div>
  {% endif %}
{% endblock %}

{% block tail %}
  {{ buku.fix_translations('bookmarks') }}
  {{ super() }}
  {{ buku.page_size_custom() }}
  {{ buku.script('buku_filter.js') }}
  {{ buku.script('order_filter.js') }}
  {{ buku.focus(None) }}
  {{ buku.link_saved() }}
  <script>
    $(document).on('click', `#modal-random`, function() {
      $(`#fa_modal_window .modal-content`).load($(`#random`).attr('href'));
    });
  </script>
{% endblock %}