{% 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 }}/">
            {{ macros::avatar(user=comm.author, pad=true) }}
            <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) %}
    {% if articles | length > 0 %}
        <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>
    {% endif %}
{% endmacro %}
{% macro avatar(user, size="small", pad=true) %}
    <img
        class="avatar {{ size }} {% if pad %}padded{% endif %}"
        style="background-image: url('{{ user.avatar }}');"
        title="{{ "{{ name }}'s avatar" | _(name=user.name) }}"
        aria-label="{{ "{{ name }}'s avatar" | _(name=user.name) }}"
    >
{% endmacro %}