{% macro format_date(date) %}
    {% if config.extra.date_format %}
        {{ date | date(format=config.extra.date_format) }}
    {% else %}
        {% set day = date | date(format='%-d') | int %}
        {% set suffix = "" %}
        {% if day in [11, 12, 13] %}
            {% set suffix = "th" %}
        {% else %}
            {% set last_digit = day % 10 %}
            {% if last_digit == 1 %}
                {% set suffix = "st" %}
            {% elif last_digit == 2 %}
                {% set suffix = "nd" %}
            {% elif last_digit == 3 %}
                {% set suffix = "rd" %}
            {% else %}
                {% set suffix = "th" %}
            {% endif %}
        {% endif %}
        {{ date | date(format="%-d") }}{{ suffix }} {{ date | date(format="%B %Y") }}
    {% endif %}
{% endmacro %}

{% macro list_posts(pages) %}
<div class="bloglist-container">
    {%- for page in pages %}
    <section class="bloglist-table-row">
        <div class="bloglist-title">
            <a href={{ page.permalink }}>{{page.title}}</a>
        </div>

        <div class="card-meta">
            {%- if page.date %}
                {{ post_macros::format_date(date=page.date, format=config.extra.date_format) }}
            {% endif -%}
            <br />
            <span>{{ page.reading_time }} minute read</span>
            {% if page.draft %}
            <span class="draft-label">DRAFT</span>
            {% endif %}

        </div>

        <br />
        <div class="description">
            {% if page.description %}
            {{ page.description }}
            {% elif page.summary %}
            {{ page.summary | safe }}&hellip;
            {% else %}
            {% set hide_read_more = true %}
            {% endif %}
        </div>

        {% if not hide_read_more %}
        <a class="readmore" href={{ page.permalink }}>Read more ⟶</a>
        {% endif %}
    </section>

    {% endfor -%}
</div>
{% endmacro list_posts %}

{% macro tags(page, short=false) %}
{%- if page.taxonomies and page.taxonomies.tags %}
<span class="post-tags-inline">
    {%- if short %}
    ::
    {%- set sep = "," -%}
    {% else %}
    :: tags:&nbsp;
    {%- set sep = "&nbsp;" -%}
    {% endif -%}
    {%- for tag in page.taxonomies.tags %}
    <a class="post-tag" href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">#{{ tag }}</a>
    {%- if not loop.last %}{{ sep | safe }}{% endif -%}
    {% endfor -%}
</span>
{% endif -%}
{% endmacro tags %}

{% macro page_header(title) %}
<div class="title-container section-title">
    {{ title }}
</div>
{% endmacro page_header %}


{% macro page_desc(desc, page) %}
<div id="banner-container-home">
    <div id="home-banner-text">
            <div class="home-banner-header">{{ desc.title }}</div>
        <section id="banner-home-subtitle">
					{{ page.content | safe }}
        </section>
    </div>
    <div class="image-container-home">
			<img alt="the owner" class="banner-home-img" src={{ desc.img | safe | replace(from="$BASE_URL", to=config.base_url) }} />
    </div>
</div>
{% endmacro page_desc %}


{% macro content(page) %}
<main>
    <article>
        <div>
            <div class="article-title">
                {{ page.title }}
            </div>
            <div class="meta">
                {% if page.draft %}
                <span class="draft-label">DRAFT</span>
                {% endif %}

                {% if page.date %}
                    {{ post_macros::format_date(date=page.date) }}
                    •
                {% endif %}

                <span reading-time="{{ page.reading_time }} min read" word-count="{{ page.word_count }} words">{% if page.taxonomies and page.taxonomies.tags %}&nbsp;{%
                    endif %}</span>

                {% if page.taxonomies and page.taxonomies.tags %}
                <nav class="nav tags"> • Categories:
                    {% for tag in page.taxonomies.tags %}
                    <a href={{ get_taxonomy_url(kind='tags' , name=tag) | safe }}>{{ tag }}</a>{% if not loop.last %},
                    {% endif %}
                    {% endfor %}
                </nav>
                {% endif %}

            </div>
        </div>

        {% if page.extra.tldr %}
        <div class="tldr">
            <h3>TL;DR:</h3>
            <p>{{ page.extra.tldr }}</p>
        </div>
        {% endif %}

        {# Optional table of contents #}
        {% if page.extra.toc | default(value=false) %}
        {% if page.toc %}
            <div class="toc-container">
            <h3>Table of Contents</h3>
            <ul>
                {% for h1 in page.toc %}
                <li>
                    <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
                    {% if h1.children %}
                    <ul>
                        {% for h2 in h1.children %}
                        <li>
                            <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
                            {% if h2.children %}
                            <ul>
                                {% for h3 in h2.children %}
                                <li>
                                    <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
                                </li>
                                {% endfor %}
                            </ul>
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
            </div>
        {% endif %}
        {% endif %}

        <section class="body">
            {{ page.content | safe }}
        </section>

    </article>
</main>
{% endmacro content %}

{% macro cards_posts(pages) %}
<div class="cards">
    {%- for page in pages %}
    <div class="card">
        {% if page.extra.local_image %}
        <img class="card-image" alt={{ page.extra.local_image }} src="{{ get_url(path=page.extra.local_image) }}">
        {% elif page.extra.remote_image %}
        <img class="card-image" alt={{ page.extra.remote_image }} src="{{ page.extra.remote_image }}">
        {% else %}
        <div class="card-image-placeholder"></div>
        {% endif %}

        <div class="card-info">
            <h1 class="card-title">
                {% if page.extra.link_to %}
                <a rel="noopener noreferrer" target="_blank" href={{ page.extra.link_to }}>{{page.title}}</a>
                {% else %}
                <a href={{ page.permalink }}>{{page.title}}</a>
                {% endif %}
            </h1>

            <div class="meta">
                {%- if page.date %}
                    {{ post_macros::format_date(date=page.date) }}
                {% endif -%}
                {% if page.draft %}
                <span class="draft-label">DRAFT</span>
                {% endif %}
            </div>

            <div class="card-description">
                {% if page.description %}
                {{ page.description }}
                {% endif %}
            </div>
        </div>
    </div>

    {% endfor -%}
</div>
{% endmacro cards_posts %}

{% macro list_title(pages, tag_name=false) %}
{% if tag_name %}
<h1 class="title-container">Entries tagged - "{{ term.name }}"</h1>
{% else %}
<h1 class="page-title">All articles</h1>
{% endif %}

<ul class="posts">
    {% for page in pages %}
    <li class="post">
        <a href="{{ page.permalink }}">{{ page.title }}</a>
        <span class="meta">{{ post_macros::format_date(date=page.date) }}</span>
    </li>
    {% endfor %}
</ul>
{% endmacro list_title %}