{% extends "layout.html" %}

{% block content %}

<b>
  <h2 style="font-family: sans-serif; font-weight: normal; margin: 0; Margin-bottom: 15px; color: #F6F5F5">{{ alert_name
    }}</h2>
</b>
<hr style="width:100%" , size="2" , color=#F6F5F5>

<h3 style="font-family: sans-serif; font-weight: normal; margin: 0; Margin-bottom: 15px; color: #F6F5F5">KPI Name: {{
  kpi_name }} </h3>
<h3 style="font-family: sans-serif; font-weight: normal; margin: 0; Margin-bottom: 15px; color: #F6F5F5">Alert
  Frequency: {{ alert_frequency }}</h3>
<br>
<h2 style="font-family: sans-serif; font-weight: normal; margin: 0; Margin-bottom: 15px; color: #F6F5F5">Alert Message
</h2>
<h3 style="font-family: sans-serif; font-weight: normal; margin: 0; Margin-bottom: 15px; color: #F6F5F5">{{
  alert_message }}</h3>
<br>

<h2 style="font-family: sans-serif; font-weight: normal; margin: 0; Margin-bottom: 15px; color: #F6F5F5">Anomaly Details
</h2>
{% if data|length > 0 %}
    <table style="border-collapse: collapse;border-spacing: 15px; color: #F6F5F5;text-align: left; padding: 10px;">
      <tr style="border:1px solid #8A8A8A ; border-color: #8A8A8A;">
          {% for column in column_names %}
          <th style="border: 1px solid #8A8A8A ; padding: 10px;">{{column}}</th>
          {% endfor %}
      </tr>
      {% for item in data %}
          <tr style="border:1px solid #8A8A8A">
              {% for column in column_names %}
              <td style="color: #F6F5F5;border: 1px solid #8A8A8A ; padding: 10px;">{{item[column]}}</td>
              {% endfor %}
          </tr>
      {% endfor %}
    </table>
{% endif %}
{% endblock %}