<div class="dcaw-compare-table">
  {% if noDelete == 'off' %}
    {% if count %}

      <div class="dcaw-table-header" id="dcaw-header">
        <div class="dcaw-table-header__title bold">
          {{ title }}
        </div>

        <div class="dcaw-table-header__actions">
          <button type="button" class="dcaw-btn-w-icon" data-action="clear">
            {{ clear_icon|raw }}
            <span>{{ clear_text }}</span>
          </button>
        </div>
      </div>
    {% endif %}
  {% endif %}
  {% if products %}
    <div class="dcaw-compare-wrapper">
      <table class="dcaw-compare">
        <thead>
        <tr>
          <th class="dcaw-attribute__title"></th>
          {% for id, product in products %}
            <th class="dcaw-product-tile__header">
              <div class="dcaw-product-tile">
                <a class="dcaw-product-tile__link" href="{{ product.link }}">
                  {{ product.img|raw }}
                </a>

                <h3 class="dcaw-product-tile__title">
                  <a href="{{ product.link }}">
                    {{ product.title }}
                  </a>
                </h3>

                <span class="dcaw-product-tile__price">
                  {{ product.price|raw }}
                </span>

                <div class="dcaw-product-tile__buy">
                  {{ product.buy|raw }}
                </div>

                <button class="dcaw-product-tile__compare js-dcaw-compare-remove-btn"
                        data-title="{{ product.title }}"
                        data-id="{{ id }}">&times;
                </button>
              </div>
            </th>
          {% endfor %}
        </tr>
        </thead>
        <tbody>
        {% if hide_short_description == 'off' %}
          <tr>
            <td class="dcaw-attribute__title">
              {{ 'Description'|raw }}
            </td>
            {% for id, product in products %}
              <td class="dcaw-attribute__value">
                {{ product.short_description|default('—') }}
              </td>
            {% endfor %}
          </tr>
        {% endif %}
        {% for slug, attribute in attributes %}
          <tr {% if attribute.identical %} data-identical="true" {% endif %} data-slug="{{ slug }}">
            <td class="dcaw-attribute__title">
              {{ attribute.name }}
            </td>
            {% for id, value in attribute.values %}
              <td class="dcaw-attribute__value {% if value.value == 'Out of stock' %}out-of-stock{% endif %}{% if value.value == 'In stock' %}in-stock{% endif %}">
                {{ value.value|default('—') }}
              </td>
            {% endfor %}
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    {{ empty_content|raw }}
  {% endif %}
</div>
