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

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

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

        .title_store_name {
            color: #847C7C;
        }

        .title_store_link {
            color: #22222B !important;
            text-decoration:none;
        }

        {% if BRAND_ID == BRAND_ID_AWAL %}
            .title_store_name {
                color: #A9A9B2
            }
            .title_store_link {
                color: #FFFFFF !important;
            }
        {% endif %}

        #inner-table {
            width: 100%;
        }

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

        #inner-table .button_cell {
            width: 40%;
            padding: 10px 16px;
            text-align: center;
            background-color: {{BUTTON_BG_COLOR}} !important;
            color: {{BUTTON_TEXT_COLOR}} !important;
        }

        #inner-table .button_cta {
            border: none;
            font-size: 12px;
            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>
            Your store
            <a href="#" class="title_store_link">
                <span class="title_store_name">{{ store_subdomain }}</span><span>{{ store_domain }}</span>
            </a>
            has been successfully connected.
           <br/>
        </p>
        <p>
            {% if is_multiartist_store %}
               Now, you can link your artists to your collections, which will help us analyze your store data.
            {% else %}
               Now, you can browse your artist page and see an overview of your fans.
            {% endif %}
        </p>
    </div>

{% endblock %}

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

            <td class="button_cell">
                <a class="button_cta" href="https://{{ subdomain }}.{{ brand_domain }}{{ store_url }}">
                    GO TO STORE DETAILS
                </a>
            </td>

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