{% macro post_card(article) %}
    <div class="card">
        <h3><a href="{{ article.url }}">{{ article.post.title }}</a></h3>
        <main
            <p>
                {% if article.post.subtitle | length > 0 %}
                    {{ article.post.subtitle }}
                {% else %}
                    {{ article.post.content | safe | striptags | truncate(length=200) }}
                {% endif %}
            </p>
        </main>
        <p class="author">
        	{{ "By {{ link_1 }}{{ link_2 }}{{ link_3 }}{{ name | escape }}{{ link_4 }}" | _(
                link_1='<a href="/@/',
                link_2=article.author.fqn,
                link_3='/">',
                name=article.author.name,
                link_4="</a>")
            }}
            ⋅ {{ article.date | date(format="%B %e") }}
            ⋅ <a href="/~/{{ article.blog.fqn }}/">{{ article.blog.title }}</a>
        </p>
    </div>
{% endmacro post_card %}
{% macro input(name, label, errors, form, type="text", props="", optional=false, default='', details='') %}
    <label for="{{ name }}">
        {{ label | _ }}
        {% if optional %}
            <small>{{ "Optional" | _ }}</small>
        {% endif %}
        <small>{{ details }}</small>
    </label>
    {% if errors is defined and errors[name] %}
        {% for err in errors[name] %}
            <p class="error">{{ err.message | default(value="Unknown error") | _ }}</p>
        {% endfor %}
    {% endif %}
    {% set default = default[name] | default(value="") %}
    <input type="{{ type }}" id="{{ name }}" name="{{ name }}" value="{{ form[name] | default(value=default) }}" {{ props | safe }}/>
{% endmacro input %}
{% macro paginate(page, total, previous="Previous page", next="Next page") %}
    <div class="pagination">
        {% if page != 1 %}
            <a href="?page={{ page - 1 }}">{{ previous | _ }}</a>
        {% endif %}
        {% if page < total %}
            <a href="?page={{ page + 1 }}">{{ next | _ }}</a>
        {% endif %}
    </div>
{% endmacro %}
{% macro comment(comm) %}
    <div class="comment" id="comment-{{ comm.id }}">
        <a class="author" href="/@/{{ comm.author.fqn }}/">
            <img class="avatar small padded" src="{{ comm.author.avatar }}" alt="{{ comm.author.name }}">
            <span class="display-name">{{ comm.author.name }}</span>
            <small>@{{ comm.author.fqn }}</small>
        </a>
        <div class="text">{{ comm.content | safe }}</div>
        <a class="button icon icon-message-circle" href="?responding_to={{ comm.id }}">{{ "Respond" | _ }}</a>
        {% for res in comm.responses %}
            {{ self::comment(comm=res) }}
        {% endfor %}
    </div>
{% endmacro %}
{% macro tabs(links, titles, selected) %}
    <div class="tabs">
        {% for link in links %}
            {% set idx = loop.index0 %}
            <a href="{{ link }}" {% if loop.index == selected %}class="selected"{% endif %}>{{ titles[idx] | _ }}</a>
        {% endfor %}
    </div>
{% endmacro %}
{% macro feather(name) %}
<svg class="feather">
    <use xlink:href="/static/images/feather-sprite.svg#{{ name }}"/>
</svg>
{% endmacro %}
{% macro home_feed(title, link, articles) %}
    <h2>{{ title | _ }} &mdash; <a href="{{ link }}">{{ "View all" | _ }}</a></h2>
    <div class="cards spaced">
        {% for article in articles %}
            {{ macros::post_card(article=article) }}
        {% endfor %}
    </div>
{% endmacro %}