{% load i18n %}

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

<div class="membership {{ step.slug }}_membership dropdown_fix" data-show-roles="{{ step.show_roles }}">
  <div class="header">
    <div class="help_text">{{ step.help_text }}</div>
    <div class="left">
      <div class="fake_table fake_table_header fake_{{ step.slug }}_table">
        <span class="members_title">{{ step.available_list_title }}</span>
        <input type="text" name="available_{{ step.slug }}_filter form-control input-sm" id="available_{{ step.slug }}" class="filter {{ step.slug }}_filter" placeholder="{% trans "Filter" %}">
      </div>
    </div>
    <div class="right">
      <div class="fake_table fake_table_header fake_{{ step.slug }}_table">
        <span class="members_title">{{ step.members_list_title }}</span>
        <input type="text" name="{{ step.slug }}_members_filter" id="{{ step.slug }}_members" class="filter {{ step.slug }}_filter form-control input-sm" placeholder="{% trans "Filter" %}">
      </div>
    </div>
  </div>

  <div class="left filterable {{ step.slug }}_filterable">
    <div class="fake_table fake_{{ step.slug }}_table" id="available_{{ step.slug }}">
      <ul class="available_members available_{{ step.slug }}"></ul>
      <ul class="no_results" id="no_available_{{ step.slug }}"><li>{{ step.no_available_text }}</li></ul>
    </div>
  </div>

  <div class="right filterable {{ step.slug }}_filterable">
    <div class="fake_table fake_{{ step.slug }}_table" id="{{ step.slug }}_members">
      <ul class="members {{ step.slug }}_members"></ul>
      <ul class="no_results" id="no_{{ step.slug }}_members"><li>{{ step.no_members_text }}</li></ul>
    </div>
  </div>
</div>

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


<script>
  if (typeof horizon.membership !== 'undefined') {
    horizon.membership.workflow_init($(".workflow"), "{{ step.slug }}", "{{ step.get_id }}");
  } else {
    addHorizonLoadEvent(function() {
      horizon.membership.workflow_init($(".workflow"), "{{ step.slug }}", "{{ step.get_id }}");
    });
  }
</script>