{% extends 'email_layout.html' %}
{% from 'include/email_repo_card.html' import repo_card with context %}
{% from 'include/email_storage_usage_card.html' import storage_usage with context %}
{% from 'include/email_kpi_cards.html' import kpi_cards with context %}
{% set mdash = '—' | safe %}
{% block title %}
  {% if time_range == 30 %}
    {% trans %}Monthly Backup Report{% endtrans %}
  {% elif time_range == 7 %}
    {% trans %}Weekly Backup Report{% endtrans %}
  {% elif time_range == 1 %}
    {% trans %}Daily Backup Report{% endtrans %}
  {% else %}
    {% trans %}Backup Report{% endtrans %}
  {% endif %}
{% endblock title %}
{% block content %}
  <h1>
    <a>{% trans username=(user.fullname or user.username) %}Hey {{ username }},{% endtrans %}</a>
  </h1>
  <p>
    {% set start = start_time.epoch|format_date %}
    {% set end = end_time.epoch|format_date %}
    {% if time_range == 30 %}
      {% trans %}Here is your monthly backup report for last month presenting an overview of the activities within your backup from {{ start }} to {{ end }}.{% endtrans %}
    {% elif time_range == 7 %}
      {% trans %}Here is your weekly backup report for previous week presenting an overview of the activities within your backup from {{ start }} to {{ end }}.{% endtrans %}
    {% elif time_range == 1 %}
      {% trans %}Here is your daily backup report for yesterday presenting an overview of the activities within your backup for {{ start }}.{% endtrans %}
    {% else %}
      {% trans %}Here is your backup report presenting an overview of the activities within your backup from {{ start }} to {{ end }}.{% endtrans %}
    {% endif %}
  </p>
  {# KPI Card #}
  {{ kpi_cards() }}
  {# Storage #}
  {{ storage_usage(disk_usage, disk_quota) }}
  {# Heatmap - Header #}
  <table width="100%"
         cellpadding="0"
         cellspacing="0"
         style="margin-bottom:12px">
    <tbody>
      <tr>
        <td>
          <div style="font-size:15px;font-weight:700;">{% trans %}Backup Activity{% endtrans %}</div>
          <div style="font-size:12px;color:#6c757d;margin-top:2px;">
            {{ _('Last %(days)s days — all repositories combined', days=(activity_end - activity_start).days) }}
          </div>
        </td>
        <td align="right"
            valign="top"
            style="font-size:12px;
                   color:#6c757d;
                   white-space:nowrap">{{- _('%(count)s backups', count=activity_dates | length) }}</td>
      </tr>
    </tbody>
  </table>
  {# Heatmap - bar #}
  {% set palette = ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"] %}
  <style>
    .hm-table  {
        border-collapse:collapse;
        width:100%;
        table-layout:fixed;
        font-family:Arial,sans-serif; 
    }
    .hm-label  {
        font-size:.875em; 
        color:#6c757d; 
        white-space:nowrap;
    }
    .hm-dow {
        text-align: center;
        padding-right: 3px;
        vertical-align: middle; 
    }
    .hm-month {
        vertical-align:bottom;
        padding:0 1px 2px;
        height:14px; overflow:visible;
    }
    .hm-cell {
        padding:1px;
    }
    .hm-square {
        border-radius:2px;
        aspect-ratio:1/1;
        width:100%;
        display:block;
    }
  </style>
  <Heatmap :start="activity_start" :end="activity_end" :events="activity_dates" :palette="palette" style="margin-bottom:24px" />
  {# Repositories - Header #}
  <table width="100%"
         cellpadding="0"
         cellspacing="0"
         style="margin-bottom:12px">
    <tbody>
      <tr>
        <td>
          <div style="font-size:15px;font-weight:700;">{% trans %}Repositories{% endtrans %}</div>
          <div style="font-size:12px;color:#6c757d;margin-top:2px;">
            {% trans %}Status of each backup repository{% endtrans %}
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  {# Repositories — Cards #}
  {% for repo in repo_objs %}{{ repo_card(repo) }}{% endfor %}
{% endblock content %}