<!DOCTYPE html>
<html>
    <head>
        <title>{{ title }}</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            {% block css %}
                #body {
                    background-color: #f6f9fc;
                    color: black;
                }
                .container {
                    background-color: #FFFFFF;
                    border-radius: 5px;
                    color: black;
                    font-size: 1em;
                    padding: 10px;
                }
                .w-100 {
                    width: 100%;
                }
                .mb-15 {
                    margin-bottom: 15px;
                }
                .block {
                    border: 3px solid #e3e9ef;
                    border-radius: 5px;
                    color: black;
                    font-size: 1em;
                    padding: 10px;
                }
                .company {
                    color: #3D67AC;
                    font-size: 2em;
                    font-weight: bold;
                }
                .email-logo {
                    max-height: 120px;
                    height: auto;
                    width: auto;
                }
                .footer {
                    font-size: 10px;
                    color: black;
                    padding: 10px;
                }
                .btn {
                    border-radius: 5px;
                    background-color: #2E7EFA;
                    color: #FFFFFF;
                }
                .btn a {
                    padding: 10px;
                    font-family: Helvetica, Arial, sans-serif;
                    font-size: 14px;
                    border-radius: 5px;
                    background-color: #2E7EFA;
                    color: #FFFFFF;
                    text-decoration: none;
                    font-weight: bold;
                    display: inline-block;
                }
                .company a {
                    color: #3D67AC;
                    text-decoration: none;
                }
                .text-center {
                    text-align: center;
                }
                .table {
                    border: 1px solid #e3e9ef;
                    border-collapse: collapse;
                }
                .table th {
                    font-weight: bold;
                    background-color: #e3e9ef;
                }
                .table th, .table td {
                    text-align: left;
                    padding: 5px;
                }
                .table td {
                    border-top: 1px solid #e3e9ef;
                }
            {% endblock %}
        </style>
        {% block javascripts %}
        {% endblock %}
    </head>
    <body>
        <div id="body">
            {% block body %}
                <table style="width:100%; background-color:#f6f9fc; color:black" >
                    {% if logoUrl %}
                        <tr>
                            <td>&nbsp;&nbsp;&nbsp;</td>
                            <td style="padding:10px; text-align:center">
                                {% if company.web is empty %}
                                    <img class="email-logo" src="{{ logoUrl }}" alt="{{ company.nombrecorto }}"/>
                                {% else %}
                                    <a href="{{ company.web }}" style="text-decoration:none">
                                        <img class="email-logo" src="{{ logoUrl }}" alt="{{ company.nombrecorto }}"/>
                                    </a>
                                {% endif %}
                            </td>
                            <td>&nbsp;&nbsp;&nbsp;</td>
                        </tr>
                    {% else %}
                        <tr>
                            <td>&nbsp;&nbsp;&nbsp;</td>
                            <td style="padding:10px">
                                <h3 class="company" style="text-align:center; color:#3D67AC; font-size:2em; font-weight:bold">
                                    {% if company.web is empty %}
                                        {{ company.nombrecorto }}
                                    {% else %}
                                        <a href="{{ company.web }}" style="text-decoration:none">
                                            {{ company.nombrecorto }}
                                        </a>
                                    {% endif %}
                                </h3>
                            </td>
                            <td>&nbsp;&nbsp;&nbsp;</td>
                        </tr>
                    {% endif %}
                    <tr>
                        <td>&nbsp;&nbsp;&nbsp;</td>
                        <td class="container" style="background-color: #FFFFFF; border-radius: 5px; color: black; font-size: 1em; padding:10px">
                            {% for block in mainBlocks %}
                                {{ block.render() | raw }}
                            {% endfor %}
                        </td>
                        <td>&nbsp;&nbsp;&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;&nbsp;</td>
                        <td class="footer" style="font-size:10px; color:black; padding:10px">
                            {% for block in footerBlocks %}
                                {{ block.render(true) | raw }}
                            {% endfor %}
                        </td>
                        <td>&nbsp;&nbsp;&nbsp;</td>
                    </tr>
                </table>
            {% endblock %}
        </div>
    </body>
</html>