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

{% block content %}
  <main class="py-10">
    <!-- Page header -->
    <div class="max-w-3xl mx-auto px-4 sm:px-6 md:flex md:items-center md:justify-between md:space-x-5 lg:max-w-7xl lg:px-8">
      <div class="flex items-center space-x-5">
        <div>
          <h1 class="text-xl leading-6 font-bold text-neutral-900 dark:text-neutral-50">
            #{{ incident.id }} - {{ incident.title }}
          </h1>
          {% if incident.created_at is not none %}
            <p class="text-neutral-600 dark:text-neutral-200">Reported by <a class="text-neutral-900 dark:text-neutral-100" href="{{ incident.created_by.get_absolute_url }}">{{ incident.created_by.full_name }}</a>, <time datetime="{{ incident.created_at|date:"c" }}">{{ incident.created_at|date:"SHORT_DATETIME_FORMAT" }}</time></p>
          {% endif %}
          <p>
            {% include "../layouts/partials/priority_pill.html" with priority=incident.priority %}
            {% include "../layouts/partials/status_pill.html" with status=incident.status IncidentStatus=IncidentStatus only %}
          </p>
        </div>
      </div>
      <div class="mt-6 flex flex-col-reverse justify-stretch space-y-4 space-y-reverse sm:flex-row-reverse sm:justify-end sm:space-x-reverse sm:space-y-0 sm:space-x-3 md:mt-0 md:flex-row md:space-x-3">

        {% if perms.incidents.change_incidents %}
          <a href="{{ admin_edit_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-primary gap-2 ">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
              <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
            </svg>

            <span class="whitespace-nowrap font-semibold">Edit</span>
          </a>
        {% endif %}
      </div>
    </div>

    <div class="mt-8 max-w-3xl mx-auto grid grid-cols-1 gap-6 sm:px-6 lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-12">
      <div class="space-y-6 lg:col-start-1 lg:col-span-7">

        {% component "card" card_title="Incident Information" id="incident-information" %}
          {% fill "card_content" %}
            <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
              <div class="sm:col-span-2">
                <dt class="text-sm font-medium text-neutral-500 dark:text-neutral-300">Description</dt>
                <dd class="mt-1 text-sm text-neutral-900 dark:text-neutral-100 break-all"> {{ incident.description|urlize|linebreaksbr }}</dd>
              </div>
              <div class="sm:col-span-1">
                <dt class="text-sm font-medium text-neutral-500 dark:text-neutral-300">Priority</dt>
                <dd class="mt-1 text-sm text-neutral-900 dark:text-neutral-100"> {{ incident.priority }}</dd>
              </div>
              <div class="sm:col-span-1">
                <dt class="text-sm font-medium text-neutral-500 dark:text-neutral-300">Environment</dt>
                <dd class="mt-1 text-sm text-neutral-900 dark:text-neutral-100"> {% include "../layouts/partials/environment_pill.html" with environment=incident.environment only %}
                </dd>
              </div>
              {% if incident.component is not none %}
                <div class="sm:col-span-1">
                  <dt class="text-sm font-medium text-neutral-500 dark:text-neutral-300">Group</dt>
                  <dd class="mt-1 text-sm text-neutral-900 dark:text-neutral-100"> {{ incident.component.group }}</dd>
                </div>
              {% endif %}

              <div class="sm:col-span-1">
                <dt class="text-sm font-medium text-neutral-500 dark:text-neutral-300">Component</dt>
                <dd class="mt-1 text-sm text-neutral-900 dark:text-neutral-100"><a class="link" href="{{ incident.component.get_absolute_url }}">{{ incident.component }}</a></dd>
              </div>


            </dl>
          {% endfill %}
        {% endcomponent %}
        {% component "card" card_title="Timeline" id="incident-timeline" %}
          {% fill "card_content" %}
            {% include "../layouts/partials/incident_timeline.html" with incident_updates=incident.incidentupdate_set.all %}
          {% endfill %}
        {% endcomponent %}

        {% component "card" card_title="Metrics" id="incident-metrics" %}
          {% fill "card_title" %}
            <div class="flex flex-row justify-between">
              <h2 id="{{ id }}-title" class="text-lg leading-6 font-medium text-neutral-900 dark:text-neutral-50">{{ card_title }}</h2>
              {% if user.is_authenticated %}
                <a href="{% url "incidents:incident-update-key-events" incident_id=incident.id %}" hx-get="{% url "incidents:incident-update-key-events" incident_id=incident.id %}" hx-target="body" hx-swap="beforeend" class="btn btn-primary gap-2 btn-xs">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
                    <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
                  </svg>

                  <span class="whitespace-nowrap font-semibold">Edit Key events</span>
                </a>
              {% endif %}
            </div>
          {% endfill %}
          {% fill "card_content" %}
            <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
              {% include "../layouts/partials/incident_metrics.html" with metrics=incident.metrics.all %}
            </dl>
          {% endfill %}
        {% endcomponent %}


      </div>
      <div class="lg:col-start-8 lg:col-span-5 space-y-6 ">
        {% component "card" card_title="External resources" id="incident-integrations" %}
          {% fill "card_content" %}
            {% if not incident.conversation and not incident.postmortem_for and pagerduty_incident_set.count == 0 %}
              <div class="px-4 py-5 sm:px-6 col-span-2">
                <h4 class="text-center font-medium text-sm text-neutral-500 dark:text-neutral-100">
                  No external resources for this incident.
                </h4>
              </div>
            {% else %}
              <ul role="list" class="divide-y divide-neutral-200 dark:divide-neutral-600">
                {% if incident.conversation %}
                  <li class="py-4 flex items-center">
                    <div class="h-10 w-10 flex shrink-0">
                      <svg class="fill-current h-8 w-8 m-auto " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                           viewBox="68 68 135 135" >
                        <g>
                          <g>
                            <path d="M99.4,151.2c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h12.9V151.2z"/>
                            <path d="M105.9,151.2c0-7.1,5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v32.3c0,7.1-5.8,12.9-12.9,12.9s-12.9-5.8-12.9-12.9
                                     C105.9,183.5,105.9,151.2,105.9,151.2z"/>
                          </g>
                          <g>
                            <path d="M118.8,99.4c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9s12.9,5.8,12.9,12.9v12.9H118.8z"/>
                            <path d="M118.8,105.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9H86.5c-7.1,0-12.9-5.8-12.9-12.9s5.8-12.9,12.9-12.9
                                     C86.5,105.9,118.8,105.9,118.8,105.9z"/>
                          </g>
                          <g>
                            <path d="M170.6,118.8c0-7.1,5.8-12.9,12.9-12.9c7.1,0,12.9,5.8,12.9,12.9s-5.8,12.9-12.9,12.9h-12.9V118.8z"/>
                            <path d="M164.1,118.8c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9V86.5c0-7.1,5.8-12.9,12.9-12.9
                                     c7.1,0,12.9,5.8,12.9,12.9V118.8z"/>
                          </g>
                          <g>
                            <path d="M151.2,170.6c7.1,0,12.9,5.8,12.9,12.9c0,7.1-5.8,12.9-12.9,12.9c-7.1,0-12.9-5.8-12.9-12.9v-12.9H151.2z"/>
                            <path d="M151.2,164.1c-7.1,0-12.9-5.8-12.9-12.9c0-7.1,5.8-12.9,12.9-12.9h32.3c7.1,0,12.9,5.8,12.9,12.9
                                     c0,7.1-5.8,12.9-12.9,12.9H151.2z"/>
                          </g>
                        </g>
                      </svg> </div>
                    <div class="ml-3">
                      <p class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Slack Conversation</p>
                      <p class="text-sm text-neutral-500 dark:text-neutral-300"><a href="{{ incident.slack_channel_url }}" target="_blank" rel="noopener noreferrer" class="underline">#{{ incident.slack_channel_name }}</a></p>
                    </div>
                  </li>
                {% endif %}
                {% if incident.postmortem_for %}
                  <li class="py-4 flex items-center">
                    <div class="h-10 w-10 flex shrink-0">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 m-auto" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
                      </svg>
                    </div>
                    <div class="ml-3">
                      <p class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Post-mortem</p>
                      <p class="text-sm text-neutral-500 dark:text-neutral-300"> <a href="{{ incident.postmortem_for.page_url }}" target="_blank" rel="noopener noreferrer" class="underline" >{{ incident.postmortem_for.name|truncatechars:70 }}</a></p>
                    </div>
                  </li>
                {% endif %}
                {% if incident.jira_ticket %}
                  <li class="py-4 flex items-center">
                    <div class="h-10 w-10 flex shrink-0">
                      <svg viewBox="0 0 24 24"  class="h-8 w-8 m-auto" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M11.571 11.513H0a5.218 5.218 0 0 0 5.232 5.215h2.13v2.057A5.215 5.215 0 0 0 12.575 24V12.518a1.005 1.005 0 0 0-1.005-1.005zm5.723-5.756H5.736a5.215 5.215 0 0 0 5.215 5.214h2.129v2.058a5.218 5.218 0 0 0 5.215 5.214V6.758a1.001 1.001 0 0 0-1.001-1.001zM23.013 0H11.455a5.215 5.215 0 0 0 5.215 5.215h2.129v2.057A5.215 5.215 0 0 0 24 12.483V1.005A1.001 1.001 0 0 0 23.013 0Z"/></svg>
                    </div>
                    <div class="ml-3">
                      <p class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Jira Incident Ticket</p>
                      <p class="text-sm text-neutral-500 dark:text-neutral-300"> <a href="{{ incident.jira_ticket.url }}" target="_blank" rel="noopener noreferrer" class="underline" >{{ incident.jira_ticket.key|truncatechars:70 }}</a></p>
                    </div>
                  </li>
                {% endif %}
                {% for pagerduty_incident in incident.pagerduty_incident_set.all %}
                  <li class="py-4 flex items-center">
                    <div class="h-10 w-10 flex shrink-0">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 m-auto" viewBox="0 0 24 24" fill="currentColor"><path d="M16.965 1.18C15.085.164 13.769 0 10.683 0H3.73v14.55h6.926c2.743 0 4.8-.164 6.61-1.37 1.975-1.303 3.004-3.484 3.004-6.007 0-2.716-1.262-4.896-3.305-5.994zm-5.5 10.326h-4.21V3.113l3.977-.027c3.62-.028 5.43 1.234 5.43 4.128 0 3.113-2.248 4.292-5.197 4.292zM3.73 17.61h3.525V24H3.73Z"/></svg>
                    </div>
                    <div class="ml-3">
                      <p class="text-sm font-medium text-neutral-900 dark:text-neutral-100">PagerDuty Incident</p>
                      <p class="text-sm text-neutral-500 dark:text-neutral-300"> <a href="{{ pagerduty_incident.web_url }}" target="_blank" rel="noopener noreferrer" class="underline" >{{ pagerduty_incident.summary|truncatechars:70 }}</a></p>
                    </div>
                  </li>
                {% endfor %}
              </ul>
            {% endif %}

          {% endfill %}
        {% endcomponent %}

        {% component "card" card_title="Key participants" id="incident-contacts" %}
          {% fill "card_content" %}
            {% for role in incident.roles_set.all %}
              <span class="ff-tooltip">
                {% include "../layouts/partials/user_card.html" with user=role.user title=role.role_type.name only %}
                {% include "../layouts/partials/user_tooltip.html" with user=role.user only %}
              </span>
            {% endfor %}
          {% endfill %}
        {% endcomponent %}
        {% component "card" card_title="Impacts" id="incident-impacts" %}
          {% fill "card_content" %}
            {% for impact in incident.impacts.all|dictsort:"impact_level.value" %}
              <ul role="list" class="divide-y divide-gray-100">
                <li class="py-1">
                  <div class="flex items-center gap-x-3">
                    <span class="h-full w-5">{{ impact.impact_type.emoji }}</span>
                    <h3 class="flex-auto truncate text-sm font-semibold leading-6 text-neutral-900 dark:text-neutral-100">    {{ impact.impact_type }}</h3>
                  </div>
                  <p class="mt-2 truncate text-sm text-neutral-500 dark:text-neutral-300">{{ impact.impact_level.value_label }}: {{ impact.impact_level.name }}</p>
                </li>
              </ul>
            {% empty %}
              <div class="px-4 py-5 sm:px-6 col-span-2">
                <h4 class="text-center font-medium text-sm text-neutral-500 dark:text-neutral-100">
                  No impacts defined at the moment.
                </h4>
              </div>
            {% endfor %}
          {% endfill %}
        {% endcomponent %}
        {% if incident.incident_cost_set.count %}
          {% load humanize %}
          {% component "card" card_title="Cost Estimates" id="incident-cost-estimates" %}
            {% fill "card_content" %}
              <ul class="mx-6 list-disc">
                {% for cost in incident.incident_cost_set.all %}
                  <li>{{ cost.cost_type.name }}: {{ cost.amount|intcomma }} {{ cost.currency }}</li>
                {% endfor %}
              </ul>
            {% endfill %}
          {% endcomponent %}
        {% endif %}
      </div>
    </div>
    <div class="h-24 w-24 my-16 mx-auto">
      {% include "../layouts/partials/priority_icon.html" %}
    </div>
  </main>


{% endblock content %}
