{%- set rel_attributes = macros_rel_attributes::rel_attributes() | trim -%}

<div class="cards">
    {%- for page in show_pages %}
    <div class="card">
        {# 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 }}">
            {% 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 %}
        </a>

        <div class="card-info">
            <h2 class="card-title">
                <a rel="{{ rel_attributes }}" {{ blank_target }} href="{{ target_url }}">{{ page.title }}</a>
            </h2>

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