{% macro toc() %}
    {% if page.toc %}
        <div class="px-4 py-0.5 my-3 border-s-4 rounded-xl border-double">
            <nav>
                <ul class="ml-0 list-none">
                    {% for parent in page.toc %}
                        {% if parent.level == 2 %}
                            <li>
                                {#- -#}
                                <a href="{{ parent.permalink | safe }}">{{ parent.title }}</a>
                                {#- -#}
                                {% if parent.children %}
                                    <ul class="my-0 ml-5 list-none">
                                        {% for child in parent.children %}
                                            {% if child.level == 3 %}
                                                <li>
                                                    {#- -#}
                                                    <a class="text-base" href="{{ child.permalink | safe }}">{{ child.title }}</a>
                                                    {#- -#}
                                                </li>
                                            {% endif %}
                                        {% endfor %}
                                    </ul>
                                {% endif %}
                                {#- -#}
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </nav>
        </div>
    {% endif %}
{% endmacro %}

{% macro btn(link, content) %}
    <a class="py-1.5 px-3 my-2 no-underline bg-gray-800 rounded-xl transition duration-500 hover:scale-[1.02]"
       href="{{ link | safe }}">{{ content | safe }}</a>
{% endmacro %}