{% extends "main.html" %}

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

    {% if not ("titleblock" in page.meta.hide) %}
    <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;">
        <div style="display: flex; align-items: center; gap: 1rem; min-width: 0; max-width: calc(100%);">
            {% if page.meta.logo %}
            <img class="page-logo" src="{{ page.meta.logo }}"
                style="height: 2.0rem; flex-shrink: 0;pointer-events:none" />
            {% endif %}
            <div style="display: flex; flex-direction: column">
                <h1 style="margin: 0; word-wrap: break-word; overflow-wrap: break-word; min-width: 0;">
                    {% if page.meta and page.meta.title %}
                    {{ page.meta.title }}
                    {% elif page.toc %}
                    {{ page.toc[0].title }}
                    {% else %}
                    {{ page.title | d(config.site_name, true) }}
                    {% endif %}
                </h1>
            </div>
        </div>
        {% include "partials/actions.html" %}
    </div>
    <hr>
    {% endif %}
    {% if bookmarks %}
    <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);
        ">

            <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 link.description %}title="{{ link.description }}" {% endif %}{%
                        if "://" in link.url %}target="_blank" rel="noopener" {% endif %}>
                        {{ link.label }}
                    </a>
                </li>
                {% endfor %}
            </ul>
            {% endfor %}

        </div>
        {% endfor %}

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

</article>
{% endblock %}