{# The body of an add_banner_tiles() card -- the grid or slider of tiles -- shared by both #}
{# packs, since none of it is Bootstrap-version-specific. Every field a tile shows is      #}
{# escaped except `title_html` (via tile.heading), rendered as-is by name like            #}
{# Tile.heading_html. The banner background and the point colours, written into style   #}
{# attributes, are checked on BannerTile (background_css, point_items) before they get    #}
{# here. The grid's width is not: it is add_banner_tiles(width=...), set in code.         #}
{% if card.extra_card_info.banner_tiles_is_slider %}
<div class="django-card__banner-tile-slider" id="{{ card.code }}_slider">
    <button type="button" class="django-card__banner-tile-slider-arrow django-card__banner-tile-slider-arrow--prev" aria-label="Previous"><i class="fas fa-chevron-left"></i></button>
{% endif %}
<div class="django-card__banner-tiles{% if card.extra_card_info.banner_tiles_is_slider %} django-card__banner-tiles--slider{% endif %}"{% if card.extra_card_info.banner_tiles_width %} style="--django-card-banner-tile-width: {{ card.extra_card_info.banner_tiles_width }}"{% endif %}>
    {% for tile in card.extra_card_info.banner_tiles %}
    {% if tile.is_showcase %}
    <div class="django-card__banner-tile django-card__banner-tile-showcase{% if tile.css_class %} {{ tile.css_class }}{% endif %}" id="{{ tile.key }}">
        <div class="django-card__banner-tile-showcase-text">
            {% if tile.has_title %}<div class="django-card__banner-tile-showcase-title">{{ tile.heading }}</div>{% endif %}
            {% if tile.description %}<div class="django-card__banner-tile-showcase-description">{{ tile.description }}</div>{% endif %}
            {% if tile.points %}
            <ul class="django-card__banner-tile-showcase-points">
                {% for point in tile.point_items %}<li><span class="django-card__banner-tile-showcase-point-icon" style="background: {{ point.colour }}">{% if point.icon %}<i class="{{ point.icon }}"></i>{% endif %}</span>{{ point.text }}</li>{% endfor %}
            </ul>
            {% endif %}
            {% if tile.action_label %}<div><a href="{{ tile.action_url|default:'#' }}" class="{{ tile.action_classes }}">{{ tile.action_label }}</a></div>{% endif %}
        </div>
        {% if tile.has_panels %}
        <div class="django-card__banner-tile-showcase-panels" aria-hidden="true">
            {% if tile.banner_icon %}<div class="django-card__banner-tile-showcase-panel django-card__banner-tile-showcase-panel--main"{% if tile.background_css %} style="background: {{ tile.background_css }}"{% endif %}><i class="{{ tile.banner_icon }}"></i></div>{% endif %}
            {% if tile.flow or tile.panel_icon %}
            <div class="django-card__banner-tile-showcase-side">
                {% if tile.flow %}<div class="django-card__banner-tile-showcase-panel django-card__banner-tile-showcase-panel--flow">{% for name in tile.flow %}{% if not forloop.first %}<span class="django-card__banner-tile-showcase-flow-line"></span>{% endif %}<span class="django-card__banner-tile-showcase-flow-node">{{ name }}</span>{% endfor %}</div>{% endif %}
                {% if tile.panel_icon %}<div class="django-card__banner-tile-showcase-panel django-card__banner-tile-showcase-panel--icon"><i class="{{ tile.panel_icon }}"></i></div>{% endif %}
            </div>
            {% endif %}
        </div>
        {% endif %}
    </div>
    {% elif tile.is_plain %}
    <div class="django-card__banner-tile django-card__banner-tile-plain{% if tile.css_class %} {{ tile.css_class }}{% endif %}" id="{{ tile.key }}">
        {% if tile.has_title %}<div class="django-card__banner-tile-plain-title">{{ tile.heading }}</div>{% endif %}
        {% if tile.description %}<div class="django-card__banner-tile-plain-description">{{ tile.description }}</div>{% endif %}
        {% if tile.action_label %}<a href="{{ tile.action_url|default:'#' }}" class="{{ tile.action_classes }}">{{ tile.action_label }} <i class="fas fa-arrow-right"></i></a>{% endif %}
    </div>
    {% elif tile.is_feature %}
    <div class="django-card__banner-tile django-card__banner-tile-feature{% if not tile.banner_icon %} django-card__banner-tile-feature--plain{% endif %}{% if tile.css_class %} {{ tile.css_class }}{% endif %}" id="{{ tile.key }}"{% if tile.background_css %} style="background: {{ tile.background_css }}"{% endif %}>
        <div class="django-card__banner-tile-feature-text">
            {% if tile.has_title %}<div class="django-card__banner-tile-feature-title">{{ tile.heading }}</div>{% endif %}
            {% if tile.description %}<div class="django-card__banner-tile-feature-description">{{ tile.description }}</div>{% endif %}
            {% if tile.action_label %}<div><a href="{{ tile.action_url|default:'#' }}" class="{{ tile.action_classes }}">{{ tile.action_label }}</a></div>{% endif %}
        </div>
        <div class="django-card__banner-tile-feature-art" aria-hidden="true">
            {% if tile.banner_icon %}<span class="django-card__banner-tile-feature-shape django-card__banner-tile-feature-shape--accent"></span>{% endif %}
            <span class="django-card__banner-tile-feature-shape django-card__banner-tile-feature-shape--grey"></span>
            {% if tile.banner_icon %}<span class="django-card__banner-tile-feature-icon"><i class="{{ tile.banner_icon }}"></i></span>{% endif %}
        </div>
    </div>
    {% elif tile.is_highlight %}
    <div class="django-card__banner-tile django-card__banner-tile-highlight{% if tile.css_class %} {{ tile.css_class }}{% endif %}" id="{{ tile.key }}"{% if tile.background_css %} style="background: {{ tile.background_css }}"{% endif %}>
        {% if tile.banner_label or tile.banner_icon %}<div class="django-card__banner-tile-highlight-label">{% if tile.banner_icon %}<i class="{{ tile.banner_icon }}"></i>{% if tile.banner_label %} {% endif %}{% endif %}{{ tile.banner_label|default:'' }}</div>{% endif %}
        {% if tile.has_title %}<div class="django-card__banner-tile-highlight-title">{{ tile.heading }}</div>{% endif %}
        {% if tile.description %}<div class="django-card__banner-tile-highlight-description">{{ tile.description }}</div>{% endif %}
        <div class="django-card__banner-tile-highlight-bottom">
            {% if tile.status %}<div class="django-card__banner-tile-highlight-status">{{ tile.status }}</div>{% endif %}
            {% if tile.progress_percent is not None %}
            <div class="django-card__banner-tile-progress django-card__banner-tile-highlight-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ tile.progress_percent }}">
                <div class="django-card__banner-tile-progress-bar" style="width: {{ tile.progress_percent }}%"></div>
            </div>
            {% endif %}
            {% if tile.action_label %}<a href="{{ tile.action_url|default:'#' }}" class="{{ tile.action_classes }}">{{ tile.action_label }}</a>{% endif %}
        </div>
    </div>
    {% else %}
    <div class="django-card__banner-tile{% if tile.is_detail %} django-card__banner-tile-detail{% endif %}{% if tile.css_class %} {{ tile.css_class }}{% endif %}" id="{{ tile.key }}">
        {% if tile.banner_url %}<a href="{{ tile.banner_url }}" class="django-card__banner-tile-banner django-card__banner-tile-banner--link"{% if not tile.banner_caption and not tile.banner_label %} aria-label="{% firstof tile.plain_title 'Preview' %}"{% endif %}{% else %}<div class="django-card__banner-tile-banner"{% endif %}{% if tile.background_css and not tile.image_url %} style="background: {{ tile.background_css }}"{% endif %}>
            {% if tile.image_url %}
            <img src="{{ tile.image_url }}" alt="" loading="lazy" class="django-card__banner-tile-banner-image">
            {% elif tile.banner_icon %}
            <i class="{{ tile.banner_icon }} django-card__banner-tile-banner-watermark" aria-hidden="true"></i>
            {% endif %}
            {% if tile.step %}<span class="django-card__banner-tile-step">{{ tile.step }}</span>{% endif %}
            {% if tile.banner_url %}<span class="django-card__banner-tile-play" aria-hidden="true"><i class="fas fa-play"></i></span>{% endif %}
            {% if tile.banner_caption %}<span class="django-card__banner-tile-banner-caption">{{ tile.banner_caption }}</span>{% endif %}
            {% if tile.banner_label %}
            <span class="django-card__banner-tile-banner-label">{% if tile.banner_icon %}<i class="{{ tile.banner_icon }}"></i> {% endif %}{{ tile.banner_label }}</span>
            {% endif %}
        {% if tile.banner_url %}</a>{% else %}</div>{% endif %}

        <div class="django-card__banner-tile-body">
            {% if tile.has_callout %}
            <div class="django-card__banner-tile-callout">
                {% if tile.callout_icon %}<i class="{{ tile.callout_icon }} django-card__banner-tile-callout-icon"></i>{% endif %}
                <div>
                    {% if tile.callout_title %}<div class="django-card__banner-tile-callout-title">{{ tile.callout_title }}</div>{% endif %}
                    {% if tile.callout_text or tile.callout_link_label %}<div>{{ tile.callout_text|default:'' }}{% if tile.callout_link_label %} <a href="{{ tile.callout_link_url|default:'#' }}">{{ tile.callout_link_label }}</a>{% endif %}</div>{% endif %}
                </div>
            </div>
            {% endif %}
            {% if tile.has_title %}<div class="django-card__banner-tile-title">{{ tile.heading }}</div>{% endif %}
            {% if tile.description %}<div class="django-card__banner-tile-description" title="{{ tile.description }}">{{ tile.description }}</div>{% endif %}
            {% if tile.badge %}<div><span class="django-card__banner-tile-badge">{{ tile.badge }}</span></div>{% endif %}

            {% if tile.stats %}
            <div class="django-card__banner-tile-stats{% if tile.is_detail %} django-card__banner-tile-stats--list{% endif %}">
                {% for stat in tile.stat_items %}<span>{% if stat.icon %}<i class="{{ stat.icon }}"></i> {% endif %}{{ stat.text }}</span>{% endfor %}
            </div>
            {% endif %}

            {# Pinned to the bottom of the body, so the bars of a row of tiles line up however much text is above them. #}
            {% if tile.progress_percent is not None or tile.status %}
            <div class="django-card__banner-tile-progress-group">
                {% if tile.progress_percent is not None %}
                <div class="django-card__banner-tile-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ tile.progress_percent }}">
                    <div class="django-card__banner-tile-progress-bar" style="width: {{ tile.progress_percent }}%"></div>
                </div>
                {% endif %}
                <div class="django-card__banner-tile-status">{{ tile.status|default:'' }}</div>{# empty under a bar: it keeps the line, so the bars of a row line up #}
            </div>
            {% endif %}

            {% if tile.is_detail %}
            {% if tile.action_label %}<a href="{{ tile.action_url|default:'#' }}" class="{{ tile.action_classes }} django-card__banner-tile-action">{{ tile.action_label }} <i class="fas fa-arrow-right"></i></a>{% endif %}
            {% if tile.secondary_label %}<a href="{{ tile.secondary_url|default:'#' }}" class="django-card__banner-tile-secondary">{% if tile.secondary_icon %}<i class="{{ tile.secondary_icon }}"></i> {% endif %}{{ tile.secondary_label }}</a>{% endif %}
            {% if tile.note %}<div class="django-card__banner-tile-note">{{ tile.note }}</div>{% endif %}
            {% endif %}
        </div>

        {% if tile.has_footer %}
        <div class="django-card__banner-tile-footer">
            <span class="django-card__banner-tile-footer-label">{% if tile.footer_icon %}<i class="{{ tile.footer_icon }}"></i> {% endif %}{{ tile.footer_label|default:'' }}</span>
            {% if tile.action_label and not tile.is_detail %}<a href="{{ tile.action_url|default:'#' }}" class="{{ tile.action_classes }}">{{ tile.action_label }}</a>{% endif %}
        </div>
        {% endif %}
    </div>
    {% endif %}
    {% empty %}
    {% if card.extra_card_info.banner_tiles_empty_message %}
    <p class="django-card__tiles-empty">{{ card.extra_card_info.banner_tiles_empty_message }}</p>
    {% endif %}
    {% endfor %}
</div>
{% if card.extra_card_info.banner_tiles_is_slider %}
    <button type="button" class="django-card__banner-tile-slider-arrow django-card__banner-tile-slider-arrow--next" aria-label="Next"><i class="fas fa-chevron-right"></i></button>
    <div class="django-card__banner-tile-slider-dots">
        {% for tile in card.extra_card_info.banner_tiles %}<button type="button" aria-label="Go to slide {{ forloop.counter }}"></button>{% endfor %}
    </div>
</div>
{% include 'cards/standard/_banner_tiles_slider_script.html' %}
{% endif %}