{% load i18n %}

<noscript><h3>{{ step }}</h3></noscript>

{% block membership %}
  <div class="membership {{ step.slug }}_membership dropdown_fix" data-show-roles="{{ step.show_roles }}" data-lazy-load="{{ step.action.lazy_load }}">
    <div class="header">
      <div class="help_text">{{ step.help_text }}</div>

      <div class="row membership_header">
        <div class="col-xs-6">
          <div class="fake_table fake_table_header fake_{{ step.slug }}_table clearfix">
            <span class="members_title">{{ step.available_list_title }}</span>
            <div class="form-group has-feedback">
              <input type="text" name="available_{{ step.slug }}_filter" id="available_{{ step.slug }}" class="filter {{ step.slug }}_filter form-control input-sm" placeholder="{% trans "Filter" %}">
              <span class="fa fa-search search-icon form-control-feedback"></span>
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="fake_table fake_table_header fake_{{ step.slug }}_table clearfix">
            <span class="members_title">{{ step.members_list_title }}</span>
            <div class="form-group has-feedback">
              <input type="text" name="{{ step.slug }}_members_filter" id="{{ step.slug }}_members" class="filter {{ step.slug }}_filter form-control input-sm" placeholder="{% trans "Filter" %}">
              <span class="fa fa-search search-icon form-control-feedback"></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-6 filterable {{ step.slug }}_filterable">
        <div class="fake_table fake_{{ step.slug }}_table" id="available_{{ step.slug }}">
          <ul class="available_members available_{{ step.slug }}">
            {% if step.move_all_allowed %}
              <ul class="nav nav-pills btn-group btn-group-sm dark_stripe move-all-btn">
                <li><a class="btn btn-primary" href="#add_remove_all">{% trans "Add all" %}</a></li>
              </ul>
            {% endif %}
          </ul>
          <ul class="no_results nav nav-pills" id="no_available_{{ step.slug }}"><li>{{ step.no_available_text }}</li></ul>
        </div>
      </div>

      <div class="col-xs-6 filterable {{ step.slug }}_filterable">
        <div class="fake_table fake_{{ step.slug }}_table" id="{{ step.slug }}_members">
          <ul class="members {{ step.slug }}_members">
            {% if step.move_all_allowed %}
              <ul class="nav nav-pills btn-group btn-group-sm dark_stripe move-all-btn">
                <li><a class="btn btn-primary" href="#add_remove_all">{% trans "Delete all" %}</a></li>
              </ul>
            {% endif %}
          </ul>
          <ul class="no_results nav nav-pills" id="no_{{ step.slug }}_members"><li>{{ step.no_members_text }}</li></ul>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block hidden_fields %}
<div class="hide">
  {% include "horizon/common/_form_fields.html" %}
</div>
{% endblock %}


{% block membership-js %}
<script>
  (function(){

    var step = "{{ step.get_id }}",
      $workflow = $(".workflow"),
      inited = false;

    function initSelectedMembership(activeStep) {

      if (inited) {
        return;
      }

      if (activeStep === step) {
        var stepSlug = "{{ step.slug }}";
        if ($("." + stepSlug + "_membership").data('lazy-load') === 'True') {
          horizon.membership.workflow_init_with_server_load($workflow, stepSlug, step);
        } else {
          horizon.membership.workflow_init($workflow, stepSlug, step);
        }
        inited = true;
      }
    }

    function getActiveStep($container) {
      var activeStep = step,
        $activeStep = $container.find('.nav[role="tablist"] li.active a');
      if ($activeStep.length > 0) {
        activeStep = $activeStep.attr('data-target').slice(1)
      }
      return activeStep;
    }

    $workflow.find('a[data-toggle="tab"]').on("show.bs.tab", function(event) {
      initSelectedMembership($(event.target).attr('data-target').slice(1));
    });

    if (typeof horizon.membership !== 'undefined') {
      $('.workflow.modal').on("shown.bs.modal", function(event) {
        initSelectedMembership(getActiveStep($(event.target)));
      });
    } else {
      addHorizonLoadEvent(function() {
        initSelectedMembership(getActiveStep($workflow));
      });
    }

  })();
</script>

{% endblock %}