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

{% macro code(context) %}
    {% if context %}
        <div style="padding: 0; margin: 0 0 30px; background: #f5f5f5; max-height: 600px; overflow: auto;">
            <table style="table-layout: fixed; width: 100%; color: #6a6a6a; font-size: 12px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;">
                {% for line in context.lines.first..context.lines.last %}
                    <tr>
                        <td style="color: {{ line == context.lines.highlight ? 'red' : '#ccc' }}; width: 40px; padding: 3px 10px 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>
    {% endif %}
{% 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 %}