{% extends 'c2cgeoform:/templates/grid.jinja2' %}
{% block calculateTableHeightJS %}
return $(window).height() - $('footer').height() - $('header').height() - 30
{% endblock %}
{% block grid %}
    {{ super() }}
<script>
  $(function() {
    const bsTable = $('#grid')
    let dataUrl = bsTable.data()['bootstrap.table'].options.url
    const url  = new URL(dataUrl)

    let fetchIssues = function() {
      bsTable.data()['bootstrap.table'].options.url = url.toString()
      bsTable.bootstrapTable('refresh')
    }

    let onStatusClick = function (e) {
      $(statusDropDown.find('.status-label')).text(e.currentTarget.textContent)
      url.searchParams.set('status', $(e.currentTarget).data().value)
      fetchIssues()
    }

    let onCategoryClick = function (e) {
      $(categoryDropDown.find('.category-label')).text(e.currentTarget.textContent)
      url.searchParams.set('category', $(e.currentTarget).data().value)
      fetchIssues()
    }

    const buttonGroup = $('.list-grid .btn-group.pull-right')

    let createDropDown = function(options) {
      let dropDown = $('<div>', {class: 'dropdown btn-group'})

      let button = $(
        '<button/>',
        {
          class: 'btn btn-default dropdown-toggle',
          'data-toggle': 'dropdown'
        }
      )
      .append($('<span/>', {class: options.css+'-label'}).text(options.text))
      .append($('<span/>', {class: 'caret'}))
      dropDown.append(button)

      let dropDownMenu = $('<ul/>', {class: 'dropdown-menu'})
      dropDown.append(dropDownMenu)

      for (let val of options.values) {
        dropDownMenu.append($('<li/>')
          .append($('<a/>', {href: '#'}).text(val[1]).data('value', val[0])
            .click(options.callback)
          )
        )
      }
      buttonGroup.append(dropDown)
      return dropDown
    }

    let statusDropDown = createDropDown({
      text: '{{ _('Open issues') }}',
      css: 'status',
      callback: onStatusClick,
      values: [
        ['open', '{{ _('Open issues') }}'],
        ['all', '{{ _('All issues') }}']
      ]
    })

    const categories = {{ categories|tojson|safe }}
    let categoryDropDown = createDropDown({
      text: '{{ _('All Categories') }}',
      css: 'category',
      callback: onCategoryClick,
      values: [['0', '{{ _('All Categories') }}']].concat(categories.map(c => [c.id, c.value]))
    })

  })
</script>
{% endblock %}