{% import "bootstrap5/form.html" as wtf %}
{% extends "templates/base.html" %}

{%- block styles %}
  {{ super() }}
  <link href="{{ url_for('static', filename='css/bootstrap-chosen.css') }}" rel="stylesheet">
  <style type="text/css">
    .chosen-container .chosen-results li.group-result.chosen-hidden {
      display: none;
    }
  </style>
{%- endblock styles %}

{% block scripts %}
{{super()}}
<script src="{{ url_for('static', filename='js/chosen.jquery.min.js') }}"></script>
<script type="text/javascript">
  $(function() {
    // filter resources according to selected resource type
    function filterResources(e) {
      e.preventDefault();

      // get selected resource type
      const resourceType = $(this).data('type');
      const resourceDescr = $(this).data('description');

      // show selected resource type
      $('#resource_type_filter_label').text('Type Filter: ' + resourceDescr);

      // mark selected type
      $('#resource_type_filter a').removeClass('active');
      $('#resource_type_filter a').filter('[data-type="' + resourceType + '"]').addClass('active');

      if (resourceType) {
        // hide empty choice
        $('#resource_id > option').hide();

        // filter resources
        $('#resource_id optgroup').each(function() {
          if ($(this).data('type') == resourceType) {
            $(this).show();
            $(this).removeClass('chosen-hidden');
            $(this).find('option').show();
          }
          else {
            $(this).hide();
            $(this).addClass('chosen-hidden');
            $(this).find('option').hide();
          }
        });

        // remove selection if hidden by filter
        const option = $('#resource_id').find('option:selected');
        if (option && option.css('display') == 'none') {
          $('#resource_id').val('');
        }
      }
      else {
        // show empty choice
        $('#resource_id > option').show();

        // no filter, show all resources
        $('#resource_id optgroup').show();
        $('#resource_id optgroup').removeClass('chosen-hidden');
        $('#resource_id optgroup option').show();
      }

      $("#resource_id").trigger("chosen:updated");
    };

    $('#resource_type_filter a').click(filterResources);

    // initialize Chosen jQuery plugin
    $(".chosen-select").chosen({width: '100%'});
  });
</script>
{% endblock %}


{% block title %}{{ title }}{% endblock %}
{% block container %}
  <h1>{{ title }}</h1>

  <form class="form form-horizontal" action="{{ action }}" method="post">
    {% if method != 'POST' %}
      <input type="hidden" name="_method" value="{{method}}" />
    {% endif %}
    {{ form.csrf_token }}

    {{ wtf.render_field(form.role_id, form_type="horizontal", horizontal_columns=('sm', 2, 7)) }}

    <div class="mb-3 row">
      <label class="control-label col-sm-2" for="resource_id">{{ form.resource_id.label }}</label>

      <div class="col-sm-7">
        <div class="d-flex">
        {# resource type filter #}
          <div class="dropdown" id="resource_type_filter">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="parent_resource" data-bs-toggle="dropdown" aria-expanded="false">
              <span id="resource_type_filter_label">{{ i18n('interface.permissions.type_filter') }}: {{ i18n('interface.common.all') }}</span>
            </button>
            <ul class="dropdown-menu">
              <li>
                <a class="dropdown-item" href="#" data-type="" data-description="All">{{ i18n('interface.common.all') }}</a>
              </li>
              <li><hr class="dropdown-divider"></li>
              {% for name, description in form.resource_types %}
                <li>
                  <a class="dropdown-item" href="#" data-type="{{ name }}" data-description="{{ description }}">{{ description }}</a>
                </li>
              {% endfor %}
            </ul>
          </div>

          {# custom select field with resource type as data in options for parent resource #}
          <div class="flex-fill">
            <select class="form-control chosen-select" data-placeholder="{{ i18n('interface.permissions.ph_select_resource') }}" id="resource_id" name="resource_id">
              <option value=""></option>
              {% for group in form.resource_choices %}
                <optgroup label="{{ group['group_label'] }}" data-type="{{ group['resource_type'] }}">
                  {% for value, label, parent in group['options'] %}
                    <option value="{{ value }}" {{ 'selected=""' if value == form.resource_id.data }}>
                      {{ label }}
                      {% if parent is not none %}
                        ({{ parent.name }})
                      {% endif %}
                    </option>
                  {% endfor %}
                </optgroup>
              {% endfor %}
            </select>
          </div>
        </div>
      </div>
    </div>

    {% if form.resource_id.errors %}
    <div class="mb-3 row">
      <div class="col-sm-7">
        <p class="help-block">{{ i18n('interface.common.message_required') }}</p>
      </div>
    </div>
    {% endif %}

    {{ wtf.render_field(form.priority, form_type="horizontal", horizontal_columns=('sm', 2, 7)) }}
    {{ wtf.render_field(form.write, form_type="horizontal", horizontal_columns=('sm', 2, 7)) }}

    {{ wtf.render_field(form.submit, class="col-sm-offset-2 btn btn-primary") }}
    <button class="col-sm-offset-2 btn btn-danger" onclick="history.back()">Cancel</button>
  </form>
{% endblock %}
