{#
/**
 * @file
 * Colors story template.
 */
#}

<div class="story-container story-container--columns story-container--columns--2">
  {% for theme, theme_section in sections %}
    <div class="story-container__column story-container__column--{{ theme }}">
      {% for section_title, section_colors in theme_section %}

        <div class="story-container__title">{{ section_title }}</div>

        {% for section_name, colors in section_colors %}
          <div class="story-container">
            {% if section_name != 'Standard' %}
              <div class="story-container__subtitle">{{ section_name }}</div>
            {% endif %}

            <div class="story-container__content story-colors-wrapper">
              {% for color_name, color in colors %}
                <div class="story-color-{{ theme }}--{{ color_name }}">
                  <span class="story-color-element" title="{{ color_name }}"></span><span class="story-color-text" title="{{ color_name }}">{{ color_name|capitalize|replace({'-': ' '}) }}</span>
                </div>
              {% endfor %}
            </div>

          </div>
        {% endfor %}
      {% endfor %}
    </div>
  {% endfor %}
</div>

{% if color_map_link is not empty %}
  <div style="text-align: center;">
    <a href="{{ color_map_link }}" target="_blank" class="ct-theme-light ct-button ct-button--secondary ct-button--small">
      Download color map CSV
    </a>
  </div>
{% endif %}
