<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;">
<!-- CONTAINER -->
<div style="width: 680px;  box-sizing: border-box; font-family: Montserrat;">

    <!-- LOGO -->
    <div style="width: 100%; padding:15px;">
        <a href="{{ store_url }}" title="{{ store_name }}">
            <img src="{{ store_url }}image/catalog/email/Pedido-banner.png" alt="{{ store_name }}" style="margin-bottom: 20px; border: none; width:100%;"/>
        </a>
    </div>
    <!-- .LOGO -->

    <!-- MENSAGEM ORDER UPDATE -->
    <div style=" box-sizing: border-box; width: 100%; padding:15px; border-top: 3px solid black;">
        <h1 style="margin-top: 0px; margin-bottom: 5px; text-align: center; font-size: 36px; font-family: Montserrat; font-weight: normal;">{{ title }}</h1>
        <h2 style="margin-top: 0px; margin-bottom: 0px; text-align: center; font-size: 22px; font-family: Montserrat; font-weight: normal;">{{ subtitle }}</h2>
    </div>
    <div style="box-sizing: border-box; width: 100%; padding:0px;">
        <a href="{{ link }}">
            {% if order_status_id == 2 or order_status_id == 3 or order_status_id == 5 %}
                <img src="{{ store_url }}image/catalog/email/{{ order_status_id }}.png" alt="order updated" style="width:100%;"/>
            {% else %}
                <img src="{{ store_url }}image/catalog/email/2.png" alt="order updated" style="width:100%;"/>
            {% endif %}
        </a>
    </div>
    <div style=" box-sizing: border-box; width: 100%; padding:15px; overflow: hidden;">
        <div style="font-weight: bold; float: left; width:33%; text-align: left; padding: 15px 0;">{{ text_order_id }} <span style="text-decoration: underline; ">{{ order_id }}</span></div>
        <div style="font-weight: bold; float: left; width:35%; text-align: left; padding: 15px 0;">{{ text_date_added }} <span style="text-decoration: underline; ">{{ date_added }}</span></div>
        <div style="font-weight: bold; float: left; width:31%; text-align: left; padding: 15px 0; text-decoration: underline; "><a href="{{ link }}" style="color: black;">Mais Info+</a></div>
    </div>
    <!-- .MENSAGEM ORDER UPDATE -->


    <!-- FOOTER -->
    <div style=" box-sizing: border-box;width: 100%; background: #262626; color: #666; padding: 10px 20px;">
        <div class="col-md-12 non-newsletter social">
            <a href="https://www.facebook.com/CollectiveSkateshop" target="_blank"><img style="width:50px;" src="{{ store_url }}image/catalog/email/face.png" alt="social networks"/></a>
            <a href="https://instagram.com/collective_store" target="_blank"><img style="width:50px;" src="{{ store_url }}image/catalog/email/insta.png" alt="social networks"/></a>
        </div>
    </div>
    <!-- .FOOTER -->
</div>
<!-- .CONTAINER -->
</body>
</html>