<noscript><h3>{{ step }}</h3></noscript>
{{ step.get_help_text }}
{% include 'horizon/common/_form_errors.html' with form=form %}
<div class="row">
  <div class="col-sm-12">
    <table id="mappings_table" class="table table-condensed" data-count="{{ mappings_count }}">
      <tr>
        <th colspan="5">&nbsp;<input class="hidden" id="mappings" name="mappings" type="text" value="{{ form.mappings.value }}" /></th>
      </tr>
      {% include 'admin/policies/rules/_mapping_row.html' with form=form count=0 column='' value='' %}
      {% for column, value in mappings %}{% include 'admin/policies/rules/_mapping_row.html' with form=form count=forloop.counter column=column value=value %}{% endfor %}
      <tr>
        <td colspan="5" class="borderless input-errors">
          {% for error in form.mappings.errors %}
            <span class="help-block alert alert-danger {{ form.error_css_class }}">{{ error }}</span>
          {% endfor %}
        </td>
      </tr>
    </table>
    <table id="joins_table" class="table table-condensed">
      <tr>
        <td colspan="4">
          <div class="form-group">
            <label class="control-label">Only including rows where:</label>
          </div>
        </td>
      </tr>
      {% for left, op, right in joins %}<tr id="join_{{ forloop.counter0 }}">
        <td class="ui-front borderless input-cell">
          <div class="has-feedback ac">
            <input id="join_left_{{ forloop.counter0 }}" class="form-control ac-columns" name="join_left_{{ forloop.counter0 }}" type="text" value="{{ left }}" placeholder="e.g. neutronv2:ports device_id" pattern="{{ column_pattern }}" title="{{ column_pattern_error }}" />
            <div class="form-control-feedback">
              <span class="caret"></span>
            </div>
          </div>
        </td>
        <td class="borderless operator-cell">
          <select id="join_op_{{ forloop.counter0 }}" class="form-control join-op" name="join_op_{{ forloop.counter0 }}">
            <option value=""{% if op == '' %} selected="selected"{% endif %}>has same value as</option>
            <option value="="{% if op == '=' %} selected="selected"{% endif %}>equals</option>
          </select>
        </td>
        <td class="ui-front borderless input-cell">
          <div class="has-feedback ac">
            <input id="join_right_{{ forloop.counter0 }}" class="form-control ac-columns join-right" name="join_right_{{ forloop.counter0 }}" type="text" value="{{ right }}" placeholder="e.g. {% if op %}8, active{% else %}nova:servers id" pattern="{{ column_pattern }}" title="{{ column_pattern_error }}{% endif %}" data-column-example="e.g. nova:servers id" data-static-example="e.g. 8, active" data-pattern="{{ column_pattern }}" data-pattern-error="{{ column_pattern_error }}" />
            <div class="form-control-feedback{% if op != '' %} hidden{% endif %}">
              <span class="caret"></span>
            </div>
          </div>
        </td>
        <td class="borderless">
          <a class="{% if forloop.first %}hidden {% endif %}remove-join-button btn btn-xs btn-primary">&#8211;</a>
        </td>
      </tr>{% endfor %}
    </table>
    <a id="add_join_button" class="btn btn-xs btn-primary" data-count="{{ joins_count }}">&amp;</a>
    <table id="negations_table" class="table table-condensed">
      <tr>
        <td colspan="4">
          <div class="form-group">
            <label class="control-label">Except for rows where:</label>
            <span class="help-icon" data-toggle="tooltip" data-placement="top" title="To exclude a row in the output policy table, select the columns on the left whose values should not exist together in the columns selected on the right."><span class="fa fa-question-circle"></span></span>
          </div>
          </div>
        </td>
      </tr>
      {% for value, column in negations %}<tr id="negation_{{ forloop.counter0 }}">
        <td class="ui-front borderless input-cell">
          <div class="has-feedback ac">
            <input id="negation_value_{{ forloop.counter0 }}" class="form-control ac-columns" name="negation_value_{{ forloop.counter0 }}" value="{{ value }}"  type="text" placeholder="e.g. nova:servers tenant_id" pattern="{{ column_pattern }}" title="{{ column_pattern_error }}" />
            <div class="form-control-feedback">
              <span class="caret"></span>
            </div>
          </div>
        </td>
        <td class="borderless operator-cell">value is in</td>
        <td class="ui-front borderless input-cell">
          <div class="has-feedback ac">
            <input id="negation_column_{{ forloop.counter0 }}" class="form-control ac-columns" name="negation_column_{{ forloop.counter0 }}" type="text" value="{{ column }}" placeholder="e.g. neutronv2:ports tenant_id" pattern="{{ column_pattern }}" title="{{ column_pattern_error }}" />
            <div class="form-control-feedback">
              <span class="caret"></span>
            </div>
          </div>
        </td>
        <td class="borderless">
          <a class="{% if forloop.first %}hidden {% endif %}remove-negation-button btn btn-xs btn-primary">&#8211;</a>
        </td>
      </tr>{% endfor %}
    </table>
    <a id="add_negation_button" class="btn btn-xs btn-primary" data-count="{{ negations_count }}">&amp;</a>
{% comment %}
    <table id="aliases_table" class="table table-condensed">
      <tr>
        <th colspan="5">
          <div class="form-group">
            <label class="control-label">&nbsp;</label>
          </div>
        </th>
      </tr>
      {% for column, name in aliases %}<tr id="alias_{{ forloop.counter0 }}">
        <td class="borderless label-cell">
          {% if forloop.first %}<div class="form-group">
            <label class="control-label">Table Aliases:</label>
            <span class="help-icon" data-toggle="tooltip" data-placement="top" title="Give an alternate name for a table if more than one instance of it is needed above."><span class="fa fa-question-circle"></span></span>
          </div>{% endif %}
        </td>
        <td class="ui-front borderless input-cell">
          <div class="has-feedback ac">
            <input id="alias_column_{{ forloop.counter0 }}" class="form-control ac-tables" name="alias_column_{{ forloop.counter0 }}" type="text" value="{{ column }}" placeholder="e.g. nova:servers" pattern="{{ table_pattern }}" title="{{ table_pattern_error }}" />
            <div class="form-control-feedback">
              <span class="caret"></span>
            </div>
          </div>
        </td>
        <td class="borderless alias-text">as</td>
        <td class="borderless input-cell">
          <input id="alias_name_{{ forloop.counter0 }}" class="form-control alias-name-input" name="alias_name_{{ forloop.counter0 }}" type="text" value="{{ name }}" placeholder="e.g. nova:servers2" />
        </td>
        <td class="borderless">
          <a class="{% if forloop.first %}hidden {% endif %}remove-alias-button btn btn-xs btn-primary">&#8211;</a>
        </td>
      </tr>{% endfor %}
    </table>
    <a id="add_alias_button" class="btn btn-xs btn-primary" data-count="{{ aliases_count }}">+</a>
{% endcomment %}
  </div>
</div>

<script>
  /* Add autocompletion. */
  $('.ac input.ac-tables').autocomplete({
    minLength: 0,
    source: JSON.parse($('#ds_tables').text())
  });
  $('.ac input.ac-columns').each(function() {
    var $input = $(this);
    var $control = $input.closest('td').find('.form-control-feedback');
    if (!$control.hasClass('hidden')) {
      $input.autocomplete({
        minLength: 0,
        source: JSON.parse($('#ds_columns').text())
      });
    }
  });
  $('.ac div.form-control-feedback').click(function() {
    var $div = $(this);
    var $input = $div.siblings('.ac-tables, .ac-columns');
    /* Focus on list now so that clicking outside of it closes it. */
    $input.autocomplete('search', '').focus();
  });

  /* Combine mapping columns into single param. */
  $('#mappings_table').closest('form').submit(function() {
    var columns = [];
    var incomplete = false;
    $('#mappings_table').find('.mapping-column-input').not('#mapping_column_0')
        .each(function() {
      /* All values are required. */
      if (incomplete) {
        return;
      }
      var $input = $(this);
      var name = $input.val();
      if (name) {
        columns.push(name);
      } else {
        incomplete = true;
        columns = [];
        return;
      }
    });
    $('#mappings').val(columns.join(', '));
  });
</script>
