{# A card whose body is a grid of small tiles -- one per object, built by add_tiles().        #}
{#                                                                                            #}
{# Escaping: every field a tile shows is escaped by this template except `heading_html`,      #}
{# which is the one field rendered as-is and is named so that a caller putting user-entered   #}
{# text through it is making an obvious mistake rather than an invisible one. Nothing here is #}
{# blanket-|safe'd: a heading that is markup has to be passed as `heading_html` deliberately, #}
{# and a heading that is text stays text however it is spelled.                               #}
{#                                                                                            #}
{# The chrome is in cards/css/cards.css (.django-card__tile*), which the card emits once per  #}
{# request; only the per-card tile width is inline, as a custom property the stylesheet reads.#}
<div class="{{ card_css_class }}" id="{{ card.code }}" data-title=""{% if card_css_style %} style="{{ card_css_style }}"{% endif %}>
    {% if show_header %}{% if card.title or card.menu %}{# nested: `and` binds tighter than `or` #}
        <div class="card-header {{ card.header_css_class }}">
            <div class="d-flex align-items-center">
                <h5 class="mr-auto">{% if card.header_icon %}<i class="{{ card.header_icon }}"></i> {% endif %}{{ card.title }}</h5>
                {{ card.menu.render }}
                {% include 'cards/standard/_reload_button.html' %}
                {% if card.enable_collapse %}
                <div class="section-header-right {% if card.collapsed %} collapsed{% endif %}" data-target="#{{ card.code }}_body" data-toggle="collapse">
                    <i class="expandicon"></i>
                </div>
                {% endif %}
            </div>
        </div>
    {% endif %}{% endif %}
    {{ card.tab_menu.render }}
    <div class="{{ card_body_css_class }}{% if card.enable_collapse %} collapse{% if not card.collapsed %} show{% endif %}{% endif %}" id="{{ card.code }}_body"{% if card_body_css_style %} style="{{ card_body_css_style }}"{% endif %}>
        <div class="django-card__tiles"{% if card.extra_card_info.tiles_width %} style="--django-card-tile-width: {{ card.extra_card_info.tiles_width }}"{% endif %}>
            {% for tile in card.extra_card_info.tiles %}
            <div class="django-card__tile{% if tile.css_class %} {{ tile.css_class }}{% endif %}" id="{{ tile.key }}"{% if tile.tooltip %} title="{{ tile.tooltip }}"{% endif %}>
                {# Always drawn, never on hover: the pencil is what tells a reader the tile can #}
                {# be edited at all. image_gallery reveals its own on hover, and that was found #}
                {# to hide the affordance, so it is deliberately not copied here.               #}
                {% if tile.edit_url %}
                <a href="{{ tile.edit_url }}" class="django-card__tile-edit" title="Edit">
                    <i class="fas fa-pencil-alt"></i>
                </a>
                {% endif %}

                {# The one unescaped field, and only when the caller asked for it by name. #}
                {% if tile.heading_html %}
                <div class="django-card__tile-heading">{{ tile.heading_html|safe }}</div>
                {% elif tile.heading %}
                <div class="django-card__tile-heading">{{ tile.heading }}</div>
                {% endif %}

                {% if tile.subheading %}<div class="django-card__tile-subheading">{{ tile.subheading }}</div>{% endif %}

                {% if tile.meta_lines %}
                <div class="django-card__tile-meta">
                    {% for line in tile.meta_lines %}<div{% if line.css_class %} class="{{ line.css_class }}"{% endif %}>{{ line.text }}</div>{% endfor %}
                </div>
                {% endif %}

                {% if tile.image_url %}
                <img src="{{ tile.image_url }}" alt="{{ tile.tooltip|default:tile.heading|default:'' }}" loading="lazy" class="django-card__tile-image">
                {% endif %}

                {% if tile.badge %}<div class="django-card__tile-badge"><span class="badge badge-primary">{{ tile.badge }}</span></div>{% endif %}
            </div>
            {% empty %}
            {% if card.extra_card_info.tiles_empty_message %}
            <p class="django-card__tiles-empty">{{ card.extra_card_info.tiles_empty_message }}</p>
            {% endif %}
            {% endfor %}
        </div>
    </div>
    {% if card.footer %}
        <div class="card-footer">
            <small style="text-align: left">{{ card.footer|safe }}</small>
        </div>
    {% endif %}
    {% if card.created_modified_dates %}
        <div class="card-footer">
            <small style="text-align: left">Date created: {{ card.created_modified_dates.0 }}<br>Date
                modified: {{ card.created_modified_dates.1 }}
            </small>
        </div>
    {% endif %}
</div>
{% include 'cards/standard/_reload_script.html' %}