{% extends '../layouts/index.html' %}

{% block content %}

  <div class="mx-auto shadow-md border-b border-neutral-300 dark:border-neutral-700 flex px-4">
    <div class="py-4 flex justify-start items-center">
      <h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-100 ">
        {% block page_title %}
          Metrics and Key Events
        {% endblock page_title %}
      </h1>
    </div>
  </div>

  <div class="py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 gap-4 grid">
      {% component "card" id="metrics-sequence-graph" card_title="TLDR: Metrics Timeline" %}
        {% fill "card_content" %}
          {% autoescape off %}
            <pre class="mermaid w-full">
            {{ metric_graph|join:"&#10;" }}
          </pre>
          {% endautoescape %}
        {% endfill %}
      {% endcomponent %}
      <div class="gap-4 grid md:grid-cols-2 grid-cols-1">
        {% component "card" id="metrics-details" card_title="Incident Metrics Details" %}
          {% fill "card_content" %}
            <div class="prose">
              <p>
                <b>Metrics are durations, used to track the time of the incident response.</b>
              </p>
              <p>
                These durations are computed automatically from incident's Key Events.
                <br/>`Time To` metrics relate to a single incident, but are used for `Mean Time To` metrics, about a group of incidents.
              </p>
              {% for metric in metrics %}
                <h3 class="font-medium text-lg">{{ metric.name|capfirst }} <abbr class="text-sm font-normal">({{ metric.code }})</abbr></h3>
                <p>{{ metric.description }}</p>
                <p class="">Metric formula:
                  <code class="font-mono inline text-sm">{{ metric.code }} = {{ metric.milestone_lhs.event_type|capfirst }} - {{ metric.milestone_rhs.event_type|capfirst }}</code>
                </p>

              {% endfor %}
            </div>
          {% endfill %}
        {% endcomponent %}
        {% component "card" id="metrics-details" card_title="Key Events Details" %}
          {% fill "card_content" %}
            <div class="prose">
              <p>
                <b>Key Events are important events, point in time in your incident, that are equivalent to the status of the outage.</b>
              </p>
              <p>
                They are used to derive Incident Metrics, that are useful to understand the impact of the incident.<br/>
                Key Events can be modified by any user, either in Slack or in the Incident Page.
              </p>
              {% for key_event in key_events %}
                {% if key_event.asked_for %}
                  <h3 class="font-medium text-lg">{{ key_event.name|capfirst }}</h3>
                  {{ key_event.description|default:key_event.summary|markdown|safe }}
                  {% if not key_event.user_editable %}
                    <p class="alert alert-info">💡 This Key Event is added automatically to incidents by FireFighter, from the status you put in your `/incident update`.</p>
                  {% endif %}
                {% endif %}
              {% endfor %}
            </div>
          {% endfill %}
        {% endcomponent %}
      </div>
    </div>
  </div>
{% endblock content %}

{% block head %}
  <script type="module">
    // XXX Serve without the CDN
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      mermaid.initialize({ startOnLoad: true,  theme: 'dark', });
    }
    else {
      mermaid.initialize({ startOnLoad: true });
    }
  </script>
{% endblock head %}
