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

{%- if config.markdown.external_links_target_blank -%}
    {%- set blank_target = "target=_blank" -%}
{%- else -%}
    {%- set blank_target = "" -%}
{%- endif -%}

<div class="cards">
    {%- for page in show_pages %}
    <div class="card">
        {% if page.extra.link_to %}
            <a rel="{{ rel_attributes }}" {{ blank_target }} href={{ page.extra.link_to }}>
        {% 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 %}
        {% if page.extra.link_to %}
            </a>
        {% endif %}

        <div class="card-info">
            <h2 class="card-title">
                {% if page.extra.link_to %}
                    <a rel="{{ rel_attributes }}" {{ blank_target }} href={{ page.extra.link_to }}>{{page.title}}</a>
                {% else %}
                    <a href={{ page.permalink }}>{{page.title}}</a>
                {% endif %}
            </h2>

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

    {% endfor -%}
</div>