{% extends "email_base.html" %}
{% block content %}

<style>
    body {
        font-family: Consolas, 'Courier New', monospace;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 2rem;
    }

    th,
    td {
        border: 1px solid #ccc;
        padding: 8px;
        vertical-align: top;
    }

    th.left,
    td.left {
        white-space: nowrap;
        width: 1%;
        background-color: #f9f9f9;
        font-weight: bold;
    }

    th:nth-child(2),
    td:nth-child(2),
    th:nth-child(3),
    td:nth-child(3) {
        width: 49%;
        word-wrap: break-word;
    }
</style>

{% for item in data %}
{% if loop.index > 1 %}
<hr>{% endif %}
<table>
    <thead>
        <tr>
            <th class="left">{{ loop.index }}</th>
            <th>WEBPI</th>
            <th>GALENA</th>
        </tr>
    </thead>
    <tbody>
        {% for key in item.keys() %}
        {% if key.startswith('WEBPI_') %}
        <tr>
            <td class="left"><strong>{{ key[6:] }}</strong></td>
            <td>{{ item[key] | safe }}</td>
            <td>{{ item[key.replace('WEBPI_', 'GALENA_')] | default('') | safe }}</td>
        </tr>
        {% endif %}
        {% endfor %}
    </tbody>
</table>
{% endfor %}

{% endblock %}