{% extends 'new_base.html' %}

{% set glob={'top_tracks': top_tracks,'top_releases': top_releases,'top_new_releases': top_new_releases,'top_physical_shipments': top_physical_shipments} %}

{% set table_title={'top_tracks': 'Top Songs','top_releases': 'Top Products','top_new_releases': 'Top New Products','top_physical_shipments': 'Top Physical Shipments'} %}

{% set table_description = {
    'top_tracks': 'See the songs that earned the most streams between',
    'top_releases': 'See the products that earned the most streams between',
    'top_new_releases': 'Review the performance of your latest products, ranked by streams.',
    'top_physical_shipments': 'Products listed below represent those with the most shipments across the US and Canada between'
    }
%}

{% set digest_list = [] %}
{# Top Songs #}
{% if top_tracks and top_tracks[0] %}
    {% do digest_list.append('top_tracks') %}
{% endif %}
{# Top Products #}
{% if top_releases and top_releases[0] %}
    {% do digest_list.append('top_releases') %}
{% endif %}
{# Top New Products #}
{% if top_new_releases and top_new_releases[0] %}
    {% do digest_list.append('top_new_releases') %}
{% endif %}
{# Top Physical Shipments #}
{% if top_physical_shipments and top_physical_shipments[0] %}
    {% do digest_list.append('top_physical_shipments') %}
{% endif %}

{% set AWAL_BRAND = 'awal' %}

{% if default_brand == AWAL_BRAND %}
    {% set MAIN_COLOR = '#FFFFFF' %}
    {% set SECONDARY_COLOR = '#A9A9B2' %}
    {% set ODD_BG_COLOR = '#303040'%}
    {% set ODD_COLOR = '#A9A9B2'%}
    {% set EVEN_BG_COLOR = '#22222B'%}
    {% set EVEN_COLOR = '#A9A9B2'%}
{% else %}
    {% set MAIN_COLOR = '#1C1C1C' %}
    {% set SECONDARY_COLOR = '#847C7C' %}
    {% set ODD_BG_COLOR = '#F7F7F7'%}
    {% set ODD_COLOR = '#A8A0A0'%}
    {% set EVEN_BG_COLOR = '#ffffff'%}
    {% set EVEN_COLOR = '#847C7C'%}
{% endif %}

{% block styles %}
    <style type="text/css">
        .image_styles {
            border:none;
            outline:none;
            text-decoration:none;
            -ms-interpolation-mode: bicubic;
        }
        .h2_styles {
            font-size:24px;
            font-weight:700;
            line-height:30px;
            margin:0;
            margin-bottom:30px
        }

        .h3_styles {
            font-size:18px;
            font-weight:700;
            line-height:30px;
            margin:0;
        }

        table {
            width:100% !important;
            max-width: 650px;
            color: {{MAIN_COLOR}};
        }

        .odd_tr {
            background: {{ODD_BG_COLOR}};
            color: {{ODD_COLOR}}
        }

        .even_tr {
           background: {{EVEN_BG_COLOR}};
           color: {{EVEN_COLOR}}
        }

        .table_row {
            vertical-align: middle;
            display:flex;
            padding: 7px 10px 7px 0;
        }

        .content_center {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
{% endblock %}

{% block header_title %}
    <span style="color: {{SECONDARY_COLOR}}; font-size:14px;">{{ account_name }}</span>
    <h2 class="h2_styles" style="font-size: 24px;font-weight: 700;line-height: 30px;margin: 0;margin-bottom: 30px;">{% trans %}Weekly Analytics{% endtrans %} {{ start_date|datetimeformat(date_format='%b %d') }} - {{ end_date|datetimeformat(date_format='%b %d') }}</h2>
{% endblock %}
{% block content %}
    {% for category in digest_list %}
        {% if loop.index0 > 0 %}
            {% set margin_top = "margin-top:30px;" %}
        {% else %}
            {% set margin_top = "" %}
        {% endif %}

        {% if loop.index0 == digest_list|length-1 %}
            {% set margin_bottom = "margin-bottom:60px;" %}
        {% else %}
            {% set margin_bottom = "" %}
        {% endif %}
        <tr>
            <td>
            <table cellspacing="0" cellpadding="0" border="0" style="{{margin_top}}{{margin_bottom}}: ;max-width: 650px;color: {{MAIN_COLOR}};width: 100% !important;">
                <tr>
                    <td align="left" valign="top">
                        <h3 class="h3_styles" style="font-size: 18px;font-weight: 700;line-height: 30px;margin: 0;">
                        {% set title = table_title[category] %}
                        {% trans %}{{title}}{% endtrans %}
                        </h3>
                        <div style="margin-bottom: 15px;">
                        {% set description = table_description[category] %}
                        {% trans %}{{description}}{% endtrans %}
                        {% if category != 'top_new_releases'%}
                            &nbsp;{{ start_date|datetimeformat(date_format='%b %d') }}&nbsp;
                            {% trans %}-{% endtrans %}
                            &nbsp;{{ end_date|datetimeformat(date_format='%b %d') }}.
                        {% endif %}
                        </div>
                        <table style="{{ inner_table_style }} table-layout: fixed;max-width: 650px;color: {{MAIN_COLOR}};width: 100% !important;">
                            <tr class="odd_tr table_row" style="vertical-align: middle;display: flex;padding: 7px 10px 7px 0; background: {{ODD_BG_COLOR}};color: {{ODD_COLOR}};">
                                  <th style="flex: 1;display: flex;flex-direction: column;justify-content: center;" class="content_center">
                              </th>
                              <th style="flex: 5;text-align: left;display: flex;flex-direction: column;justify-content: center;" class="content_center">
                                  {% trans %}TITLE{% endtrans %}
                              </th>
                              <th style="flex: 1.2;text-align: right;display: flex;flex-direction: column;justify-content: center;" class="content_center">
                                  {% trans %}LAST WK{% endtrans %}
                              </th>
                              {% if category != 'top_physical_shipments'%}
                                  {% for item in stores %}
                                    <th style="flex: 1;align-items: end;padding-right: 10px;display: flex;flex-direction: column;justify-content: center;" class="content_center">
                                        <img src="{{ ICONS_URL }}{{ item }}.png" alt="{{ item }}" height="16" width="16" class="image_styles" style="margin-left: 20px;vertical-align: middle;border: none;outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;">
                                    </th>
                                  {% endfor %}
                              {% endif %}
                            </tr>
                            {% for item in glob[category] %}
                                {% 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 = "even_tr" %}
                                    {% set background_color = EVEN_BG_COLOR %}
                                    {% set text_color = EVEN_COLOR %}
                                {% else %}
                                    {% set table_row = "odd_tr" %}
                                    {% set background_color = ODD_BG_COLOR %}
                                    {% set text_color = ODD_COLOR %}
                                {% endif %}
                                <tr class="{{table_row}} table_row" style="vertical-align: middle;display: flex;padding: 7px 10px 7px 0; background: {{background_color}};color: {{text_color}};">
                                <td style="text-align: center;flex: 1;display: flex;flex-direction: column;justify-content: center;" class="content_center">
                                  {{ (loop.index0 + 1) }}
                                </td>
                                <td style="flex: 5;display: flex;flex-direction: column;justify-content: center;" class="content_center">
                                    <div style="white-space: {{ white_space }}; color: {{MAIN_COLOR}};">
                                        {% if category == 'top_tracks' %}
                                            {{item.track_name}}
                                        {% elif category == 'top_physical_shipments' %}
                                            {{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 %}
                                        {% else %}
                                            {{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 %}
                                        {% endif %}
                                    </div>
                                    <div>
                                        {{item.artist_name}}
                                        {{item.artist_names | format_artist_names()}}
                                    </div>
                                </td>
                                <td style="text-align: right;flex: 1.2;padding-right: 10px;display: flex;flex-direction: column;justify-content: center;" class="content_center">
                                    {% 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 = MAIN_COLOR %}
                                        {% endif %}
                                        <div>{{item.total_streams | format_number() }}</div>
                                        <div style="color:{{ growth_color }}">
                                            {{ item.growth_percentage | format_growth_percentage }}
                                        </div>
                                    {% else %}
                                      <div style="">{{item.total_streams | format_number() }}</div>
                                    {% endif %}
                                </td>
                                {% if category != 'top_physical_shipments'%}
                                    {% for store in stores %}
                                        <td style="text-align: right;flex: 1;padding-right: 10px;display: flex;flex-direction: column;justify-content: center;" class="content_center">
                                            {% if item.store_percentages is defined and 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 = MAIN_COLOR %}
                                                    {% endif %}
                                                    <div style="color:{{ growth_color }}">
                                                      {{ item.store_percentages[store].get('growth_percentage_per_store') | format_growth_percentage }}
                                                  </div>
                                                {% else %}
                                                    {% if category != 'top_new_releases'%}
                                                        <div>-</div>
                                                    {% endif %}
                                                {% endif %}
                                            {% else %}
                                                <div style="">-</div>
                                            {% endif %}
                                      </td>
                                    {% endfor %}
                                {% endif %}
                            </tr>
                            {% endfor %}
                      </table>
                    </td>
                </tr>
            </table>
        </td>
        </tr>
    {% endfor %}
    {% if notes %}
        <tr>
            <td align="left" valign="top">
                <h3 class="table-footer" style="font-size:16px !important; color:#a8a0a0; margin-top:10px;">
                  <em>{% trans %}Note: some data is missing for {% endtrans %} {{notes}} </em>
                </h3>
            </td>
        </tr>
    {% endif %}
{% endblock %}