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

{% load timezone from tz %}
{% load sentry_avatars %}
{% load sentry_helpers %}
{% load sentry_features %}
{% load sentry_assets %}
{% load i18n static %}

{% block head %}
  {{ block.super }}
  <style type="text/css" inline="false">
    @media only screen and (max-device-width: 480px) {
      /* Hide CTA in header on mobile */
      .header-buttons .integration-link {
        display: none !important;
      }
      .banner {
        display: none !important;
      }
    }
    @media only screen and (max-device-width: 768px) {
      .text-desktop-only {
        display: none !important;
      }
    }
  </style>
{% endblock %}

{% block preheader %}
  {{ group_header }} from {{ project_label }}.
{% endblock %}

{% block header %}
  <div class="header-with-buttons">
    {{ block.super }}
    <div class="header-buttons">
      {% if not has_alert_integration %}
        <a href="{{ slack_link }}" class="btn btn-default integration-link">
          <img src="{% absolute_asset_url 'sentry' 'images/email/slack-logo.png' %}" class="logo-small" />
          Set up in Slack
        </a>
      {% endif %}
      <a href="{{ link }}" class="btn view-on-sentry">View on Sentry</a>
    </div>
  </div>
{% endblock %}

{% block content %}
{% if not group.project.flags.has_transactions %}
<div class="banner">
  <div class="container banner-content">
    <img src="{% absolute_asset_url 'sentry' 'images/email/icon-lightning.png' %}" class="banner-icon"/>
    <span>
      <span class="text-desktop-only">Errors are half the story.</span> Start tracking latency across your application.
    </span>
    <a href="{% absolute_uri '/organizations/{}/explore/traces/' group.project.organization.slug %}?project={{ group.project.id }}&referrer=alert_email" class="banner-action">
      <b style="font-weight: bold;">Set up Performance</b>
    </a>
  </div>
</div>
{% endif %}

<div class="container">
  <div class="inner">
    <h2 {% if notification_reason %}style="margin-bottom: 4px"{% else %}style="margin-bottom: 15px"{% endif %}>
        {% if group_header %}
        {{ group_header }}
        {% else %}
        New alert from <a href="{{group.project.get_absolute_url}}">{{ project_label }}</a>
        {% if environment %} in {{ environment }}{% endif %}
        {% endif %}
    </h2>
    {% if notification_reason %}
      <div class="event-notification-reason">
        {{ notification_reason }}
      </div>
    {% endif %}

    {% if enhanced_privacy %}
      <div class="event">
        <div class="event-id">ID: {{ event.event_id }}</div>
          <div class="event-date">
            {% if clock_24_hours %}
              {% if timezone %}{{ event.datetime|timezone:timezone|date:"N j, Y, H:i:s e"}}{% else %}{{ event.datetime|date:"N j, Y, H:i:s e"}}{% endif %}
            {% else %}
              {% if timezone %}{{ event.datetime|timezone:timezone|date:"N j, Y, g:i:s a e"}}{% else %}{{ event.datetime|date:"N j, Y, g:i:s a e"}}{% endif %}
            {% endif %}
          </div>
      </div>

      <div class="notice">Details about this issue are not shown in this notification since enhanced privacy
        controls are enabled. For more details about this issue, <a href="{{ link }}">view this issue on Sentry</a>.</div>
    {% else %}
      <table class="event-list">
        <tr>
            <th colspan="2">Issue</th>
        </tr>
        <tr>
          <td class="event-detail">
            <div class="issue">
              {% with type=event.get_event_type metadata=event.get_event_metadata transaction=event.transaction %}
                {% if type == "error" %}
                  <div class="event-type error">
                    <h3>
                      {% if metadata.type %}
                        <a href="{% absolute_uri link %}">{{ metadata.type|truncatechars:40 }}</a>
                        {% if transaction %}
                          <span class="event-subtitle">{{ transaction }}</span>
                        {% endif %}
                        <br />
                        {% if metadata.value %}
                          <small>{{ metadata.value|truncatechars:100|soft_break:40 }}</small>
                        {% endif %}
                      {% else %}
                        <a href="{% absolute_uri link %}">{{ metadata.value|truncatechars:40 }}</a><br />
                        {% if transaction %}
                          <span class="event-subtitle">{{ transaction }}</span>
                        {% endif %}
                      {% endif %}
                    </h3>
                  </div>
                {% elif type == "csp" %}
                  <div class="event-type csp">
                    <h3>
                      <a href="{% absolute_uri link %}">{{ metadata.directive|truncatechars:40 }}</a><br />
                      {% if metadata.uri %}
                        <span class="event-subtitle">{{ metadata.uri }}</span>
                      {% endif %}
                    </h3>
                  </div>
                {% elif type == "transaction" %}
                  <div class="event-type transaction">
                    <h3>
                      <a href="{% absolute_uri link %}">{{ issue_type|truncatechars:40 }}</a><br />
                        <span class="event-subtitle">{{ subtitle|truncatechars:40 }}</span>
                    </h3>
                  </div>
                {% else %}
                  <div class="event-type default">
                    <h3>
                      {% if issue_title %}
                      <a href="{% absolute_uri link %}">{{ issue_title|truncatechars:40 }}</a>
                      {% else %}
                      <a href="{% absolute_uri link %}">{{ event.title|truncatechars:40 }}</a>
                      {% endif %}
                      {% if culprit %}
                        <span class="event-subtitle">{{ culprit }}</span>
                      {% elif transaction %}
                        <span class="event-subtitle">{{ transaction }}</span>
                      {% endif %}
                      <br />
                      {% if subtitle and not is_new_design %}
                        <small>{{ subtitle|truncatechars:40|soft_break:40 }}</small>
                      {% endif %}
                    </h3>
                  </div>
                {% endif %}
              {% endwith %}
            </div>
          </td>
        </tr>
      </table>

      {% if not is_new_design %}
        <div class="event">
          <div class="event-id">ID: {{ event.event_id }}</div>
            <div class="event-date">
              {% if clock_24_hours %}
                {% if timezone %}{{ event.datetime|timezone:timezone|date:"N j, Y, H:i:s e"}}{% else %}{{ event.datetime|date:"N j, Y, H:i:s e"}}{% endif %}
              {% else %}
                {% if timezone %}{{ event.datetime|timezone:timezone|date:"N j, Y, g:i:s a e"}}{% else %}{{ event.datetime|date:"N j, Y, g:i:s a e"}}{% endif %}
              {% endif %}
            </div>
        </div>
      {% endif %}

      {% if chart_image %}
        <img src="{{chart_image}}" alt="{{issue_title}} Chart" />
      {% endif %}
      <div class="interface">
        <table>
          <colgroup>
            <col style="width:130px;">
          </colgroup>
          <tbody>
            <tr>
              <th>Project</th>
              <td><a href="{{group.project.get_absolute_url}}">{{ project_label }}</a></td>
            </tr>
            {% if environment %}
              <tr>
                <th>environment</th>
                <td>{{ environment }}</td>
              </tr>
            {% endif %}
            {% if is_new_design %}
              <tr>
                {% if issue_type == "Endpoint Regression" %}
                  <th>Endpoint</th>
                {% elif issue_type == "Function Regression" %}
                  <th>Function</th>
                {% endif %}
                <td>{{ event.transaction }}</td>
              </tr>
              <tr>
                <th>Change</th>
                <td>{{ subtitle }}</td>
              </tr>
              <tr>
                <th>Start Time</th>
                <td>
                  {% if clock_24_hours %}
                    {% if timezone %}{{ event.datetime|timezone:timezone|date:"N j, Y, H:i:s e"}}{% else %}{{ event.datetime|date:"N j, Y, H:i:s e"}}{% endif %}
                  {% else %}
                    {% if timezone %}{{ event.datetime|timezone:timezone|date:"N j, Y, g:i:s a e"}}{% else %}{{ event.datetime|date:"N j, Y, g:i:s a e"}}{% endif %}
                  {% endif %}
                </td>
              </tr>
            {% else %}
              <tr>
                <th>Level</th>
                <td>{{ group.get_level_display }}</td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>


      {% include "sentry/emails/_suspect_commits.html" %}

      {% block table %}{% endblock %}

      {% if issue_replays_url %}
      <div class="interface">
        <h3 class="title">Session Replay</h3>
        <table>
          <colgroup>
            <col style="width:130px;">
          </colgroup>
          <tbody>
            <tr>
              <th>Session Replay:</th>
              <td>
                <a href="{{ issue_replays_url }}">
                  <img src="{% absolute_asset_url 'sentry' 'images/email/icon-play.png' %}" width="12px" height="12px"
                    alt="Session Replay">
                  See a replay of this issue
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      {% endif %}


      {% block stacktrace %}{% endblock %}

      {% if tags %}
        <h3>Tags</h3>

        <ul class="tag-list">
        {% for tag_key, tag_value in tags %}
          <li>
              <strong>{{ tag_key|as_tag_alias }}</strong>
              <em>=</em>
              <span>
              {% with query=tag_key|as_tag_alias|add:":\""|add:tag_value|add:"\""|urlencode %}
                <a href="{% absolute_uri '/organizations/{}/issues/' group.project.organization.slug %}?project={{ group.project.id }}&query={{ query }}">{{ tag_value|truncatechars:50 }}</a> {% if tag_value|is_url %}<a href="{{ tag_value }}" class="icon-share"></a>{% endif %}
              {% endwith %}
              </span>
          </li>
        {% endfor %}
        </ul>
      {% endif %}
    {% endif %}

    <p class="info-box">
      {% if snooze_alert %}
         <a class='mute' href="{% absolute_uri snooze_alert_url %}">Mute this alert</a>
      {% endif %}
      This email was triggered by
      {% for rule in rules %}
          <a href="{% absolute_uri rule.status_url %}">{{ rule.label }}</a>{% if not forloop.last %}, {% endif %}
      {% endfor %}
  </p>

    {% if not has_integrations %}
        <div class="logo-container">
            <img src="{% static 'sentry/images/logos/logo-slack.svg' %}" class="logo" alt="Slack"/>
            <img src="{% static 'sentry/images/logos/logo-pagerduty.svg' %}" class="logo" alt="PagerDuty"/>
            <img src="{% static 'sentry/images/logos/logo-msteams.svg' %}" class="logo" alt="MS Teams"/>
            <img src="{% static 'sentry/images/logos/logo-opsgenie.svg' %}" class="logo" alt="OpsGenie"/>
            <img src="{% static 'sentry/images/logos/logo-twilio.svg' %}" class="logo" alt="Twilio"/>
            <img src="{% static 'sentry/images/logos/logo-victorops.svg' %}" class="logo" alt="VictorOps"/>
        </div>
        <p class="align-center">
            <a href="{% absolute_uri 'settings/{}/integrations/?referrer=alert_email' group.project.organization.slug %}">{{ "Get this alert wherever you work" }}</a>
        </p>
    {% endif %}

    {# support for gmail actions #}
    <div itemscope itemtype="http://schema.org/EmailMessage">
      <meta itemprop="description" content="View Issue Details in Sentry"/>
      <div itemprop="action" itemscope itemtype="http://schema.org/ViewAction">
        <link itemprop="url" href="{{ link }}"/>
        <meta itemprop="name" content="View in Sentry"/>
      </div>
      <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
        <meta itemprop="name" content="Sentry.io"/>
        <link itemprop="url" href="https://sentry.io/"/>
      </div>
    </div>
  </div>
</div>
{% endblock %}