{% 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="{{ 7 + holder.children|length }}">
        <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 {% if holder.parent %}double{% endif %}"
                 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.components) }}
                  </div>
                  {% if holder.parent %}
                    <div class="six wide column">
                      {{ fields.settings_add_item_field(form.parent, custom_widget="ui dropdown") }}
                    </div>
                  {% endif %}
                </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>
      {% if holder and holder.images_url %}
        <th class="settings-header image"></th>
      {% endif %}
      <th class="settings-header four wide column">
        {{ ordering_macros.ordering_header("Name", ordering.links["friendly"]) }}
      </th>
      <th class="settings-header two wide column">
        {{ ordering_macros.ordering_header("External ID", ordering.links["external_id"]) }}
      </th>
      <th class="settings-header four wide column">
        Components
      </th>
      {% if holder.parent %}
        <th class="settings-header two wide column">
          {{ holder.parent.friendly }}
        </th>
      {% endif %}
      {% for child in holder.children %}
        <th class="settings-header children">
          {{ child.friendly }}
        </th>
      {% endfor %}
      <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-action-url="{{ url_for_update(id=obj.id) }}" class="settings-item">
          {% if holder and holder.images_url %}
            <td class="settings-field image"><img src="{{ obj.image }}" data-fallbacksrc="{{ static_url_for('static', filename='img/no_claim_image.png') }}" onerror="this.onerror=null; this.src=this.dataset.fallbacksrc"></td>
          {% endif %}
          <td class="settings-field friendly">
              {{ fields.settings_field(form.friendly, obj.friendly) }}
          </td>
          <td class="settings-field external_id">
            {{ fields.settings_field(form.external_id, obj.external_id) }}
          </td>
          <td class="settings-field components">
              {{ fields.settings_field(form.components, obj.components|dumps) }}
          </td>
          {% if holder.parent %}
            <td class="settings-field parent">
              {{ fields.settings_field(form.parent, obj.parent|default("N/A", True), "settings-field-dropdown") }}
            </td>
          {% endif %}
          {% for child in holder.children %}
            <th class="settings-field children">
              <div class="ui label">
                <a class="children-modal-link" href="{{ url_for("common.claim_value_children", claim_value_id=obj.id) }}" data-title="{{ obj }} {{ child.friendly }}">{{ obj.children|length }}
                <i class="arrow right icon"></i></a>
              </div>
            </th>
          {% endfor %}
          <td class="settings-field affected">
            <div class="ui label">
                <a href="{{ url_for("dna_accounts.list", modal=True, affected="claim_value_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 %}