{% extends "base.html" %}
{% load static %}
{% load unslackify %}
{% load markdown_filter %}

{% block head %}
<link rel="stylesheet" href="{% static "incident_doc.css" %}">
{% endblock %}


{% block content %}
<div class="row pb-4">

    <div class="col-lg-12 text-center">
        {% comment %} ----- Heading ----- {% endcomment %}
        <h1 class="mt-3" id="title"><a href="">Incident {{ incident.pk }}</a></h1>
        <div id="status"><strong class="{{ incident.status_text }} blink_me">{{ incident.status_text|upper }}</strong>
        {% if incident.severity_text %}- {{ incident.severity_text|upper}} SEVERITY{% endif %}</div>
    </div>

    <div class="col-lg-12">

        {% comment %} ----- Summary ----- {% endcomment %}
        <h2>Summary</h2>
        <p>{% if incident.summary %}{{ incident.summary|unslackify|markdown_filter|safe  }}{% endif %}</p>
        <ul class="summary-data">
            {% if incident.impact %}<li><span>Impact:</span>{{ incident.impact|unslackify|markdown_filter|safe }}</li>{% endif %}
            <li><span>Reporter:</span>{{ incident.reporter.display_name }}</li>
            {% if incident.lead %}<li><span>Lead:</span>{{ incident.lead.display_name }}</li>{% endif %}

            <li><span>Start Time:</span>{% if incident.start_time %}{{ incident.start_time }}{% endif %}</li>
            <li><span>Report Time:</span>{% if incident.report_time %}{{ incident.report_time }}{% endif %}</li>

            {% if incident.is_closed %}
                <li><span>End Time:</span>{{ incident.end_time }}</li>
                <li><span>Duration:</span>{{ incident.duration}}</li>
            {% endif %}

            {% if user_stats %}
                <li><span>Participants:</span>
                    <ul id="participant">
                        {% for stats in user_stats %}
                            <li>
                            {{ stats.user.display_name }} ({{stats.message_count}} messages)
                            </li>
                        {% endfor %}
                    </ul>
                </li>
            {% endif %}

        </ul>

        {% comment %} ----- Timeline ----- {% endcomment %}
        <h2>Timeline</h2>
        {% if events %}
        <div class="timeline">
            {% for event in events.all %}
            <div class="container">
                <div class="content">
                    <strong>{{ event.icon|safe }}{{ event.timestamp|date:"H:i:s" }}</strong>
                    {{ event|stringformat:'s'|unslackify|markdown_filter|safe  }}
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

    </div>
</div>
{% endblock %}
