{% extends "admin_settings/base.html" %}
{% import "macros/ordering.html" as ordering_macros  %}
{% import "macros/fields.html" as fields  %}

{% block left_sidebar %}
  {% include "admin_settings/components/user_details_menu.html" %}
{% endblock %}

{% block table %}
  <table id="settings-table" class="ui striped table">
    <thead>
      <tr>
        <th class="master-header" colspan="3">
          <div class="ui grid">
              <div class="ten wide column search-field-column">
                {{ fields.search_item_input(item_search_term) }}
              </div>
              <div class="two wide column center aligned search-button-column">
                <button form="search-item-form" type="submit" class="ui button pink tiny" id="search-item-button">Search</button>
              </div>
              <div class="one wide column center aligned add-button-column">
                <div class="ui floating icon button add-item-button">
                  <i class="plus icon"></i>
                </div>
                <div class="ui popup basic menu add-item-menu" style="display: none">
                  {{ fields.settings_add_item_field(form.name) }}
                  <div class="add-item-submit">
                    <button form="new-item-form" type="submit" class="ui button yellow tiny" id="new-item-button">Apply</button>
                  </div>
                  <div class="item" style="display: none"></div>
                </div>
              </div>
          </div>
        </th>
      </tr>
      <tr>
        <th class="settings-header six wide name">
          {{ ordering_macros.ordering_header("Name", ordering.links["name"]) }}
        </th>
        <th class="settings-header slug">
          {{ ordering_macros.ordering_header("Slug", ordering.links["slug"]) }}
        </th>
        <th class="settings-header is-active">
        </th>
      </tr>
    </thead>
    <tbody>
      {% for obj in objects %}
        <tr id="item_{{ obj.id }}" data-action-url="{{ url_for_update(id=obj.id) }}" class="settings-item">
            <td class="settings-field name">
              {{ fields.settings_field(form.name, obj.name) }}
            </td>
            <td class="settings-field slug">
              {{ obj.slug }}
            </td>
            <td class="right aligned collapsing settings-is-active">
              <div class="ui toggle checkbox is-active">
                <input type="checkbox" name="is_active" {% if not obj.is_deleted %}checked{% endif %}>
              </div>
            </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
{% endblock %}