{% macro scrap_links(scraps) %}
    <ul class="scrap-links">
        {% for scrap in scraps %}
            <li class="item">
                <a href="{{ base_url }}scraps/{{ scrap.html_file_name }}">
                    {% if scrap.ctx %}
                        <div class="header">
                            <div class="context">{{ scrap.ctx }}&#47;</div>
                            <div class="title">{{ scrap.title }}</div>
                        </div>
                    {% else %}
                        <div class="header">
                            <div class="title">{{ scrap.title }}</div>
                        </div>
                    {% endif %}
                    {% if scrap.thumbnail %}
                        <div class="thumbnail">
                            <img class="thumbnail-image" alt="thumbnail" src="{{ scrap.thumbnail }}" loading="lazy" />
                        </div>
                    {% else %}
                        <div class="summary">{{ scrap.html_text | striptags }}</div>
                    {% endif %}
                </a>
            </li>
        {% endfor %}
    </ul>
{% endmacro scrap_links %}

{% macro tag_links(tags, slice_size=100) %}
    <ul class="tag-links">
        {% for tag in tags | slice(end=slice_size) %}
            <li class="item">
                <a href="{{ base_url }}tags/{{ tag.slug }}.html">
                    <span class="title">{{ tag.title }}</span>&nbsp;<span>({{ tag.backlinks_count }})</span>
                </a>
            </li>
        {% endfor %}
        {% if tags | length > slice_size %}
            <li class="item">
                <a href="{{ base_url }}tags/">
                    <span class="more-link">More...</span>
                </a>
            </li>
        {% endif %}
    </ul>
{% endmacro tag_links %}

{% macro ogp_card(autolink) %}
<div class="ogp-card" data-url="{{ autolink.url }}" data-host="{{ autolink.host }}">
    <a class="ogp-card-link" href="{{ autolink.url }}" target="_blank" rel="noopener noreferrer">
        <img class="ogp-image" src="" alt="OGP Image" />
        <div class="ogp-content">
            <div class="ogp-title">Loading...</div>
            <div class="ogp-description">Fetching description...</div>
        </div>
    </a>
</div>
{% endmacro ogp_card %}