{% extends "main.html" %}

{% block content %}
{% set bookmarks = config.extra.bookmarks %}
{% if bookmarks %}
<article class="md-content__inner md-typeset">

    <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); display: grid; gap: 0.8rem;">

        {% for card in bookmarks %}
        <div class="md-bookmark-card" style="
        border: 1px solid var(--md-default-fg-color--lightest);
        border-radius: 0.3rem;
        padding: 0.8rem 1rem;
        background: var(--md-default-bg-color);
        font-size: 0.8rem;
    ">

            <p style="display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; font-weight: 700;">
                <span class="twemoji"
                    style="display: flex; width: 1.1em; flex-shrink: 0; color: var(--md-primary-fg-color);">
                    {% include ".icons/" ~ card.icon ~ ".svg" %}
                </span>
                {{ card.title }}
            </p>

            {% for section in card.sections %}
            {% if not loop.first %}
            <hr style="margin: 0.5rem 0; border-color: var(--md-default-fg-color--lightest);">
            {% endif %}
            <ul style="list-style: none; margin: 0; padding: 0;">
                {% for link in section.links %}
                <li style="margin: 0.25rem 0;">
                    <span class="twemoji"
                        style="display: inline-flex; width: 1em; vertical-align: middle; margin-right: 0.3em; color: var(--md-default-fg-color--light);">
                        {% include ".icons/" ~ link.icon ~ ".svg" %}
                    </span>
                    <a href="{{ link.url }}" {% if "://" in link.url %}target="_blank" rel="noopener" {% endif %}>
                        {{ link.label }}
                    </a>
                </li>
                {% endfor %}
            </ul>
            {% endfor %}

        </div>
        {% endfor %}

    </div>
</article>
{% else %}
{{ super() }}
{% endif %}
{% endblock %}