{% 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/products_menu.html" %}
{% endblock %}

{% block table %}
  <table id="settings-table" class="ui striped table">
    <thead>
      <tr>
        <th class="master-header" colspan="9">
          <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 double" style="display: none">
                <div class="ui grid">
                  <div class="row">
                    <div class="six wide column">
                      {{ fields.settings_add_item_field(form.friendly) }}
                      {{ fields.settings_add_item_field(form.external_id) }}
                      {{ fields.settings_add_item_field(form.claim_values_serializer, custom_widget="ui dropdown") }}
                    </div>
                    <div class="six wide column">
                      {{ fields.settings_add_item_field(form.claim_values_source, custom_widget="ui dropdown") }}
                      {{ fields.settings_add_item_field(form.parent, custom_widget="ui dropdown") }}
                      {{ fields.settings_add_item_field(form.optional, custom_widget="yes-no") }}
                    </div>
                  </div>
                </div>
                <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 three wide column">
          {{ ordering_macros.ordering_header("Name", ordering.links["friendly"]) }}
        </th>
        <th class="settings-header one wide column">
          {{ ordering_macros.ordering_header("Path", ordering.links["path"]) }}
        </th>
        <th class="settings-header two wide column">
          {{ ordering_macros.ordering_header("External ID", ordering.links["external_id"]) }}
        </th>
        <th class="settings-header three wide column">
          {{ ordering_macros.ordering_header("Serializer", ordering.links["claim_values_serializer"]) }}
        </th>
        <th class="settings-header two wide column">
          Values source
        </th>
        <th class="settings-header two wide column">
          Parent
        </th>
        <th class="settings-header optional">
          Optional
        </th>
        <th class="settings-header affected">
          Impacted Users
        </th>
        <th class="settings-header is_active">
        </th>
      </tr>
    </thead>
    <tbody>
      {% for obj in objects %}
        <tr id="item_{{ obj.id }}" data-id="{{ obj.id }}" data-action-url="{{ url_for_update(id=obj.id) }}" class="settings-item">
            <td class="settings-field friendly">
              {{ fields.settings_field(form.friendly, obj.friendly) }}
            </td>
            <td class="settings-field path">
              {{ obj.path }}
            </td>
            <td class="settings-field external_id">
              {{ fields.settings_field(form.external_id, obj.external_id) }}
            </td>
            <td class="settings-field claim_values_serializer">
              {{ fields.settings_field(form.claim_values_serializer, obj.claim_values_serializer, "settings-field-dropdown") }}
            </td>
            <td class="settings-field claim_values_source">
              {{ fields.settings_field(form.claim_values_source, obj.claim_values_source|default("N/A", True), "settings-field-dropdown") }}
            </td>
            <td class="settings-field holder">
              {% if obj.claim_values_source %}
                N/A
              {% else %}
                {{ fields.settings_field(form.parent, obj.parent|default("N/A", True), "settings-field-dropdown") }}
              {% endif %}
            </td>
            <td class="settings-field collapsing optional">
              {{ fields.settings_field(form.optional, obj.optional) }}
            </td>
            <td class="settings-field affected">
              <div class="ui label">
                <a href="{{ url_for("dna_accounts.list", modal=True, affected="claim_name_id:" ~ obj.id) }}">{{ affected_count.get(obj.id, 0) }} <i class="arrow right icon"></i></a>
              </div>
            </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 %}