{% macro hero(title, primary) %}
{% set class = "is-bold" %}
{% if primary %}
{% set class = class ~ " hero is-primary" %}
{% endif %}
<section class="{{class}}">
    <header>
        <div class="hero-body">
            <div class="container has-text-centered">
                <h1 class="title">{{title}}</h1>
            </div>
        </div>
    </header>
</section>
{% endmacro hero %}

{% macro list_articles(pages) %}
<section class="articles">
    <div class="columns is-desktop">
        <div class="column is-10-desktop is-offset-1-desktop">
            {% for page in pages %}
            {{ post_macros::page_in_list(page=page) }}
            {% endfor %}
        </div>
    </div>
</section>
{% endmacro list_articles %}

{% macro paginate(paginator) %}
<section class="paginator-container">
    <div class="columns">
        <div class="column is-10 is-offset-1">
            <nav class="pagination is-centered" role="navigation" aria-label="pagination">
                {% if paginator.previous %}
                <a class="button is-primary pagination-previous" href="{{ paginator.previous }}">&laquo; Previous</a>
                {% else %}
                <a class="button is-primary pagination-previous" disabled title="This is the first page">&laquo;
                    Previous</a>
                {% endif %}
                <ul class="pagination-list">
                    <li>Page {{ paginator.current_index }} of {{ paginator.number_pagers }}</li>
                </ul>
                {% if paginator.next %}
                <a class="button is-primary pagination-next" href="{{ paginator.next }}">Next &raquo;</a>
                {% else %}
                <a class="button is-primary pagination-next" disabled title="This is the last page">Next &raquo;</a>
                {% endif %}
            </nav>
        </div>
    </div>
</section>
{% endmacro paginate %}

{% macro navbar() %}
{% if config.extra.zulma_menu or config.extra.zulma_brand or config.build_search_index %}
<header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-brand">
                {% if config.extra.zulma_brand %}
                <a class="navbar-item" href="/">
                    {% if config.extra.zulma_brand.image %}
                    <img src="{{ config.extra.zulma_brand.image | safe | replace(from="$BASE_URL", to=config.base_url) }}"
                        alt="{{ config.extra.zulma_brand.text }}">
                    {% else %}
                    <span>{{ config.extra.zulma_brand.text }}</span>
                    {% endif %}
                </a>
                {% endif %}
                <span class="navbar-burger burger" data-target="navbarMenu">
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            </div>
            <div id="navbarMenu" class="navbar-menu">
                <div class="navbar-end">
                    {% if config.extra.zulma_menu %}
                    {% for item in config.extra.zulma_menu %}
                    {% set item_url =  item.url | replace(from="$BASE_URL", to=config.base_url) %}
                    {% set item_url = item_url ~ "/" %}
                    <a itemprop="url"
                        class="navbar-item {% if item_url == current_url %}is-active{% endif %}"
                        href="{{ item.url | safe | replace(from="$BASE_URL", to=config.base_url) }}">
                        <span itemprop="name">{{ item.name }}
                        </span>
                    </a>
                    {% endfor %}
                    {% endif %}

                    {% if config.build_search_index %}
                    <div class="navbar-item search-container js-only">
                        <input class="input" id="search" type="search" placeholder="Search">

                        <div class="search-results box">
                            <div class="search-results__items"></div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>
</header>
{% endif %}
{% endmacro navbar %}

{% macro footer() %}
{% if config.extra.zulma_allow_theme_selection %}
<footer class="footer js-only">
    <div class="columns">
        <div class="column">
            <div class="content is-flex">
                <div class="theme-select-container">
                    Theme:
                    <select id="theme-select">
                        {% for theme in config.extra.zulma_themes %}
                        {% if config.extra.zulma_theme %}
                        {% set default_theme = config.extra.zulma_theme %}
                        {% else %}
                        {% set default_theme = "default" %}
                        {% endif %}
                        {% if default_theme == theme %}
                        <option selected="selected" value="{{ theme }}">{{ theme }}</option>
                        {% else %}
                        <option value="{{ theme }}">{{ theme }}</option>
                        {% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>
    </div>
</footer>
{% endif %}
{% endmacro footer %}

{% macro css() %}
{% if config.extra.zulma_theme %}
<link id="{{config.extra.zulma_theme}}" class="stylesheet" rel="stylesheet"
    href="{{ get_url(path=config.extra.zulma_theme ~ ".css", trailing_slash=false) }}" />
{% else %}
<link id="default" class="stylesheet" rel="stylesheet" href="{{ get_url(path="default.css", trailing_slash=false) }}" />
{% endif %}
{% endmacro css %}