{%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}
{%- set max_projects = max_projects | default(value=999999) -%}
<div class="cards">
    {%- for page in show_pages %}
        {# Used only in main page #}
        {% if loop.index > max_projects %}
            {% break %}
        {% endif %}
        {# Determine which URL to use, default is page.permalink #}
        {%- if page.extra.link_to and config.markdown.external_links_target_blank -%}
            {%- set blank_target = "target=_blank" -%}
        {%- else -%}
            {%- set blank_target = "" -%}
        {%- endif -%}

        {% set target_url = page.extra.link_to | default(value=page.permalink) %}

        <a rel="{{ rel_attributes }}"
            {{ blank_target }}
            href="{{ target_url }}"
            class="card"
            {% if page.taxonomies %}
            data-tags="{% for tax_name, terms in page.taxonomies %}{% for term in terms | unique %}{{ term | lower }}{% if not loop.last %},{% endif %}{% endfor %}{% endfor %}"
            {% endif %}>
            {% if page.extra.local_image %}
                {% set meta = get_image_metadata(path=page.extra.local_image, allow_missing=true) %}
                <img class="card-image"
                    alt="{{ page.extra.local_image }}"
                    src="{{ get_url(path=page.extra.local_image) }}"
                    {% if meta.width %}width="{{ meta.width }}"{% endif %}
                    {% if meta.height %}height="{{ meta.height }}"{% endif %}>
            {% elif page.extra.remote_image %}
                <img class="card-image"
                    alt="{{ page.extra.remote_image }}"
                    src="{{ page.extra.remote_image }}">
            {% else %}
                <div class="card-image-placeholder"></div>
            {% endif %}

            <div class="card-info">
                <h2 class="card-title">{{ page.title }}</h2>
                <div class="card-description">
                    {% if page.description %}
                        {{ page.description }}
                    {% endif %}
                </div>
            </div>
        </a>
    {% endfor -%}
</div>