{% load static %}
<div
  class="modal fade bs-modal-lg"
  id="set_scenario_modal"
  tabindex="-1"
  aria-labelledby="set_scenario_modal"
  aria-modal="true"
  role="dialog"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title">
          Set Scenarios for {{ current_object.name|safe }}
        </h4>
      </div>
      <div class="modal-body">
        <div id="loading_scenario_div" class="text-center"></div>
        <form
          id="set_scenario_modal_form"
          accept-charset="UTF-8"
          action="{{ current_object.url }}"
          data-remote="true"
          method="post"
        >
          {% csrf_token %}
          <label for="scenario-select">Scenarios</label>
          <select
            id="scenario-select"
            name="selected-scenarios"
            data-actions-box="true"
            class="form-control"
            multiple
            data-width="100%"
          >
            <option disabled>Select Scenarios</option>
            <option value="" hidden></option>
          </select>
        </form>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-secondary pull-left"
          data-dismiss="modal"
        >
          Close
        </button>
        <button
          type="button"
          class="btn btn-primary"
          id="set_scenario_modal_form_submit"
        >
          Submit
        </button>
      </div>
    </div>
  </div>
</div>
{# prettier-ignore-start #}
<script>

    $(function () {
        var loaded = false;

        var attachedScenarios = []
        {% if current_object.scenarios.all %}
            {% for scen in current_object.scenarios.all %}
            attachedScenarios.push('{{ scen.url }}')
            {% endfor %}
        {% endif %}

        $('#scenario-select').selectpicker();

        $('#set_scenario_modal').on('shown.bs.modal', function () {

            if (!loaded) {
                makeLoadingGif("#loading_scenario_div", "{% static '/images/wait.gif' %}");
                $('#loading_scenario_div').append("<p></p><div class='alert alert-info'>Loading Scenarios...</div>");

                $.getJSON("{% url 'package scenario list' meta.current_package.uuid %}").then(function (data) {
                    for(s in data) {
                        scenario = data[s]
                        var selected = attachedScenarios.includes(scenario.url);
                        $('#scenario-select').append(`<option value="${scenario.url}" ${selected ? 'selected' : ''}>${scenario.name}</option>`);
                    }
                    $('#scenario-select').selectpicker('refresh');
                    $("#loading_scenario_div").empty();
                });
                loaded = true;
            }

            $('#set_scenario_modal_form_submit').on('click', function (e) {
                e.preventDefault();
                if ($('#scenario-select').val().length == 0) {
                    $('#scenario-select').val("")
                }
                $('#set_scenario_modal_form').submit();
            });
        });
    });

</script>
{# prettier-ignore-end #}