{% extends "sentry/emails/base.html" %}

{% load sentry_helpers %}
{% load sentry_assets %}

{% block head %}

  {{ block.super }}

  <style type="text/css">

    .container {
      padding-top: 18px;
      padding-bottom: 10px;
      min-width: 360px;
    }

    .header td {
      text-align: right;
      font-size: 14px;
    }

    td, th {
      text-align: left;
    }

    .legend {
      font-size: 14px;
      text-align: right;
    }

    .legend span.swatch {
      width: 16px;
      height: 16px;
      vertical-align: bottom;
      display: inline-block;
      margin: 0 15px 0 15px;
      border-radius: 3px;
      color: #fff;
    }

    .legend-inbox {
      font-size: 12px;
      text-align: right;
      padding-bottom: 8px;
    }
    .legend-inbox span.swatch {
      width: 14px;
      height: 14px;
      vertical-align: bottom;
      display: inline-block;
      margin: 0 6px 0 6px;
      border-radius: 3px;
      color: #fff;
    }
    .legend-inbox span.quantity {
      color: #80708F
    }

    .graph .bar {
      margin-bottom: 0;
    }

    .graph .bar td,
    .graph .bar th {
      line-height: 0;
    }

    .project-breakdown {
      margin-bottom: 20px;
    }
    .project-breakdown table.project-breakdown-graph-deck {
      table-layout: fixed;
      border-collapse: collapse;
      border-spacing: 3px;
      border-style: hidden;
      width: 100%;
    }
    .project-breakdown table.project-breakdown-graph-deck td.project-breakdown-graph-cell.issues {
      padding-right: 10px;
      border: 1px solid #C4C4C4;
    }
    .project-breakdown table.project-breakdown-graph-deck td.project-breakdown-graph-cell.errors {
      padding-left: 10px;
      border: 1px solid #C4C4C4;
    }
    .project-breakdown .total-count-title {
      margin-top: 0;
      margin-bottom: 0;
    }
    .project-breakdown .total-count {
      margin-top: 5px;
      margin-bottom: 18px;
    }

    .project-breakdown .graph {
      table-layout: fixed;
      margin: 0;
    }

    .project-breakdown .graph td {
        font-size: 0;
        border-right: 10px solid #fff;
    }

    .project-breakdown .graph td:last-child {
        border-right: none;
    }

    .project-breakdown .graph td.axis {
      height: 1px;
      font-size: 0;
      line-height: 0;
      background-color: #DEE7EB;
      border-right: none;
    }

    .project-breakdown .graph .label {
      font-size: 10px;
      color: #000;
      text-align: center;
      padding-top: 10px;
    }

    .project-breakdown .summary thead th {
      font-size: 12px;
      text-transform: uppercase;
      color: #80708F;
      font-weight: 700;
    }

    .project-breakdown .summary tr {
      border-bottom: 1px solid #DEE7EB;
    }

    .project-breakdown .summary th,
    .project-breakdown .summary td {
      font-size: 14px;
      padding-top: 8px;
      padding-bottom: 8px;
    }

    .project-breakdown .summary .numeric {
      text-align: center;
    }

    .issue-title {
      display: block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 2px;
    }

    .issue-message {
      display: block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      max-height: 1.2em;
      font-size: 14px;
      color: #80708F;
      line-height: 1.2;
      margin-bottom: 2px;
    }

    .issue-count {
      font-size: 16px;
    }

  </style>

  <style type="text/css" inline="false">
    @media only screen and (max-device-width: 480px) {

      .mobile-full-width > th,
      .mobile-full-width > td {
          display: block;
          width: 100%;
      }

      h4 {
        text-align: center !important;
      }

      .header td {
        text-align: center !important;
      }

      #events-by-issue-type .legend {
        margin-bottom: 20px !important;
        text-align: center !important;
      }

      .legend-inbox {
        text-align: center !important;
      }

      #events-by-issue-type .quantity {
        display: none;
      }
    }

  </style>

{% endblock %}

{% block header %}
  <table>
    <tr class="mobile-full-width">
      <td width="117px">
        <h1>
          <a href="{% absolute_uri %}"><img src="{% absolute_asset_url 'sentry' 'images/email/sentry_logo_full.png' %}" width="117px" height="32px" alt="Sentry"></a>
        </h1>
      </td>
      <td class="align-right">
        <strong>Weekly Report for {{ organization.name|sanitize_periods }}</strong><br />
        {{ start }} &ndash; {{ end }}
      </td>
    </tr>
  </table>
{% endblock %}

{% block content %}

<div class="container">

  <div class="project-breakdown">
    {% with height=110 %}
    <table class="project-breakdown-graph-deck"><tbody><tr>

    <td class="project-breakdown-graph-cell issues">
    <h4 class="total-count-title" style="font-weight: bold;">Total Issues</h4>
    <h1 style="margin: 0; font-weight: bold;" class="total-count">
      {{ trends.total_issue_count|small_count:1 }}
      {% if trends.issue_pct_change %}
      <span style="font-size: 14px; font-weight: 500; margin-left: 8px; padding: 2px 8px; border-radius: 6px; vertical-align: middle; background-color: {{ trends.issue_pct_change.bg_color }}; color: {{ trends.issue_pct_change.text_color }};">{{ trends.issue_pct_change.arrow }}&nbsp;{{ trends.issue_pct_change.pct }}</span>
      {% endif %}
    </h1>
    <a href="{{ view_all_issues_url }}"
       style="font-size: 12px; margin-bottom: 16px; display: block; font-weight: bold;">View All Issues</a>

    <table class="graph">
      <tr>
        {% for timestamp, project_values in trends.series %}
        <td valign="bottom" class="bar" style="height: {{ height }}px; width: {% widthratio 1 trends.series|length 100 %}%">
            <table class="bar">
              {% for project_value in project_values %}
                <tr>
                  <td height="{% widthratio project_value.issue_count trends.issue_maximum height %}" style="background-color: {{ project_value.color }};">&nbsp;</td>
                </tr>
              {% empty %}
                <tr>
                  <td height="1" style="background-color: #DAD9DE;"></td>
                </tr>
              {% endfor %}
            </table>
          </td>
        {% endfor %}
      </tr>
      <tr>
        <td class="axis" colspan="{{ trends.series|length }}" height="1" style="height: 1px; font-size: 0; line-height: 0; background-color: #C0BEC6; border-right: none;">&nbsp;</td>
      </tr>
      <tr>
        {% for timestamp, project_values in trends.series %}
          <td class="label" style="width: {% widthratio 1 trends.series|length 100 %}%">
            {{ timestamp|day_initial }}
          </td>
        {% endfor %}
      </tr>
    </table>
    </td>

    <td class="project-breakdown-graph-cell errors">
    <h4 class="total-count-title" style="font-weight: bold;">Total Errors</h4>
    <h1 style="margin: 0; font-weight: bold;" class="total-count">
      {{ trends.total_error_count|small_count:1 }}
      {% if trends.error_pct_change %}
      <span style="font-size: 14px; font-weight: 500; margin-left: 8px; padding: 2px 8px; border-radius: 6px; vertical-align: middle; background-color: {{ trends.error_pct_change.bg_color }}; color: {{ trends.error_pct_change.text_color }};">{{ trends.error_pct_change.arrow }}&nbsp;{{ trends.error_pct_change.pct }}</span>
      {% endif %}
    </h1>
    <a href="{% org_url organization '/explore/discover/homepage/' query=errors_discover_query %}"
       style="font-size: 12px; margin-bottom: 16px; display: block; font-weight: bold;">View All Errors</a>

    <table class="graph">
      <tr>
        {% for timestamp, project_values in trends.series %}
        <td valign="bottom" class="bar" style="height: {{ height }}px; width: {% widthratio 1 trends.series|length 100 %}%">
            <table class="bar">
              {% for project_value in project_values %}
                <tr>
                  <td height="{% widthratio project_value.error_count trends.error_maximum height %}" style="background-color: {{ project_value.color }};">&nbsp;</td>
                </tr>
              {% empty %}
                <tr>
                  <td height="1" style="background-color: #DAD9DE;"></td>
                </tr>
              {% endfor %}
            </table>
          </td>
        {% endfor %}
      </tr>
      <tr>
        <td class="axis" colspan="{{ trends.series|length }}" height="1" style="height: 1px; font-size: 0; line-height: 0; background-color: #C0BEC6; border-right: none;">&nbsp;</td>
      </tr>
      <tr>
        {% for timestamp, project_values in trends.series %}
          <td class="label" style="width: {% widthratio 1 trends.series|length 100 %}%">
            {{ timestamp|day_initial }}
          </td>
        {% endfor %}
      </tr>
    </table>
    </td>

    </tr></tbody></table>

    <table class="summary">
      <thead>
        <tr>
          <th style="width: 2em; padding-right: 0.5em"></th>
          <th style="font-size: 12px; text-align: left;">Project name</th>
          <th style="width: 7em; font-size: 12px; text-align: right;" class="numeric">Errors</th>
          <th style="width: 7em; font-size: 12px; text-align: right;" class="numeric">New<br>Issues</th>
          <th style="width: 8em; font-size: 12px; text-align: right;" class="numeric">Escalating<br>Issues</th>
          <th style="width: 7em; font-size: 12px; text-align: right;" class="numeric">Regressed<br>Issues</th>
        </tr>
      </thead>
      <tbody>
      {% for project in trends.legend %}
        <tr>
          <td style="vertical-align: middle;">
              {% if project.color %}<span style="background: {{ project.color }}; display: inline-block; height: 1em; width: 1em;">&nbsp;</span>{% endif %}
          </td>
          <td style="font-weight: 700; vertical-align: middle;">
              {% if project.url %}<a href="{{ project.url }}" style="font-weight: 700;">{% endif %}{{ project.slug }}{% if project.url %}</a>{% endif %}
          </td>
          <td class="numeric" style="text-align: right;">{{ project.accepted_error_count|small_count:1 }}</td>
          <td class="numeric" style="text-align: right;">{% if project.new_substatus_url %}<a href="{{ project.new_substatus_url }}" style="color: #4674ca;">{% endif %}{{ project.new_substatus_count|small_count:1 }}{% if project.new_substatus_url %}</a>{% endif %}</td>
          <td class="numeric" style="text-align: right;">{% if project.escalating_substatus_url %}<a href="{{ project.escalating_substatus_url }}" style="color: #4674ca;">{% endif %}{{ project.escalating_substatus_count|small_count:1 }}{% if project.escalating_substatus_url %}</a>{% endif %}</td>
          <td class="numeric" style="text-align: right;">{% if project.regression_substatus_url %}<a href="{{ project.regression_substatus_url }}" style="color: #4674ca;">{% endif %}{{ project.regression_substatus_count|small_count:1 }}{% if project.regression_substatus_url %}</a>{% endif %}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    {% endwith %}
  </div>

  <div id="events-by-issue-type">

    {% if issue_summary.all_issue_count > 0 %}
    <table class="issue-breakdown">
      <tr class="mobile-full-width">
        <td>
          <h4>Errors by Issue Type</h4>
        </td>
        <td class="legend">
          <span class="swatch" style="background-color: #FF002B;"></span>New<span class="quantity">: {% percent issue_summary.new_issue_count issue_summary.all_issue_count "0.1f" %}%</span>
          <span class="swatch" style="background-color: #FFCE00;"></span>Reopened<span class="quantity">: {% percent issue_summary.reopened_issue_count issue_summary.all_issue_count "0.1f" %}%</span>
          <span class="swatch" style="background-color: #DAD9DE;"></span>Existing<span class="quantity">: {% percent issue_summary.existing_issue_count issue_summary.all_issue_count "0.1f" %}%</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <table>
            <tr>
              <td width="{% widthratio issue_summary.new_issue_count issue_summary.all_issue_count 100 %}%" title="New: {{ issue_summary.new_issue_count }} events" style="background-color: #FF002B">
                &nbsp;
              </td>
              <td width="{% widthratio issue_summary.reopened_issue_count issue_summary.all_issue_count 100 %}%" title="Reopened: {{ issue_summary.reopened_issue_count }} events" style="background-color: #FFCE00">
                &nbsp;
              </td>
              <td width="{% widthratio issue_summary.existing_issue_count issue_summary.all_issue_count 100 %}%" title="Existing: {{ issue_summary.existing_issue_count }} events" style="background-color: #DAD9DE">
                &nbsp;
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    {% endif %}


    {% if issue_summary.total_substatus_count > 0 %}
    <table class="issue-breakdown">
      <tr class="mobile-full-width">
        <td>
          <h4>Issues Breakdown</h4>
        </td>
        <td class="legend-inbox">
          <span class="swatch" style="background-color: #EDCA60;"></span>New<span class="quantity"> ({{ issue_summary.new_substatus_count }})</span>
          <span class="swatch" style="background-color: #FF978F;"></span>Escalating<span class="quantity"> ({{ issue_summary.escalating_substatus_count }})</span>
          <span class="swatch" style="background-color: #B7B2FF;"></span>Regressed<span class="quantity"> ({{ issue_summary.regression_substatus_count }})</span>
          <span class="swatch" style="background-color: #DAD9DE;"></span>Ongoing<span class="quantity"> ({{ issue_summary.ongoing_substatus_count }})</span>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <table>
            <tr>
              <td width="{% widthratio issue_summary.new_substatus_count issue_summary.total_substatus_count 100 %}%" title="New: {{ issue_summary.new_substatus_count }} events" style="background-color: #EDCA60">
                &nbsp;
              </td>
              <td width="{% widthratio issue_summary.escalating_substatus_count issue_summary.total_substatus_count 100 %}%" title="Escalating: {{ issue_summary.escalating_substatus_count }} events" style="background-color: #FF978F">
                &nbsp;
              </td>
              <td width="{% widthratio issue_summary.regression_substatus_count issue_summary.total_substatus_count 100 %}%" title="Regressed: {{ issue_summary.regression_substatus_count }} events" style="background-color: #B7B2FF">
                &nbsp;
              </td>
              <td width="{% widthratio issue_summary.ongoing_substatus_count issue_summary.total_substatus_count 100 %}%" title="Ongoing: {{ issue_summary.ongoing_substatus_count }} events" style="background-color: #DAD9DE">
                &nbsp;
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    {% endif %}

  </div>

  {% if enhanced_privacy %}
  <div style="padding: 16px; margin: 16px 0; background-color: #f8f8f9; border-radius: 4px; font-size: 14px;">
    Details about specific issues and transactions are not shown in this report since enhanced privacy
    controls are enabled. For more details,
    {% url 'sentry-organization-issue-list' organization.slug as issue_list %}
    {% querystring referrer="weekly_report" notification_uuid=notification_uuid as query %}
    <a href="{% org_url organization issue_list query=query %}">view your issues on Sentry</a>.
  </div>
  {% endif %}

  {% if top_issues|length > 0 and not enhanced_privacy %}
  <div id="top-issues">
    <h4>Top Issues</h4>
    {% for a in top_issues %}
    <div style="display: flex; flex-direction: row; margin-bottom: 8px; align-items: flex-start;">
      <div style="width: 10%;" class="issue-count">{{a.count|small_count:1}}</div>
      <div style="width: 65%; min-width: 0; overflow: hidden;">
        {% url 'sentry-organization-issue-detail' issue_id=a.group.id organization_slug=organization.slug as issue_detail %}
        {% querystring referrer="weekly_report" notification_uuid=notification_uuid as query %}
        <a title="{{a.title}}" class="issue-title"
           href="{% org_url organization issue_detail query=query %}">{{a.title}}</a>
        <div title="{{a.message}}" class="issue-message">{{a.message}}</div>
        <div style="font-size: 12px; color: #80708F;">{{a.group.project.name}}</div>
      </div>
      {% if a.group_substatus and a.group_substatus_color %}
      <span style="background-color: {{a.group_substatus_color}}; color: {{a.group_substatus_text_color}}; border-radius: 8px; font-size: 12px; align-self: center; padding: 0 10px; margin-left: auto; text-align: center; line-height: 22px; white-space: nowrap; height: 22px;">{{a.group_substatus}}</span>
      {% else %}
      <span style="background-color: {{a.status_color}}; border-radius: 8px; font-size: 12px; align-self: center; padding: 0 10px; margin-left: auto; text-align: center; line-height: 22px; white-space: nowrap; height: 22px;">{{a.status}}</span>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% endif %}
  {% if past_issues|length > 0 and not enhanced_privacy %}
  <div id="past-resolved-issues">
    <h4>Resolved last week</h4>
    {% for a in past_issues %}
    <div style="display: flex; flex-direction: row; margin-bottom: 8px; align-items: flex-start;">
      <div style="width: 10%;" class="issue-count">{{a.count|small_count:1}}</div>
      <div style="width: 65%; min-width: 0;">
        {% url 'sentry-organization-issue-detail' issue_id=a.group.id organization_slug=organization.slug as issue_detail %}
        {% querystring referrer="weekly_report" notification_uuid=notification_uuid as query %}
        <a title="{{a.title}}" class="issue-title"
           href="{% org_url organization issue_detail query=query %}">{{a.title}}</a>
        <div title="{{a.message}}" class="issue-message">{{a.message}}</div>
        <div style="font-size: 12px; color: #80708F;">{{a.group.project.name}}</div>
      </div>
      {% if a.resolution_url %}
      <a href="{{ a.resolution_url }}" style="background-color: #E3F7E3; color: #008900; border-radius: 8px; font-size: 12px; align-self: center; padding: 0 10px; margin-left: auto; text-align: center; line-height: 22px; white-space: nowrap; height: 22px; text-decoration: none; display: inline-block;">{{ a.resolution_label }}</a>
      {% else %}
      <span style="background-color: #E3F7E3; color: #008900; border-radius: 8px; font-size: 12px; align-self: center; padding: 0 10px; margin-left: auto; text-align: center; line-height: 22px; white-space: nowrap; height: 22px;">{{ a.resolution_label }}</span>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% endif %}

  {% if total_spans_count and not enhanced_privacy %}
  <div id="total-spans" style="margin-top: 36px; margin-bottom: 20px;">
    <h4 class="total-count-title" style="font-weight: bold; margin-top: 0; margin-bottom: 0;">Total Spans</h4>
    <h1 style="margin: 0; font-weight: bold;">
      {{ total_spans_count|small_count:1 }}
      {% if spans_pct_change %}
      <span style="font-size: 14px; font-weight: 500; margin-left: 8px; padding: 2px 8px; border-radius: 6px; vertical-align: middle; background-color: {{ spans_pct_change.bg_color }}; color: {{ spans_pct_change.text_color }};">{{ spans_pct_change.arrow }}&nbsp;{{ spans_pct_change.pct }}</span>
      {% endif %}
    </h1>
    <a href="{% org_url organization '/explore/traces/' %}"
       style="font-size: 12px; margin-bottom: 16px; display: block; font-weight: bold;">View All Spans</a>

    {% if spans_chart_url %}
    <h4 style="margin-bottom: 0;">p95 for Top Spans (ms)</h4>

    <div style="margin-bottom: 16px;">
      <img src="{{ spans_chart_url }}" width="600" height="200" alt="Top spans p95 chart" style="max-width: 100%;" />
    </div>
    {% endif %}

    {% if top_spans_table %}
    <table style="width: 100%; border-collapse: collapse;">
      <thead>
        <tr style="border-bottom: 1px solid #DEE7EB;">
          <th style="width: 2em; padding-right: 0.5em"></th>
          <th style="font-size: 12px; text-transform: uppercase; color: #80708F; font-weight: 700; text-align: left; padding-top: 8px; padding-bottom: 8px;">Span Name</th>
          <th style="font-size: 12px; text-transform: uppercase; color: #80708F; font-weight: 700; text-align: left; padding-top: 8px; padding-bottom: 8px;">Project</th>
          <th style="font-size: 12px; text-transform: uppercase; color: #80708F; font-weight: 700; text-align: center; padding-top: 8px; padding-bottom: 8px;">P95 (ms)</th>
          <th style="font-size: 12px; text-transform: uppercase; color: #80708F; font-weight: 700; text-align: right; padding-top: 8px; padding-bottom: 8px;">Total<br>Duration</th>
        </tr>
      </thead>
      <tbody>
      {% for span in top_spans_table %}
        <tr style="border-bottom: 1px solid #DEE7EB;">
          <td style="vertical-align: middle;">
            {% if span.color %}<span style="background: {{ span.color }}; display: inline-block; height: 1em; width: 1em;">&nbsp;</span>{% endif %}
          </td>
          <td style="font-size: 14px; font-weight: 700; vertical-align: middle; padding-top: 8px; padding-bottom: 8px; padding-right: 16px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ span.name }}"><a href="{{ span.url }}" style="font-weight: 700;">{{ span.name }}</a></td>
          <td style="font-size: 14px; vertical-align: middle; padding-top: 8px; padding-bottom: 8px; padding-right: 16px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ span.project_slugs }}">{{ span.project_slugs }}</td>
          <td style="font-size: 14px; text-align: center; padding-top: 8px; padding-bottom: 8px;">{{ span.p95|floatformat:0 }}</td>
          <td style="font-size: 14px; text-align: right; padding-top: 8px; padding-bottom: 8px;">{{ span.sum|format_duration_ms }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </div>
  {% endif %}

</div>
{% endblock %}

{% block footer %}
  <a href="{% absolute_uri %}" style="float:right">Home</a>

  <a href="{% absolute_uri notification_settings_link %}">Notification Settings</a>
{% endblock %}