{% extends "podcast_base.html" %}
{% block title %}{% trans %}Spike Detected on your Show!{% endtrans %}{% endblock %}
{% block content %}
<div style="font-size: 24px;  text-align: center; color: #082740;">
   {{ episode_spikes|length }}
   {% trans %} Trending Episodes{% endtrans %}
</div>
<div style="font-size: 14px; text-align: center; color: #6d6565;">
   {% trans %}Detected{% endtrans %}
   {{ todays_date }}
   {% trans %} for {% endtrans %}
   {{ podcast_title }}
</div>
<div style="background-color: #d9d2d0; text-align: center; height: 1px; max-width: 500px; margin: 30px auto;"></div>
{% for spike in episode_spikes %}
<div style="max-width: 500px; margin: auto; line-height: 20px;">
   <div style="color: #6d6565; font-size: 14px; line-height: 1;">
      {{ podcast_title }}
   </div>
   <div style="color: #4a4a4a; font-size: 16px; font-weight: bold; line-height: 2;">
      {{ spike.episode_title }}
   </div>
   <div style="color: #a8a0a0;  font-size: 14px;">
      {% trans %}Released {% endtrans %}
      {{ spike.episode_published_date }}
   </div>
   <div style="color: #a8a0a0; font-size: 14px;">
      {{ network_title }}
   </div>
   <div style="color: #6d6565; font-size: 14px; margin-top: 8px;">
      <span style="font-size: 16px; font-weight: 500;">{{ spike.num_listens_for_date|format_number }}</span>
      {% trans %} downloads on {% endtrans %}
      {{ spike.date }}
   </div>
   <div style="color: #6d6565; font-size: 14px;">
      <span style="font-size: 16px; font-weight: 500; color: #06a459;">{{ spike.percent_diff|round|int }}%</span>
      {% trans %} above the daily average of {% endtrans %}
      {{ spike.avg_listens_over_period|format_number }}
      {% trans %} downloads{% endtrans %}
   </div>
</div>
<div style="background-color: #d9d2d0; text-align: center; height: 1px; max-width: 500px; margin: 30px auto;"></div>
{% endfor %}
<div style="color: #a8a0a0; text-align: center; font-size: 12px;">
   {% trans %}Daily average based on downloads over the past {% endtrans %}
   {{ period }}
   {% trans %} days{% endtrans %}
</div>
<div style="margin-top: 30px; margin-bottom: 30px; text-align: center;">
   <a
       href="{{ insights_url }}"
       style="display: inline-block; {% if organization == 'sme' %}background: #ce232a;{% else %}background: #ff893e;{% endif %} color: #fff; padding: 12px 20px; border-radius: 3px; font-size: 12px; font-weight: 500; text-decoration: none; letter-spacing: 1px;"
   >
      {% trans %}VIEW INSIGHTS{% endtrans %}
   </a>
</div>

{% endblock %}