{% extends 'branded__layout.jinja' %}

{% block extra_styles %}
    <style>
        body, div#body {
            font-family: Helvetica, sans-serif;
        }

        #header-title, #block-issues {
            display: none;
        }

        #block-content {
            max-width: none;
        }

        .block-content-cell {
            padding: 0;
        }

        .inner-table {
            max-width: none;
            width: 100%;
        }

        .table-row {
            padding: 0;
        }

        .table-row-last {
            padding-bottom: 20px;
        }

        .header-main {
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: 30px;
            padding-bottom: 20px;
        }

        .track-row, .header-row, .content-footer {
            padding: 36px 16px;
        }

        .track-row table {
            width: 100%;
            margin: 0;
        }

        .track-image {
            width: 100%;
            height: auto;
            vertical-align: middle;
        }

        .track-image-cell {
            width: 100px;
            max-height: 100px;
            padding: 0;
        }

        .track-info {
            padding-left: 16px;
            padding-top: 0;
            padding-bottom: 0;
            height: 70px;
        }

        .track-info table, .playlist-info table {
            margin: 0;
            height: 100%;
        }

        .track-info td, .playlist-info td {
            padding-top: 0;
            padding-bottom: 0;
            max-width: 1px; /* trick to prevent cell to grow */
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .track-info-artist {
            font-size: 16px;
        }

        .track-info-name {
            height: 100%;
            font-size: 28px;
        }

        .track-info-meta, .track-info-released {
            font-size: 10px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px;
        }

        .track-info-name a {
            color: {{ brand_vars.LINK_HIGHLIGHT_COLOR }} !important;
        }

        .track-info-name a:hover {
            color: {{ brand_vars.LINK_HOVER_COLOR }} !important;
        }

        .track-store-cell {
            width: 24px;
            max-height: 24px;
            vertical-align: top;
            text-align: right;
            padding: 0;
        }

        .track-streams {
            padding: 15px 0 0;
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 22px;
        }

        .playlist-row {
            padding: 12px 0;
        }

        .playlist-row-last {
            padding: 12px 0 0 0;
        }

        .playlist-image-cell {
            width: 70px;
            max-height: 70px;
            padding: 0;
        }

        .playlist-header {
            padding: 20px 0 0;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 155.859%;
        }

        .playlist-info {
            height: 70px;
            padding: 0;
            vertical-align: top;
        }

        .playlist-name {
            font-size: 14px;
        }

        .playlist-info-meta {
            font-size: 10px;
        }

        .playlist-info-streams {
            font-size: 14px;
        }

        .separator {
            border-bottom: 1px solid #E4E0DF;
        }

        .playlist-info-meta {
            color: #847C7C;
            padding: 0;
        }

        .playlist-info-streams {
            text-align: right;
            height: 100%;
        }

        .playlist-info-streams td {
            vertical-align: bottom;
            padding: 0;
        }

        .content-footer {
            text-align: center;
        }

        .contact-cell {
            padding-top: 36px;
        }

    </style>
{% endblock %}

{% block content %}
{% set store_id_map = {
  'spotify': 286,
  'apple music': 1
} %}

{% set tiktok_trending_tracks = [] %}
{% set other_tracks = [] %}

{% for track in trending_tracks %}
    {% if track.store == "tiktok" %}
        {% set _ = tiktok_trending_tracks.append(track) %}
    {% else %}
        {% set _ = other_tracks.append(track) %}
    {% endif %}
{% endfor %}

<table class="inner-table">
    <tbody>
        {% if other_tracks %}
        <tr class="even">
            <td class="table-row">
                <table>
                    <tbody>
                        <tr>
                            <td class="header-row">
                                <div class="header-main">
                                    {% trans count = other_tracks|length %}
                                        You have {{ count }} trending song
                                    {% pluralize %}
                                        You have {{ count }} trending songs
                                    {% endtrans %}
                                </div>

                                <div class="header-extra">
                                    {% set formatted_date = date|datetimeformat(date_format='%A, %B %d, %Y') %}
                                    {% if account_type == 'label' and label_name is not none %}
                                        {% trans vendor_name = label_name, date = formatted_date %}Detected {{ date }} for {{ vendor_name }}{% endtrans %}
                                    {% elif account_type == 'subaccount' and subaccount_name is not none %}
                                        {% trans vendor_name = subaccount_name, date = formatted_date %}Detected {{ date }} for {{ vendor_name }}{% endtrans %}
                                    {% else %}
                                        {% trans date = formatted_date %}Detected {{ date }}{% endtrans %}
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        {% for track in other_tracks %}
        {% set store_name = track.store|default('')|lower %}
        <tr class="{{ loop.cycle('odd', 'even') }}">
            <td class="table-row {% if loop.last %}table-row-last{% endif %}">
                <table>
                    <tbody>
                        <tr>
                            <td class="track-row">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td class="track-image-cell">
                                                <img class="track-image"
                                                     src="{{ track.image_url }}"
                                                     alt="{{ track.track_name }}"
                                                     height="100"
                                                     width="100"
                                                />
                                            </td>
                                            <td class="track-info">
                                                <table>
                                                    <tr class="track-info-artist">
                                                        <td>
                                                            {{ track.artist_names | format_artist_names(max_length=45) }}
                                                        </td>
                                                    </tr>
                                                    <tr class="track-info-name">
                                                        <td>
                                                            <a class="track-info-link"
                                                                href="https://insights.{{ brand_vars.BRAND_SITE }}/song/{{ track.isrc }}/?areaView=enabled&store={{ store_id_map.get(store_name) }}&utm_source=spike-detection&utm_medium=email&utm_campaign=subscribed-email">
                                                                {{ track.track_name|truncate(33, True) }}
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr class="track-info-meta">
                                                        <td>
                                                            {{ track.isrc|upper }}
                                                            {% if account_type == 'label' and track.subaccount_name %}
                                                                 · {{ track.subaccount_name|truncate(80, True) }}
                                                            {% endif %}
                                                        </td>
                                                    </tr>
                                                    <tr class="track-info-released">
                                                        <td>
                                                            {% trans date = track.release_date|datetimeformat(date_format='%B %d, %Y') %}Released {{ date }}{% endtrans %}
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td class="track-store-cell">
                                                <img class="track-image"
                                                     src="{{ ICONS_URL }}/{{ store_name.replace(' ', '_') }}.png"
                                                     alt="{{ store_name }}"
                                                     height="24"
                                                     width="24"
                                                />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="3" class="track-streams">
                                                {% set num_streams = '<span style="font-weight: bold;">' ~ track.num_streams | format_number() ~ '</span>' %}
                                                {% trans count = num_streams|safe, store = track.store, date = date|datetimeformat(date_format='%B', has_ordinal=True) %}
                                                    {{ count }} streams on {{ store }}, {{ date }}
                                                {% endtrans %}
                                                <br/>
                                                {% set percent_above_average = '<span style="font-weight: bold; color: #06a459;">' ~ track.percent_above_average ~ '%</span>' %}
                                                {% trans percent = percent_above_average|safe, average = track.num_streams_avg | format_number() %}
                                                    {{ percent }} above the expected daily average of {{ average }}
                                                {% endtrans %}
                                            </td>
                                        </tr>
                                        {% if track.recent_playlist_placements and track.recent_playlist_placements[0] %}
                                        <tr>
                                            <td colspan="3" class="table-row">
                                                <table>
                                                    <tbody>
                                                        <tr>
                                                            <td class="playlist-header">
                                                                <div>
                                                                    {% trans %}Top Playlists{% endtrans %}
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        {% for playlist in track.recent_playlist_placements %}
                                                        <tr>
                                                            <td class="playlist-row {% if not loop.last %}separator{% else %}playlist-row-last{% endif %}">
                                                                <table>
                                                                    <tbody>
                                                                        <tr>
                                                                            <td class="playlist-image-cell">
                                                                                <img class="track-image"
                                                                                     src="{{ playlist.artwork|format_spike_playlist_artwork(store=store_name) }}"
                                                                                     alt="{{ store_name }}"
                                                                                     height="70"
                                                                                     width="70"
                                                                                />
                                                                            </td>
                                                                            <td class="playlist-info">
                                                                                <table>
                                                                                    <tbody>
                                                                                        <tr class="playlist-name">
                                                                                            <td>
                                                                                                {{ playlist.name|truncate(90) }}
                                                                                            </td>
                                                                                        </tr>
                                                                                        <tr class="playlist-info-meta">
                                                                                            <td>
                                                                                                {% trans date = playlist.date_added|datetimeformat(date_format='%B %d') %}Added {{ date }}{% endtrans %}
                                                                                            </td>
                                                                                        </tr>
                                                                                        {% if playlist.followers %}
                                                                                        <tr class="playlist-info-meta">
                                                                                            <td>
                                                                                                {% trans count = playlist.followers|format_number() %}{{ count }} Followers{% endtrans %}
                                                                                            </td>
                                                                                        </tr>
                                                                                        {% endif %}
                                                                                        <tr class="playlist-info-streams">
                                                                                            <td>
                                                                                                {% trans count = playlist.streams|format_number() %}{{ count }} Streams{% endtrans %}
                                                                                            </td>
                                                                                        </tr>
                                                                                    </tbody>
                                                                                </table>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                        {% endif %}
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        {% endfor %}
        {% endif %}

        {% if tiktok_trending_tracks %}
        <tr class="even">
            <td class="table-row">
                <table>
                    <tbody>
                        <tr>
                            <td class="header-row">
                                <div class="header-main">
                                    {% trans count = tiktok_trending_tracks|length %}
                                        You have {{ count }} trending TikTok creation
                                    {% pluralize %}
                                        You have {{ count }} trending TikTok creations
                                    {% endtrans %}
                                </div>

                                <div class="header-extra">
                                    <div>
                                        {% set formatted_date = date|datetimeformat(date_format='%A, %B %d, %Y') %}
                                        {% if account_type == 'label' and label_name is not none %}
                                            {% trans name = label_name, date = formatted_date %}Detected {{ date }} for {{ name }}{% endtrans %}
                                        {% elif account_type == 'subaccount' and subaccount_name is not none %}
                                            {% trans name = subaccount_name, date = formatted_date %}Detected {{ date }} for {{ name }}{% endtrans %}
                                        {% else %}
                                            {% trans date = formatted_date %}Detected {{ date }}{% endtrans %}
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        {% for track in tiktok_trending_tracks %}
        <tr class="{{ loop.cycle('odd', 'even') }}">
            <td class="table-row {% if loop.last %}table-row-last{% endif %}">
                <table>
                    <tbody>
                        <tr>
                            <td class="track-row">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td class="track-image-cell">
                                                <img class="track-image"
                                                     src="{{ track.image_url }}"
                                                     alt="{{ track.track_name }}"
                                                     height="100"
                                                     width="100"
                                                />
                                            </td>
                                            <td class="track-info">
                                                <table>
                                                    <tr class="track-info-artist">
                                                        <td>
                                                            {{ track.artist_names | format_artist_names() }}
                                                        </td>
                                                    </tr>
                                                    <tr class="track-info-name">
                                                        <td>
                                                            <a class="track-info-link"
                                                                href="https://insights.{{ brand_vars.BRAND_SITE }}/song/{{ track.isrc }}/?areaView=enabled&utm_source=spike-detection&utm_medium=email&utm_campaign=subscribed-email">
                                                                {{ track.track_name }}
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr class="track-info-meta">
                                                        <td>
                                                            {{ track.isrc|upper }}
                                                            {% if account_type == 'label' and track.subaccount_name %}
                                                                 · {{ track.subaccount_name }}
                                                            {% endif %}
                                                        </td>
                                                    </tr>
                                                    <tr class="track-info-released">
                                                        <td>
                                                            {% trans date %}Released {{ date }}{% endtrans %}
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td class="track-store-cell">
                                                {% if track.country_code %}
                                                    <img class="track-image track-country-flag"
                                                         src="{{ ASSETS_URL }}/icons/flags/{{ track.country_code|lower }}.png"
                                                         alt="{{ track.country_code|lower }}"
                                                         width="24"
                                                    />
                                                {% endif %}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        {% endfor %}
        {% endif %}

        <tr>
            <td class="content-footer">
                <a class="cta-btn"
                   href="https://insights.{{ brand_vars.BRAND_SITE }}/?utm_source=spike-detection&utm_medium=email&utm_campaign=subscribed-email">
                    {% trans %}See More Insights{% endtrans %}
                </a>
            </td>
        </tr>
    </tbody>
</table>

{% endblock %}