{% macro headline(text, subtext) %}
    <div style="margin-bottom: 30px;">
        <h1 style="margin: 0; padding: 0; font-size: 1.8em; color: #0053a8">{{ text }}</h1>
        {% if subtext is defined and subtext | length %}
            <div style="margin-top: 5px; font-size: 1.3em; color: #0053a8;">
                {{ subtext }}
            </div>
        {% endif %}
    </div>
{% endmacro %}

{% macro title(text, error = false) %}
    <h2 style="margin: 0; padding: 0 0 20px; font-size: {{ error ? "1.8em" : "1.3em" }}; color: {{ error ? '#ff0000' : '#0b0706' }}">{{ text }}</h2>
{% endmacro %}

{% macro heading(text) %}
    <div style="padding: 0 0 5px; font-size: 1em; color: #989898;">{{ text }}</div>
{% endmacro %}

{% macro paragraph(text, type) %}
    <p style="display: block; margin: 0; padding: 0 0 20px;{{ type == 'small' ? 'font-size: 0.9em;' }}">
        {{ text | raw }}
    </p>
{% endmacro %}

{% macro code(context) %}
    <div style="padding: 0 0 30px;">
        <table style="table-layout: fixed; width: 100%; background: #f5f5f5; color: #6a6a6a; font-size: 0.9em; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;">
            {% for line in context.lines.first..context.lines.last %}
                <tr>
                    <td style="{{ line == context.lines.highlight ? 'color: red;' }}width: 50px; padding: 3px 5px; text-align: right; vertical-align: middle; user-select: none; -moz-user-select: none; -webkit-user-select: none;">
                        {{ line }}
                    </td>
                    <td>
                        <pre style="{{ line == context.lines.highlight ? 'color: red;' }} margin: 0; padding: 3px 0;">
                            {{- context.source[line - 1] -}}
                        </pre>
                    </td>
                </tr>
            {% endfor %}
        </table>
    </div>
{% endmacro %}

{% macro tableHeadings(columns) %}
    <thead>
    <tr>
        {% for column in columns %}
            <td style="
                text-align: {{ column.align ?? 'left' }};
                background: #e8f7ff;
                font-weight: normal;
                padding: {{ column.padding ?? '5px 10px' }};
            ">
                {{ column.html | raw }}
            </td>
        {% endfor %}
    </tr>
    </thead>
{% endmacro %}

{% macro tableRow(columns) %}
    <tr>
        {% for column in columns %}
            <td style="
                width: {{ column.width ?? 'auto' }};
                text-align: {{ column.align ?? 'left' }};
                vertical-align: {{ column.valign ?? 'top' }};
                padding: {{ column.padding ?? '5px 10px' }};
                color: {{ column.color ?? '#000000' }};
                white-space: {{ column.nowrap is defined and column.nowrap ? 'nowrap' : 'normal' }};
            ">
                {{ column.html | raw }}
            </td>
        {% endfor %}
    </tr>
{% endmacro %}