{% extends 'base.html' %}
{% set CDN_URL = 'https://cdn.theorchard.io/' %}
{% set IMAGES_URL = CDN_URL+'images' %}
{% block header_title %}
  <div style="font-size:14px; font-weight:500;">{{ account_name }}</div>
  {% trans %}Weekly Analytics{% endtrans %} {{ start_date|datetimeformat(date_format='%b %d') }} - {{ end_date|datetimeformat(date_format='%b %d') }}
  <span style="opacity: 0">{{ account_name }}</span>
{% endblock %}
{% block content %}
  {# Top New Releases #}
  {% if top_new_releases and top_new_releases[0] %}
    <tr>
        <td>
            <table
              cellspacing="0"
              cellpadding="0"
              border="0"
              style="{{ BASE_TABLE_STYLE }}"
            >
                <tr>
                    <td align="left" valign="top">
                      <h2 style="{{ BASE_H2_STYLE }} padding:25px 0 10px 19px;">
                        {% trans %}Top New Releases{% endtrans %}
                      </h2>
                      <div style="font-size:14px; color:#6d6565; padding:0 0 10px 19px">
                        {% trans %}Review the performance of your latest releases, ranked by streams.{% endtrans %}
                      </div>
                      <table style="{{ BASE_TABLE_STYLE }} table-layout:fixed; color:#4a4a4a; font-size:12px;">
                          <tr style="background-color:#f2f2f2; color:#a8a0a0; height:24px;">
                              <th style="width:50px;">
                              </th>
                              <th style="width:250px; text-align:left;">
                                  {% trans %}TITLE{% endtrans %}
                              </th>
                              <th style="width:50px; text-align:right;padding-right:20px;">
                                  {% trans %}LAST WK{% endtrans %}
                              </th>
                              {% for item in stores %}
                                <th style="width:50px; text-align:right;padding-right:20px;">
                                    <img
                                      src="{{ BASE_ICONS_URL }}/{{ item }}.png"
                                      alt="{{ item }}"
                                      height="16"
                                      width="16"
                                      style="{{ BASE_IMG_STYLE }} vertical-align: middle;"
                                    >
                                </th>
                              {% endfor %}
                          </tr>
                          {% for item in top_new_releases %}
                            {% if item.release_name|length > 14 %}
                                {% set white_space = "normal" %}
                            {% else %}
                                {% set white_space = "nowrap" %}
                            {% endif %}

                            {% if (loop.index0 + 1) % 2 > 0 %}
                                {% set table_row_color = '#ffffff' %}
                            {% else %}
                                {% set table_row_color = '#f2f2f2' %}
                            {% endif %}

                            {% if item.subaccount_name is defined %}
                                {% set row_height = "55px" %}
                            {% else %}
                                {% set row_height = "45px" %}
                            {% endif %}
                            <tr style="height:{{ row_height }}; background-color:{{ table_row_color }}; padding:3px 0px 3px 0px; vertical-align: middle;">
                                <td style="color:#6d6565; font-size:18px; font-weight:bold; text-align:center;">
                                  {{ (loop.index0 + 1) }}
                                </td>
                                <td>
                                    <div style="font-weight:bold; white-space: {{ white_space }}; padding: 2px 0 4px 0;">
                                        {{item.release_name}}
                                            {% if item.release_format %}
                                            <span style="font-size:10px; font-weight:500; text-align:center; border-radius: 7px; background-color:#d9d2d0; padding: 1px 5px; margin-left:5px;">
                                                {{ item.release_format|upper|replace_format() }}
                                            </span>
                                            {% endif %}
                                    </div>
                                    <div style="color:#6d6565; padding-bottom: 2px;">
                                        {{item.artist_name}}
                                    </div>
                                    {% if item.subaccount_name %}
                                    <div style="color:#6d6565; font-size:10px; padding-bottom: 2px;">
                                        {{ item.subaccount_name }}
                                    </span>
                                    {% endif %}
                                </td>
                                <td style="text-align:right;padding-right:20px;">
                                    {{item.total_streams | format_number() }}
                                </td>
                                {% for store in stores %}
                                    <td style="text-align:right;padding-right:20px;">
                                      {% if item.store_percentages[store] is defined and item.store_percentages[store] is not none and item.store_percentages[store] != 'N/A' %}
                                        {% if item.store_percentages[store].get('streams_per_store') is defined and item.store_percentages[store].get('streams_per_store') is not none and item.store_percentages[store].get('streams_per_store') != 'N/A' %}
                                          <div>{{ item.store_percentages[store].get('streams_per_store', '-') | format_number() }}</div>
                                        {% else %}
                                          <div>-</div>
                                        {% endif %}
                                      {% else %}
                                        <div style="padding-bottom: 20px;">-</div>
                                      {% endif %}
                                    </td>
                                {% endfor %}
                            </tr>
                          {% endfor %}
                      </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
  {% endif %}
  {# Top Tracks #}
  {% if top_tracks and top_tracks[0] %}
    <tr>
        <td>
            <table
              cellspacing="0"
              cellpadding="0"
              border="0"
              style="{{ BASE_TABLE_STYLE }}"
            >
                <tr>
                    <td align="left" valign="top">
                      <h2 style="{{ BASE_H2_STYLE }} padding:30px 0 10px 19px;">
                        {% trans %}Top Tracks{% endtrans %}
                      </h2>
                      <div style="font-size:14px; color:#6d6565; padding:0 0 10px 19px">
                        {% trans %}See the tracks that earned the most streams between{% endtrans %}
                        &nbsp;{{ start_date|datetimeformat(date_format='%b %d') }}&nbsp;
                        {% trans %}-{% endtrans %}
                        &nbsp;{{ end_date|datetimeformat(date_format='%b %d') }}.
                      </div>
                      <table style="{{ BASE_TABLE_STYLE }} table-layout:fixed; color:#4a4a4a; font-size:12px;">
                          <tr style="background-color:#f2f2f2; color:#a8a0a0; height:24px;">
                              <th style="width:50px;">
                              </th>
                              <th style="width:250px; text-align:left;">
                                  {% trans %}TITLE{% endtrans %}
                              </th>
                              <th style="width:50px; text-align:right;padding-right:20px;">
                                  {% trans %}LAST WK{% endtrans %}
                              </th>
                              {% for item in stores %}
                                <th style="width:50px; text-align:right;padding-right:20px;">
                                    <img
                                      src="{{ BASE_ICONS_URL }}/{{ item }}.png"
                                      alt="{{ item }}"
                                      height="16"
                                      width="16"
                                      style="{{ BASE_IMG_STYLE }} margin-left: 20px;vertical-align: middle;"
                                    >
                                </th>
                              {% endfor %}
                          </tr>
                          {% for item in top_tracks %}
                            {% if item.track_name|length > 14 %}
                                {% set white_space = "normal" %}
                            {% else %}
                                {% set white_space = "nowrap" %}
                            {% endif %}

                            {% if (loop.index0 + 1) % 2 > 0 %}
                                {% set table_row_color = '#ffffff' %}
                            {% else %}
                                {% set table_row_color = '#f2f2f2' %}
                            {% endif %}

                            {% if item.subaccount_name is defined %}
                                {% set row_height = "55px" %}
                            {% else %}
                                {% set row_height = "45px" %}
                            {% endif %}

                            <tr style="height:{{ row_height }}; background-color:{{ table_row_color }}; padding:3px 0px 3px 0px; vertical-align: middle;">
                                <td style="color:#6d6565; font-size:18px; font-weight:bold; text-align:center;">
                                  {{ (loop.index0 + 1) }}
                                </td>
                                <td>
                                    <div style="font-weight:bold; white-space: {{ white_space }}; padding: 2px 0 4px 0;">
                                        {% set isrc = item.isrc %}
                                        <a href="https://insights.theorchard.com/song/{{isrc}}/?areaView=enabled&utm_source=weekly-analytics&utm_medium=email&utm_campaign=subscribed-email">
                                            {{item.track_name}}
                                        </a>
                                    </div>
                                    <div style="color:#6d6565; padding-bottom: 2px;">
                                        {{item.artist_names | format_artist_names() }}
                                    </div>
                                    {% if item.subaccount_name %}
                                    <div style="color:#6d6565; font-size:10px; padding-bottom: 2px;">
                                        {{ item.subaccount_name }}
                                    </span>
                                    {% endif %}
                                </td>
                                <td style="text-align:right;padding-right:20px;">
                                    {% if item.growth_percentage is defined and item.growth_percentage is not none %}
                                      {% if item.growth_percentage < -0.5 %}
                                        {% set growth_color = '#d54236' %}
                                      {% elif item.growth_percentage > 0.5 %}
                                        {% set growth_color = '#06a459' %}
                                      {% else %}
                                        {% set growth_color = '#A8A0A0' %}
                                      {% endif %}
                                      <div>{{item.total_streams | format_number() }}</div>
                                      <div style="text-align:right; font-weight:500; font-size:8px; margin-top:5px; color:{{ growth_color }}">
                                          {{ item.growth_percentage | format_growth_percentage }}
                                      </div>
                                    {% else %}
                                      <div style="padding-bottom: 15px;">{{item.total_streams | format_number() }}</div>
                                    {% endif %}
                                </td>
                                {% for store in stores %}
                                  <td style="text-align:right;padding-right:20px;">
                                      {% if item.store_percentages[store] is defined and item.store_percentages[store] is not none and item.store_percentages[store] != 'N/A' %}
                                        <div>
                                          {{ item.store_percentages[store].get('streams_per_store', '-') | format_number() }}
                                        </div>
                                        {% if item.store_percentages[store].get('growth_percentage_per_store') is defined and item.store_percentages[store].get('growth_percentage_per_store') is not none %}
                                          {% if item.store_percentages[store].get('growth_percentage_per_store') < -0.5 %}
                                            {% set growth_color = '#d54236' %}
                                          {% elif item.store_percentages[store].get('growth_percentage_per_store') > 0.5 %}
                                            {% set growth_color = '#06a459' %}
                                          {% else %}
                                            {% set growth_color = '#A8A0A0' %}
                                          {% endif %}
                                          <div style="text-align:right; font-weight:500; font-size:8px; margin-top:5px; color:{{ growth_color }}">
                                              {{ item.store_percentages[store].get('growth_percentage_per_store') | format_growth_percentage }}
                                          </div>
                                        {% else %}
                                          <div>-</div>
                                        {% endif %}
                                      {% else %}
                                        <div style="padding-bottom: 20px;">-</div>
                                      {% endif %}
                                  </td>
                                {% endfor %}
                            </tr>
                          {% endfor %}
                      </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
  {% endif %}
  {# Top Releases #}
  {% if top_releases and top_releases[0] %}
    <tr>
        <td>
            <table
              cellspacing="0"
              cellpadding="0"
              border="0"
              style="{{ BASE_TABLE_STYLE }}"
            >
                <tr>
                    <td align="left" valign="top">
                      <h2 style="{{ BASE_H2_STYLE }} padding:30px 0 10px 19px;">
                        {% trans %}Top Releases{% endtrans %}
                      </h2>
                      <div style="font-size:14px; color:#6d6565; padding:0 0 10px 19px">
                        {% trans %}See the releases that earned the most streams between{% endtrans %}
                        &nbsp;{{ start_date|datetimeformat(date_format='%b %d') }}&nbsp;
                        {% trans %}-{% endtrans %}
                        &nbsp;{{ end_date|datetimeformat(date_format='%b %d') }}.
                      </div>
                      <table style="{{ BASE_TABLE_STYLE }} table-layout:fixed; color:#4a4a4a; font-size:12px;">
                          <tr style="background-color:#f2f2f2; color:#a8a0a0; height:24px;">
                              <th style="width:50px;">
                              </th>
                              <th style="width:250px; text-align:left;">
                                  {% trans %}TITLE{% endtrans %}
                              </th>
                              <th style="width:50px; text-align:right;padding-right:20px;">
                                  {% trans %}LAST WK{% endtrans %}
                              </th>
                              {% for item in stores %}
                                <th style="width:50px; text-align:right;padding-right:20px;">
                                    <img
                                      src="{{ BASE_ICONS_URL }}/{{ item }}.png"
                                      alt="{{ item }}"
                                      height="16"
                                      width="16"
                                      style="{{ BASE_IMG_STYLE }} vertical-align: middle;"
                                    >
                                </th>
                              {% endfor %}
                          </tr>
                          {% for item in top_releases %}
                            {% if item.release_name|length > 14 %}
                                {% set white_space = "normal" %}
                            {% else %}
                                {% set white_space = "nowrap" %}
                            {% endif %}

                            {% if (loop.index0 + 1) % 2 > 0 %}
                                {% set table_row_color = '#ffffff' %}
                            {% else %}
                                {% set table_row_color = '#f2f2f2' %}
                            {% endif %}

                            {% if item.subaccount_name is defined %}
                                {% set row_height = "55px" %}
                            {% else %}
                                {% set row_height = "45px" %}
                            {% endif %}
                            <tr style="height:{{ row_height }}; background-color:{{ table_row_color }}; padding:3px 0px 3px 0px; vertical-align: middle;">
                                <td style="color:#6d6565; font-size:18px; font-weight:bold; text-align:center;">
                                  {{ (loop.index0 + 1) }}
                                </td>
                                <td>
                                    <div style="font-weight:bold; white-space: {{ white_space }}; padding: 2px 0 4px 0;">
                                        {{item.release_name}}
                                            {% if item.release_format %}
                                            <span style="font-size:10px; font-weight:500; text-align:center; border-radius: 7px; background-color:#d9d2d0; padding: 1px 5px; margin-left:5px;">
                                                {{ item.release_format|upper|replace_format() }}
                                            </span>
                                            {% endif %}
                                    </div>
                                    <div style="color:#6d6565; padding-bottom: 2px;">
                                        {{item.artist_name}}
                                    </div>
                                    {% if item.subaccount_name %}
                                    <div style="color:#6d6565; font-size:10px; padding-bottom: 2px;">
                                        {{ item.subaccount_name }}
                                    </span>
                                    {% endif %}
                                </td>
                                <td style="text-align:right;padding-right:20px;">
                                    {% if item.growth_percentage is defined and item.growth_percentage is not none %}
                                      {% if item.growth_percentage < -0.5 %}
                                        {% set growth_color = '#d54236' %}
                                      {% elif item.growth_percentage > 0.5 %}
                                        {% set growth_color = '#06a459' %}
                                      {% else %}
                                        {% set growth_color = '#A8A0A0' %}
                                      {% endif %}
                                      <div>{{item.total_streams | format_number() }}</div>
                                      <div style="text-align:right; font-weight:500; font-size:8px; margin-top:5px; color:{{ growth_color }}">
                                          {{ item.growth_percentage | format_growth_percentage }}
                                      </div>
                                    {% else %}
                                      <div style="padding-bottom: 15px;">{{item.total_streams | format_number() }}</div>
                                    {% endif %}
                                </td>
                                {% for store in stores %}
                                  <td style="text-align:right;padding-right:20px;">
                                      {% if item.store_percentages[store] is defined and item.store_percentages[store] is not none and item.store_percentages[store] != 'N/A' %}
                                        <div>
                                          {{ item.store_percentages[store].get('streams_per_store', '-') | format_number() }}
                                        </div>
                                        {% if item.store_percentages[store].get('growth_percentage_per_store') is defined and item.store_percentages[store].get('growth_percentage_per_store') is not none %}
                                          {% if item.store_percentages[store].get('growth_percentage_per_store') < -0.5 %}
                                            {% set growth_color = '#d54236' %}
                                          {% elif item.store_percentages[store].get('growth_percentage_per_store') > 0.5 %}
                                            {% set growth_color = '#06a459' %}
                                          {% else %}
                                            {% set growth_color = '#A8A0A0' %}
                                          {% endif %}
                                          <div style="text-align:right; font-weight:500; font-size:8px; margin-top:5px; color:{{ growth_color }}">
                                              {{ item.store_percentages[store].get('growth_percentage_per_store') | format_growth_percentage }}
                                          </div>
                                        {% else %}
                                          <div>-</div>
                                        {% endif %}
                                      {% else %}
                                        <div style="padding-bottom: 20px;">-</div>
                                      {% endif %}
                                  </td>
                                {% endfor %}
                            </tr>
                          {% endfor %}
                      </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
  {% endif %}
  {# Top Physical Shipments #}
  {% if top_physical_shipments and top_physical_shipments[0] %}
    <tr>
        <td>
            <table
              cellspacing="0"
              cellpadding="0"
              border="0"
              style="{{ BASE_TABLE_STYLE }}"
            >
                <tr>
                    <td align="left" valign="top">
                      <h2 style="{{ BASE_H2_STYLE }} padding:30px 0 10px 19px;">
                        {% trans %}Top Physical Shipments{% endtrans %}
                      </h2>
                      <div style="font-size:14px; color:#6d6565; padding:0 0 10px 19px">
                        {% trans %}Products listed below represent those with the most shipments across the US and Canada between{% endtrans %}
                        &nbsp;{{ start_date|datetimeformat(date_format='%b %d') }}&nbsp;
                        {% trans %}-{% endtrans %}
                        &nbsp;{{ end_date|datetimeformat(date_format='%b %d') }}.
                      </div>
                      <table style="{{ BASE_TABLE_STYLE }} table-layout:fixed; color:#4a4a4a; font-size:12px;">
                          <tr style="background-color:#f2f2f2; color:#a8a0a0; height:24px;">
                              <th style="width:50px;">
                              </th>
                              <th style="width:300px; text-align:left;">
                                  {% trans %}TITLE{% endtrans %}
                              </th>
                              <th style="width:50px; text-align:right; padding-right:20px;">
                                  {% trans %}LAST WEEK{% endtrans %}
                              </th>
                          </tr>
                          {% for item in top_physical_shipments %}
                            {% if item.product_name|length > 14 %}
                                {% set white_space = "normal" %}
                            {% else %}
                                {% set white_space = "nowrap" %}
                            {% endif %}

                            {% if (loop.index0 + 1) % 2 > 0 %}
                                {% set table_row_color = '#ffffff' %}
                            {% else %}
                                {% set table_row_color = '#f2f2f2' %}
                            {% endif %}

                            {% if item.subaccount_name is defined %}
                                {% set row_height = "55px" %}
                            {% else %}
                                {% set row_height = "45px" %}
                            {% endif %}
                            <tr style="height:{{ row_height }}; background-color:{{ table_row_color }}; padding:3px 0px 3px 0px;">
                                <td style="color:#6d6565; font-size:18px; font-weight:bold; text-align:center;">
                                  {{ (loop.index0 + 1) }}
                                </td>
                                <td>
                                    <div style="font-weight:bold; white-space: {{ white_space }}; padding: 2px 0 4px 0;">
                                        {{item.product_name}}
                                            {% if item.product_type %}
                                            <span style="font-size:10px; font-weight:500; text-align:center; border-radius: 7px; background-color:#d9d2d0; padding: 1px 5px; margin-left:5px;">
                                                {{ item.product_type|upper|replace_format() }}
                                            </span>
                                            {% endif %}
                                    </div>
                                    <div style="color:#6d6565; padding-bottom: 2px;">
                                        {{item.artist_name}}
                                    </div>
                                    {% if item.subaccount_name %}
                                    <div style="color:#6d6565; font-size:10px; padding-bottom: 2px;">
                                        {{ item.subaccount_name }}
                                    </span>
                                    {% endif %}
                                </td>
                                <td style="text-align:right; padding-right:20px;">
                                    {{item.total_transactions | format_number() }}
                                </td>
                            </tr>
                          {% endfor %}
                      </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
  {% endif %}
  {% if notes %}
    <tr>
        <td align="center" valign="top">
            <div class="table-footer" style="font-size:11px !important; color:#a8a0a0; margin-top:10px;">
              <em>{% trans %}Note: some data is missing for {% endtrans %} {{notes}} </em>
            </div>
        </td>
    </tr>
  {% endif %}
<tr>
    <td>
        <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;mso-position-horizontal:center;position:absolute;top:0;width:600px; height: 300px; z-index:-3;" src="{{ IMAGES_URL }}/background.png" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->
        <div style="max-width: 600px; padding-top: 16px; padding-left: 16px">
            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
                <tr>
                    <td background="{{ IMAGES_URL }}/background.png" style="background:#ffffff url('{{ IMAGES_URL }}/background.png') no-repeat cover;background-position:left;background-repeat:no-repeat; background-size: contain;padding:0px;vertical-align:top;" height="300">
                        <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:600px;" width="600" ><tr><td style=""><![endif]-->
                        <div>
                            <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;">
                                <tr>
                                    <td>
                                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;">
                                            <tr>
                                                <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word; padding-top: 180px">
                                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px; width: 50%">
                                                        <tbody>
                                                        <tr>
                                                            <td style="width:19%;">
                                                                <a href="https://apps.apple.com/app/apple-store/id1423292062?pt=118711274&ct=Notification%20Email&mt=8">
                                                                    <img height="auto" src="{{ IMAGES_URL }}/app-store.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" />
                                                                </a>
                                                            </td>
                                                            <td style="width:25%; padding-left: 16px">
                                                                <a href="https://play.google.com/store/apps/details?id=com.theorchard.OrchardGo&referrer=utm_source%3Dgoogle%26utm_medium%3Dcpc%26utm_campaign%3DNotification%2520Email%26anid%3Dadmob">
                                                                    <img height="auto" src="{{ IMAGES_URL }}/g-store.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" />
                                                                </a>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--[if mso | IE]></td></tr></table><![endif]-->
                    </td>
                </tr>
            </table>
        </div>
        <!--[if mso | IE]></td></tr></table><![endif]-->
    </td>
</tr>
{% endblock %}