{% extends "wbcore/email_base_template.html" %}
{% load i18n %}
{% block body %}
<tr>
    <td style="background-color: #eaf2ff;"></td>
    <td class="body-content" style="height: 12px; font-size: 1px; line-height: 1px;">&nbsp;</td>
    <td style="background-color: #eaf2ff;"></td>
</tr>
{% for notification in notifications %}
<tr class="content-row">
    <td style="background-color: #eaf2ff;"></td>
    <td class="body-content" style="vertical-align: middle; padding-left: 10px; text-align: left;">
        <span style="color: #666; font-size: 12px; display: block;">
            {{ notification.created|date:"M d, Y H:i" }}
        </span>
    </td>
    <td style="background-color: #eaf2ff;"></td>
</tr>
<tr class="content-row">
    <td style="background-color: #eaf2ff;"></td>
    <td class="body-content" style="vertical-align: middle; padding-left: 10px; text-align: left; font-size: 14px">
        <p style="margin: 0;">
            <b>{{ notification.title }}</b>
        </p>
    </td>
    <td style="background-color: #eaf2ff;"></td>
</tr>
<tr class="content-row">
    <td style="background-color: #eaf2ff;"></td>
    <td class="body-content" style="vertical-align: middle; padding-right: 10px; text-align: right;">
        <a class="link" href="{{ notification.notification_link }}"
           target="_blank"
           style="padding: 4px 6px; border: 1px solid #ED2939; border-radius: 10px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff; text-decoration: none; font-weight: bold; display: inline-block; background-color: #f76f5b;">
            {% translate "Detail" %}
        </a>
    </td>
    <td style="background-color: #eaf2ff;"></td>
</tr>
<tr>
    <td style="background-color: #eaf2ff;"></td>
    <td class="body-content" style="height: 12px; font-size: 1px; line-height: 1px;">&nbsp;</td>
    <td style="background-color: #eaf2ff;"></td>
</tr>
{% endfor %}
{% endblock %}