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

{% block scripts %}
{{super()}}
<script src="{{ url_for('static', filename='js/chosen.jquery.min.js') }}"></script>
<script type="text/javascript">
  $(function() {
    // filter parent resources according to selected resource type
    var filterParents = function() {
      // get selected resource type
      var resource_type = $('#type').find('option:selected').val();

      // allowed parent types per resource type
      var parent_filters = {
        map: [],
        layer: ['map'],
        attribute: ['layer', 'data', 'feature_info_layer'],
        print_template: ['map'],
        data: ['map'],
        data_create: ['map'],
        data_read: ['map'],
        data_update: ['map'],
        data_delete: ['map'],
        viewer: [],
        viewer_task: [],
        theme_info_link: [],
        plugin: [],
        plugin_data: ['plugin'],
        solr_facet: [],
        feature_info_service: [],
        feature_info_layer: ['feature_info_service']
      };

      var filter = parent_filters[resource_type];
      if (filter) {
        if (filter.length > 0) {
          // show empty choice
          $('#parent_id > option').show();
          // enable field
          $('#parent_id').prop('disabled', false);
        }
        else {
          // hide empty choice
          $('#parent_id > option').hide();
          // disable field
          $('#parent_id').prop('disabled', true);
        }

        // filter parent resources
        $('#parent_id optgroup').each(function() {
          if ($.inArray($(this).data('type'), filter) > -1) {
            $(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
        var option = $('#parent_id').find('option:selected');
        if (option && option.css('display') == 'none') {
          $('#parent_id').val('');
        }
      }
      else {
        // show empty choice
        $('#parent_id > option').show();
        // enable field
        $('#parent_id').prop('disabled', false);

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

      $("#parent_id").trigger("chosen:updated");
    };
    $('#type').change(filterParents);

    // initialize
    filterParents();

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

{%- 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 %}

{% 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 }}

    {# disable type selection when editing an existing resource #}
    {{ wtf.render_field(form.type, form_type="horizontal", horizontal_columns=('sm', 2, 5), disabled=(method != 'POST')) }}
    {{ wtf.render_field(form.name, form_type="horizontal", horizontal_columns=('sm', 2, 5)) }}

    {# custom select field with resource type as data in options for parent resource #}
    <div class="mb-3 row required">
      <label class="col-form-label col-sm-2" for="name">{{ i18n('interface.resources.parent_resource') }}</label>
      <div class="col-sm-5">
        <select class="form-control chosen-select" data-placeholder="{{ i18n('interface.resources.resource') }}" id="parent_id" name="parent_id">
          <option value="0"></option>
          {% for group in form.parent_choices %}
            <optgroup label="{{ group['group_label'] }}" data-type="{{ group['resource_type'] }}">
              {% for value, label in group['options'] %}
                <option value="{{ value }}" {{ 'selected=""' if value == form.parent_id.data }}>{{ label }}</option>
              {% endfor %}
            </optgroup>
          {% endfor %}
        </select>
      </div>
    </div>

    {{ 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>

  {% if form.type.data == 'map' and id %}
    <br>
    <form action="{{ url_for('import_children_resource', id=id) }}" method="post" style="display: inline;">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
      <button type="submit" class="col-sm-offset-2 btn btn-success btn-spin-on-click" data-spinning-msg="{{ i18n('interface.resources.message_import_layers') }}">
        {{ utils.render_icon('download-alt') }} {{ i18n('interface.resources.parent_resource') }}
      </button>
    </form>
  {% endif %}
{% endblock %}
