{% extends "main.html" %}

{% block content %}
{% set bookmarks = config.extra.frontpage %}
{% set profile = config.extra.user_profile %}


{% 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);
        font-size: 0.95em;
    ">

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

        {% set sections = card.sections if card.sections is defined else [{"links": card.links}] %}
        {% for section in 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;">
                {% if link.icon %}
                <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>
                {% endif %}
                <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 %}

{% endblock %}