<!DOCTYPE html>
<html>
<style>

body {
  font-family: 'Helvetica', 'Arial', sans-serif;
  color: #191414;
  margin: 0;
  padding: 0;
}

.main {
  width: 1000px;
  margin: auto;
  padding-top: 4px;
}

.row {
  margin-top: 0px;
  position: relative;
}

.card {
  width: 1000px;
  border-radius: 20px;
  background-color: {{ rowcolor }};
  padding: 8px 0;
}

.header-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.header-table td {
  vertical-align: middle;
}

.cover {
  width: 80px;
  text-align: center;
  padding: 5px 5px 5px 12px;
}

.cover-wrapper {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
}

.cover-wrapper img {
  border-radius: 6px;
}

.badge-fire {
  position: absolute;
  top: -6px;
  left: -6px;
}

.badge-fire img {
  width: 20px;
  height: 20px;
}

.badge-global {
  position: absolute;
  bottom: -2px;
  left: -6px;
}

.badge-global .icon-wrapper {
  position: relative;
  width: 18px;
  height: 18px;
}

.badge-global .global-icon {
  width: 100%;
  height: 100%;
}

.badge-global .icon-label {
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  color: white;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 3px;
  border-radius: 50%;
  transform: translate(-40%, -40%);
}

.title {
  font-size: 14pt;
  padding-left: 8px;
}

.owner-label {
  font-size: 10pt;
  color: #555;
  margin-left: 8px;
}

.icons-cell {
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
  padding-right: 12px;
}

.icons-cell img {
  vertical-align: middle;
  margin-left: 8px;
}

.catalog {
  display: inline;
}

.flags {
  font-size: 14pt;
  text-align: right;
  padding-right: 15px;
}

.logo {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

/* Country metrics table */
.metrics-table {
  width: 95%;
  margin: 4px auto 2px auto;
  border-collapse: collapse;
  font-size: 11pt;
  table-layout: fixed;
}

.metrics-table th,
.metrics-table td {
  padding: 3px 6px;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
}

.metrics-table th {
  font-size: 10pt;
  color: #666666;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.metrics-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.col-market { width: 110px; }
.col-trend { width: 35px; }
.col-streams { width: 60px; }
.col-pos { width: 80px; }
.col-dist { width: 90px; }
.col-social { width: 45px; }

.metrics-table .country-cell {
  text-align: left;
}

.metrics-table .country-cell .fire-inline {
  margin-left: 6px;
  vertical-align: middle;
}

.metrics-table .trend-cell {
  text-align: center;
}

.metrics-table .trend-cell img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.metrics-table .streams-cell {
  text-align: right;
}

.metrics-table .pos-cell {
  text-align: right;
}

.metrics-table .dist-cell {
  text-align: right;
}

.metrics-table .social-cell {
  text-align: center;
}

</style>

<body>
<div class="main">
<div class="row">
<div class="card">
  <!-- Header: cover, title, license -->
  <table class="header-table">
    <colgroup>
      <col style="width: 80px;">
      <col>
      <col style="width: auto;">
    </colgroup>
    <tr>
      <td class="cover">
        <div class="cover-wrapper">
          <img src="{{ artwork_url }}" alt="Cover" width="64" height="64">
          <div class="badge-global">{{ global_icon }}</div>
        </div>
      </td>
      <td class="title"><b>{{ product_name }}</b> - {{ primary_artist_name }}</td>
      <td class="icons-cell">{{ catalog_flag }}{{ owner_html }}{{ license_icon }}</td>
    </tr>
  </table>

  <!-- Per-country metrics -->
  <table class="metrics-table">
    <colgroup>
      <col class="col-market">
      <col class="col-trend">
      <col class="col-streams">
      {% if show_chart_pos %}<col class="col-pos">{% endif %}
      {% if show_distance %}<col class="col-dist">{% endif %}
      <col class="col-social">
      <col class="col-social">
      <col class="col-social">
    </colgroup>
    <thead>
      <tr>
        <th class="country-cell">Market</th>
        <th class="trend-cell"></th>
        <th class="streams-cell">Streams</th>
        {% if show_chart_pos %}<th class="pos-cell">Chart Position</th>{% endif %}
        {% if show_distance %}<th class="dist-cell">Distance to Chart</th>{% endif %}
        <th class="social-cell"><img src="icons/logo-tiktok.svg" alt="TT" width="14" height="14"></th>
        <th class="social-cell"><img src="icons/meta.svg" alt="Meta" width="14" height="14"></th>
        <th class="social-cell"><img src="icons/logo-shazam.svg" alt="Shzm" width="14" height="14"></th>
      </tr>
    </thead>
    <tbody>
      {% for cm in country_metrics %}
      <tr>
        <td class="country-cell"><img src="icons/flags/{{ cm.country_code_lower }}.svg" alt="{{ cm.country_code }}" width="18" height="12" style="vertical-align: middle; margin-right: 4px;">{{ cm.country_code }}<span class="fire-inline">{{ cm.fire_icon }}</span></td>
        <td class="trend-cell">{{ cm.spotify_trend_icon }}</td>
        <td class="streams-cell">{{ cm.spotify_streams_txt }}</td>
        {% if show_chart_pos %}<td class="pos-cell">{{ cm.chart_position_txt }}</td>{% endif %}
        {% if show_distance %}<td class="dist-cell">{{ cm.distance_txt }}</td>{% endif %}
        <td class="social-cell">{{ cm.tiktok_txt }}</td>
        <td class="social-cell">{{ cm.meta_txt }}</td>
        <td class="social-cell">{{ cm.shazam_txt }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
</div>
</div>
</body>
</html>
