{% macro message(text, reversed=true, classes="", avatar) %}
{% set flex = "row" %}
{% if reversed %}
    {% set flex = "row-reverse" %}
{% endif %}
<div class="message {{ flex }} align-center">
    <div class="avatar">
        <img src="{{ avatar }}" />
    </div>
    <div class="bubble tail {{ classes }} content">
        <p>{{ text }}</p>
    </div>
</div>
{% endmacro message %}

{% macro image(src, alt) %}
<a class="image-link" href="{{ src }}">
    <img src="{{ src }}" alt="{{ alt }}" />
</a>
{% endmacro image %}