{#
/**
 * @file
 * Template to display a view as a table with rows and columns flipped.
 *
 * @see template_preprocess_views_flipped_table()
 *
 * @ingroup themeable
 */
#}
{%
  set classes = [
    'cols-' ~ flipped_header|length,
    responsive ? 'responsive-enabled',
    sticky ? 'sticky-enabled',
    'c-product-compare-table',
    'views-table',
  ]
%}

<div class="c-shop-product-compare c-margin-b-20">
  <div class="c-content-title-1">
    <h3 class="c-font-uppercase c-font-bold">{{ 'Product Comparison'|t }}</h3>
  </div>
  <div class="c-product-compare-content">
    <div class="c-product-data c-compare-products clearfix">
      <div class="table-wrapper-responsive">
        <table{{ attributes.addClass(classes) }} summary="{{ summary }}">
          {% if first_row_header %}
            <thead>
            <tr>
              {% if header[flipped_header_field_name].default_classes %}
                {% set column_classes = [
                'views-field',
                'views-field-' ~ flipped_header_field_name,
                ] %}
              {% endif %}
              <th{{ header[flipped_header_field_name].attributes.addClass(column_classes).setAttribute('scope', 'row') }}>
                {{ header[flipped_header_field_name].content }}
              </th>
              {% for key, column in flipped_header %}
                {% if column.default_classes %}
                  {% set column_classes = [
                  'views-field'
                  ] %}
                  {% for field in column.fields %}
                    {% set column_classes = column_classes|merge(['views-field-' ~ field]) %}
                  {% endfor %}
                {% endif %}
              <th{{ column.attributes.addClass(column_classes) }}>
                {%- if column.wrapper_element -%}
                  <{{ column.wrapper_element }}>
                  {%- if column.url -%}
                    <a href="{{ column.url }}"
                       title="{{ column.title }}">{{ column.content }}{{ column.sort_indicator }}</a>
                  {%- else -%}
                    {{ column.content }}{{ column.sort_indicator }}
                  {%- endif -%}
                  </{{ column.wrapper_element }}>
                {%- else -%}
                  {%- if column.url -%}
                    <a href="{{ column.url }}"
                       title="{{ column.title }}">{{ column.content }}{{ column.sort_indicator }}</a>
                  {%- else -%}
                    {{- column.content }}{{ column.sort_indicator }}
                  {%- endif -%}
                {%- endif -%}
                </th>
              {% endfor %}
            </tr>
            </thead>
          {% endif %}
          <tbody>
          {%
            set rows_flipped_ = {
              'field_images' : rows_flipped['field_images'],
              'title' : rows_flipped['title'],
              'price__number' : rows_flipped['price__number'],
            }
          %}
          <tr>
            <td class="c-compare-info c-bg-white">
              {% set count = rows_flipped_['title']['columns']|length %}
              <p>{{ 'There are %d goods in the list.'|format(count)|t }}</p>
            </td>

            {% for key, row_ in rows_flipped_['title']['columns'] %}
              <td class="c-compare-item">
                {{ rows_flipped_['field_images']['columns'][key]['content'] }}
                <h3>
                  {{ rows_flipped_['title']['columns'][key]['content'] }}
                </h3>
                <strong class="c-compare-price">
                  {{ rows_flipped_['price__number']['columns'][key]['content'] }}
                </strong>
              </td>
            {% endfor %}
          </tr>

          <tr>
            <th colspan="3">
              <h2>{{ 'Product Details'|t }}</h2>
            </th>
          </tr>

          {% for field_name, row in rows_flipped|without('field_images', 'title', 'price__number') %}
            <tr>
              {% if header[field_name] %}
                {% set header_column = header[field_name] %}
                {% if header_column.default_classes %}
                  {% set column_classes = [
                    'views-field',
                    'views-field-' ~ field_name,
                    'c-compare-info',
                    ]
                  %}
                {% endif %}
              <td{{ header_column.attributes.addClass(column_classes).setAttribute('scope', 'row') }}>
                {%- if header_column.wrapper_element -%}
                  <{{ header_column.wrapper_element }}>
                  {%- if header_column.url -%}
                    <a href="{{ header_column.url }}" title="{{ header_column.title }}">{{ header_column.content }}{{ header_column.sort_indicator }}</a>
                  {%- else -%}
                    {{ header_column.content }}{{ header_column.sort_indicator }}
                  {%- endif -%}
                  </{{ header_column.wrapper_element }}>
                {%- else -%}
                  {%- if header_column.url -%}
                    <a href="{{ header_column.url }}" title="{{ header_column.title }}">{{ header_column.content }}{{ header_column.sort_indicator }}</a>
                  {%- else -%}
                    {{- header_column.content }}{{ header_column.sort_indicator }}
                  {%- endif -%}
                {%- endif -%}
              </td>
              {% endif %}

              {% for index, item in row.columns %}
                {% if item.default_classes %}
                  {%
                    set column_classes = [
                      'views-field',
                      'c-compare-item',
                    ]
                  %}
                  {% for field in column.fields %}
                    {% set column_classes = column_classes|merge(['views-field-' ~ field]) %}
                  {% endfor %}
                {% endif %}
                <td{{ item.attributes.addClass(column_classes) }}>
                  {% for content in item.content %}
                    {{ content.field_output }}
                  {% endfor %}
                </td>
              {% endfor %}
            </tr>
          {% endfor %}

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>