{% extends 'emails/branded__layout.jinja' %}

{% block extra_styles %}
    <style type="text/css">
        th, td {
            padding-left: 0;
        }

        .header {
            align-items: center;
            border-radius: 2px;
            padding-left: 15px;
            margin: 30px 0 0;
            font-size: 24px;
            line-height: 30px;
        }

        .account {
            display: flex;
            align-items: center;
            background-color: #e9ebee;
            border-radius: 4px;
            padding: 18px 30px;
            margin-bottom: 15px;
        }
        .account-icon {
            width: 28px;
            height: 28px;
            margin-right: 10px;
        }
        .account-name {
            flex-grow: 1;
            margin-right: 10px;
        }
        .success-icon {
            color: green;
            font-size: 28px;
        }

        #inner-table {
            width: 100%;
        }

        #inner-table td {
            width: 15%;
        }

        #inner-table .button_cell {
            width: 50%;
            text-align: center;
            padding: 18px 30px;
            border-radius: 5px;
            margin-top: 10px;
            background-color: {{BUTTON_BG_COLOR}} !important;
            color: {{BUTTON_TEXT_COLOR}} !important;
        }

        #inner-table .button_cta {
            border: none;
            font-size: 22px;
            font-weight: 700;
            padding: 0;
            text-transform: uppercase;
            text-decoration: none;
            color: {{BUTTON_TEXT_COLOR}} !important;
        }
    </style>
{% endblock %}

{% block header_title %}
    <div class="header">
        <p>
            The following {{ ad_reporting_platform }} Ad Accounts have been successfully synchronized:
            {% for account in ad_accounts %}
                <div class="account">
                    <img src="{{ ad_reporting_platform_icon }}" alt="{{ ad_reporting_platform }} icon" class="account-icon">
                    <span class="account-name">{{ account }}</span>
                    <span class="success-icon">&#10003;</span>
                </div>
            {% endfor %}
        </p>
        <p>You can now view all campaigns, ad sets, and ads – and create reports.</p>
    </div>

{% endblock %}

{% block content %}
    <table
        id="inner-table"
        border="0"
        cellspacing="0"
        cellpadding="0"
    >
        <tr>
            <td>&nbsp;</td>

            <td class="button_cell">
                <a class="button_cta" href="https://{{ subdomain }}.{{ brand_domain }}{{ ad_reporting_url }}">
                    GO TO AD REPORTING
                </a>
            </td>

            <td>&nbsp;</td>
        </tr>
    </table>
{% endblock %}