{% set ICONS_URL = "https://cdn.theorchard.io/web-icons/"%}
{% set AWAL_BRAND = 'awal' %}
{% set ORCHARD_BRAND = 'orchard' %}

{% if default_brand == AWAL_BRAND %}
	{% set BRAND = 'AWAL' %}
{% else %}
	{% set BRAND = 'Orchard' %}
{% endif %}

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Notification</title>
	<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
	<style type="text/css">
        body {
            width: 100%;
    		margin: 0;
			background-color: #FFF;
            color: #22222B;
            font-size: 16px;
        }

        table {
            line-height: 24px;
            border: none;
            max-width: 450px;
            margin:auto;
            padding: 35px 25px;
            font-family: Helvetica, sans-serif;
        }

        table, tr, td {
            padding: 0;
            border-collapse: collapse;
            border-spacing: 0;
        }

        p {
            margin: 0;
        }

		.title_artist {
			color: #847C7C
		}

        .main_content {
            width: 100%
        }

        .main_message {
            display: flex;
            font-size: 24px;
            line-height: 30px;
        }

        .go_to_accounting {
            padding: 15px 26px;
            text-transform: uppercase;
            border: none;
            font-size: 12px;
            font-weight: 700;
            background: #FF893E;
            font-family: Helvetica, sans-serif;
            color: #FFF;
            text-decoration:none;
            padding: 15px 26px;
            text-transform: uppercase;
            border-radius: 3px;
        }

        .button_wrapper {
            text-align: center;
            margin-top: 35px;
            margin-bottom: 35px;
        }

        .contact_with_us {
           margin-top: 30px;
           font-size: 18px;
        }

        {% if default_brand == AWAL_BRAND %}
            @font-face {
                font-family: 'Karla';
                font-style: normal;
                font-weight: 400;
                font-display: swap;
                src: url(https://fonts.gstatic.com/s/karla/v15/qkBIXvYC6trAT55ZBi1ueQVIjQTD-JqaE0lMZbLXGhmR.woff) format('woff');
                unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            }

            @font-face {
                font-family: 'Barlow';
                font-style: normal;
                font-weight: 500;
                font-display: swap;
                src: url(https://fonts.gstatic.com/s/barlow/v5/7cHqv4kjgoGqM7E3_-gs51ostz0rdg.woff2) format('woff2');
                unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            }

            @font-face {
                font-family: 'Space Mono';
                font-style: normal;
                font-weight: 700;
                font-display: swap;
                src: url(https://fonts.gstatic.com/s/spacemono/v6/i7dMIFZifjKcF5UAWdDRaPpZUFWaHi6WZ3Q.woff2) format('woff2');
                unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
            }

            body {
                width: 100%;
				background-color: #22222B;
                color: #FFF;
            }

            table {
               font-family: Karla, sans-serif;
            }

			.main_message {
				font-family: Barlow, sans-serif;
			}

            .link_color {
                color: #FEF200;
                text-decoration:none
            }

            .contact_with_us {
                font-family: Barlow, sans-serif;
            }

            .go_to_accounting {
                background: linear-gradient(90deg, rgba(211,84,218,1) 0%, rgba(118,4,225,1) 100%);
                font-family: Space Mono, monospace;
            }
        {% endif %}
    </style>
	{% block styles %}{% endblock %}
</head>

<body style="width: 100%;margin: 0;font-size: 16px;{% if default_brand == AWAL_BRAND %}background-color: #22222B;color: #FFF;{% else %}background-color: #FFF;color: #22222B;{% endif %}">
	{# Preview text that is picked up and displayed by some email clients #}
	<div style="display:none;">
	  {{ preview_text }}
	</div>
	{# Whitespaces so that the content of the email is not picked up for the preview text #}
	<div style="display:none;">
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	  &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
	</div>
	<div style="padding:0 25px;">
		<table cellpadding="0" cellspacing="0" border="0" id="backgroundTable" style="font-family: Rubik, sans-serif;width: 100%;line-height: 24px;border: none;max-width: 450px;margin: auto;padding: 0;border-collapse: collapse;border-spacing: 0;">
		<tr style="padding: 0;border-collapse: collapse;border-spacing: 0;">
			<td style="padding: 0;border-collapse: collapse;border-spacing: 0;">
				<table cellspacing="0" cellpadding="0" border="0" style="margin: 49px 0;line-height: 24px;border: none;max-width: 450px;padding: 0;{% if default_brand == AWAL_BRAND %}font-family: Karla, sans-serif;{% else %}font-family: Helvetica, sans-serif;{% endif %}border-collapse: collapse;border-spacing: 0;">
					<tr style="padding: 0;border-collapse: collapse;border-spacing: 0;">
						<td align="left" valign="top" style="padding: 0;border-collapse: collapse;border-spacing: 0;">
							<div>
								{% if default_brand == AWAL_BRAND %}
									<a href="http://www.awal.com"><img src="{{ ICONS_URL }}AWAL-logo.png" style="width:90px;" alt="AWAL"></a>
								{% else %}
								 	<a href="https://www.theorchard.com/"><img src="{{ ICONS_URL }}orchard-logo.png" style="width:106px;" alt="Orchard"></a>
								{% endif %}
							</div>
						</td>
					</tr>
				</table>
			</td>
    	</tr>
		<tr style="padding: 0;border-collapse: collapse;border-spacing: 0;">
		</tr><tr style="padding: 0;border-collapse: collapse;border-spacing: 0;">
			<td style="padding: 0;border-collapse: collapse;border-spacing: 0;">
				<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;line-height: 24px;border: none;max-width: 450px;margin: auto;padding: 0;border-collapse: collapse;border-spacing: 0;{% if default_brand == AWAL_BRAND %}font-family: Karla, sans-serif;{% else %}font-family: Helvetica, sans-serif;{% endif %}">
					<tr style="padding: 0;border-collapse: collapse;border-spacing: 0;">
						<td align="left" valign="top" style="padding: 0;border-collapse: collapse;border-spacing: 0;">
							{% block header_title %}{% endblock %}
						</td>
					</tr>
				</table>
			</td>
    	</tr>
		<tr style="padding: 0;border-collapse: collapse;border-spacing: 0;">
			<td style="padding: 0;border-collapse: collapse;border-spacing: 0;">
				<table cellspacing="0" cellpadding="0" border="0" style="margin: auto;width: 100%;line-height: 24px;border: none;max-width: 450px;padding: 0;{% if default_brand == AWAL_BRAND %}font-family: Karla, sans-serif;{% else %}font-family: Helvetica, sans-serif;{% endif %}border-collapse: collapse;border-spacing: 0;">
					<tr style="padding: 0;border-collapse: collapse;border-spacing: 0;">
						<td style="padding: 0;border-collapse: collapse;border-spacing: 0;">
							{% block content %}{% endblock %}
						</td>
					</tr>
				</table>
			</td>
    	</tr>
	</table>
	</div>
	{% block issues %}{% endblock %}
	<div style="padding:0 25px;">
		<table cellpadding="0" cellspacing="0" border="0" id="backgroundTableFooter" style="font-family: Rubik, sans-serif;width: 100%;line-height: 24px;border: none;max-width: 450px;margin: auto;padding: 0;border-collapse: collapse;border-spacing: 0;">
		<tr style="padding: 0;border-collapse: collapse;border-spacing: 0;">
			<td style="padding: 0;border-collapse: collapse;border-spacing: 0;">
				<table cellspacing="0" cellpadding="0" border="0" style="margin: auto;width: 100%;line-height: 24px;border: none;max-width: 450px;padding: 0;{% if default_brand == AWAL_BRAND %}font-family: Karla, sans-serif;{% else %}font-family: Helvetica, sans-serif;{% endif %}border-collapse: collapse;border-spacing: 0;">
					<tr style="padding: 0;border-collapse: collapse;border-spacing: 0;">
						<td style="padding: 0;border-collapse: collapse;border-spacing: 0;">
							<div class="contact_with_us" style="font-size: 24px;margin-top: 30px;{% if default_brand == AWAL_BRAND %}font-family: Barlow, sans-serif;{% endif %}">
								Connect With Us
							</div>
							<ul style="padding:0; padding-top: 20px; list-style-type: none; font-size: 0;">
								{% if default_brand == AWAL_BRAND  %}
								<li style="display: inline-block; margin: 0; padding: 0;"><a href="https://www.facebook.com/AWAL"><img src="{{ ICONS_URL }}Facebook.png" style="width: 30px; margin-right: 15px;" alt="Facebook"></a></li>
								<li style="display: inline-block; margin: 0; padding: 0;"><a href="https://www.youtube.com/awal"><img src="{{ ICONS_URL }}YouTube.png" style="width: 30px; margin-right: 15px;" alt="YouTube"></a></li>
								<li style="display: inline-block; margin: 0; padding: 0;"><a href="https://twitter.com/awal"><img src="{{ ICONS_URL }}Twitter.png" style="width: 30px; margin-right: 15px;" alt="Twitter"></a></li>
								<li style="display: inline-block; margin: 0; padding: 0;"><a href="https://www.instagram.com/awal/"><img src="{{ ICONS_URL }}Instagram.png" style="width: 30px; margin-right: 15px;" alt="Instagram"></a></li>
								{% elif default_brand == ORCHARD_BRAND %}
								<li style="display: inline-block; margin: 0; padding: 0;"><a href="https://www.facebook.com/theorchard/"><img src="{{ ICONS_URL }}Facebook-black.png" style="width: 30px; margin-right: 15px;" alt="Facebook"></a></li>
								<li style="display: inline-block; margin: 0; padding: 0;"><a href="https://www.youtube.com/theorchardpresents"><img src="{{ ICONS_URL }}YouTube-black.png" style="width: 30px; margin-right: 15px;" alt="YouTube"></a></li>
								<li style="display: inline-block; margin: 0; padding: 0;"><a href="https://twitter.com/orchtweets"><img src="{{ ICONS_URL }}Twitter-black.png" style="width: 30px; margin-right: 15px;" alt="Twitter"></a></li>
								<li style="display: inline-block; margin: 0; padding: 0;"><a href="https://www.facebook.com/theorchard/"><img src="{{ ICONS_URL }}Instagram-black.png" style="width: 30px; margin-right: 15px;" alt="Instagram"></a></li>
								<li style="display: inline-block; margin: 0; padding: 0;"><a href="https://www.linkedin.com/company/the-orchard/"><img src="{{ ICONS_URL }}Linkedin-black.png" style="width: 30px; margin-right: 15px;" alt="Linkedin"></a></li>
								<li style="display: inline-block; margin: 0; padding: 0;"><a href="https://www.instagram.com/the_orchard_/"><img src="{{ ICONS_URL }}Orchard-black.png" style="width: 30px; margin-right: 15px;" alt="The Orchard"></a></li>
								{% else %}
								<li style="display: inline-block; margin: 0px 10px 0px 0px;"><a href="https://www.facebook.com/theorchard/" style="text-decoration: none;"><img src="{{ ICONS_URL }}social_facebook.png" alt="facebook" style="width: 30px;
							height: 30px;"></a></li>
								<li style="display: inline-block; margin: 0px 10px 0px 0px;"><a href="https://www.youtube.com/radiallive/" style="text-decoration: none;"><img src="{{ ICONS_URL }}social_youtube.png" alt="youtube" style="width: 30px;
							height: 30px;"></a></li>
								<li style="display: inline-block; margin: 0px 10px 0px 0px;"><a href="https://twitter.com/orchtweets" style="text-decoration: none;"><img src="{{ ICONS_URL }}social_twitter.png" alt="twitter" style="width: 30px;
							height: 30px;"></a></li>
								<li style="display: inline-block; margin: 0px 10px 0px 0px;"><a href="https://www.linkedin.com/company/the-orchard/" style="text-decoration: none;"><img src="{{ ICONS_URL }}social_linkedin.png" alt="linkedin" style="width: 30px;
							height: 30px;"></a></li>
								<li style="display: inline-block; margin: 0px 10px 0px 0px;"><a href="https://www.instagram.com/the_orchard_/" style="text-decoration: none;"><img src="{{ ICONS_URL }}social_instagram.png" alt="instagram" style="width: 30px;
							height: 30px;"></a></li>
								<li style="display: inline-block; margin: 0px 10px 0px 0px;"><a href="https://www.theorchard.com/" style="text-decoration: none;"><img src="{{ ICONS_URL }}social_orchard.png" alt="theorchard" style="width: 30px;
							height: 30px;"></a></li>
								{% endif %}
							</ul>
							<div class="footer" style="font-size: 14px;margin-bottom: 5px;">
								<p style="margin: 0;">
                                    <span>You're receiving this email because you’ve been invited to {{BRAND}}.</span>
                                    <span>This is an automated notification which is unable to receieve replies.</span>
                                    <span>If you have any questions, please contact {{ vendor_name }} directly.</span>
                                </p>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    	</tr>
	</table>
	</div>
	<img src="{{ tracking_url }}">
</body>
</html>
