{% extends "htmx/base.html" %}

{% block main %}
<div class="flex flex-col items-center gap-4 m-4">
{% block incident_detail %}
<h1 class="text-xl font-bold">{{ incident.pk }}: {{ incident.description }}</h1>

<div class="flex gap-4">
<section id="incident-detail" class="flex-none">

<section id="level" class="card">
<h2 class="card-title">Level</h2>
<p class="card-body">
{{ incident.level }}
</p>
</section>

<section id="status" class="card">
<h2 class="card-title">Status</h2>
<p class="card-body">
{% if incident.open %}
<span class="badge badge-primary">Open</span>{% else %}
<span class="badge badge-accent">Closed</span>{% endif %}
{% if incident.acked %}
<span class="badge badge-primary">Acknowledged</span>{% else %}
<span class="badge badge-accent">Unacknowledged</span>{% endif %}
{% if incident.ticket_url %}
<span class="badge badge-primary"><a href="{{ incident.ticket_url }}" target="_blank">Ticket {{ incident.ticket_url }}</a></span>{% else %}
<span class="badge badge-accent">No ticket</span>{% endif %}
</p>
</section>

<section id="tags" class="card">
<h2 class="card-title">Tags</h2>
<p  class="card-body">
{% for tag in incident.deprecated_tags %}
<span class="badge badge-neutral">{{ tag }}</span>
{% endfor %}
</p>
</section>

<section id="primary-details" class="card">
<h2 class="card-title">Primary details (#{{ incident.pk }})</h2>

<div class="card-body">
<h3 class="font-bold">Description</h3>
<p>{{ incident.description }}</p>

<h3 class="font-bold">Start time</h3>
<p>{{ incident.start_time|date:datetime_format }}</p>

<h3 class="font-bold">Duration</h3>
<p>{{ incident.end_time|date:datetime_format }}</p>

<h3 class="font-bold">Source</h3>
<p>{{ incident.source.name }}</p>

<h3 class="font-bold">Incident id in {{ incident.source.name }}</h3>
<p>{{ incident.source_incident_id }}</p>

<h3 class="font-bold">More details at</h3>
<p>
{% if incident.details_url %}<a href="{{ incident.details_url }}">{{ incident.details_url }}</a>{% else %}—{% endif %}
</p>

<h3 class="font-bold">Ticket</h3>
<p>
{% if incident.ticket_url %}<a href="{{ incident.ticket_url }}" target="_blank">{{ incident.ticket_url }}</a>{% else %}—{% endif %}
</p>

<div class="card-actions">

{% if incident.stateful %}
{% if incident.open %}
{% include 'htmx/incidents/_incident_close_modal.html' with dialog_id="close-incident-dialog" button_title="Close" header="Manually close incident" explanation="Write a message describing why the incident was manually closed" endpoint=endpoints.close cancel_text="Cancel" submit_text="Close now" %}
{% else %}
{% include 'htmx/incidents/_incident_reopen_modal.html' with dialog_id="reopen-incident-dialog" button_title="Reopen" header="Manually reopen incident" explanation="Write a message describing why the incident was manually reopend" endpoint=endpoints.reopen cancel_text="Cancel" submit_text="Reopen now" %}
{% endif %}
{% endif %}

{% if incident.ticket_url %}
{% include 'htmx/incidents/_incident_ticket_edit_modal.html' with dialog_id="edit-ticket-dialog" button_title="Edit ticket url" header="Edit ticket" explanation="" endpoint=endpoints.edit_ticket cancel_text="Cancel" submit_text="Update" %}
{% else %}
<!-- Manually create ticket dialog -->
{% include 'htmx/incidents/_incident_ticket_edit_modal.html' with dialog_id="manual-create-ticket-dialog" button_title="Add ticket url" header="Add url to existing ticket" explanation="Are you sure you want to store this url to an existing ticket on this incident?" endpoint=endpoints.add_ticket cancel_text="Cancel" submit_text="Add ticket" %}
{% endif %}

</div>
</div>
</section>
</section>

<section id="acknowledgements" class="card">
<h2 class="card-title">Acknowledgements</h2>
<div class="divide-y divide-solid">
  {% for ack in incident.acks %}
  <div class="card-body flex-none">
    <p>
    {{ ack.event.description }}
    </p>
    <p>
    {{ ack.event.actor }}
    {{ ack.event.timestamp|date:datetime_format }}
    </p>
    {% if ack.expiration%}<p>Expires: {{ ack.expiration|date:datetime_format }}</p>{% endif %}
    </div>
    {% endfor %}
  <div class="card-actions divide-none">

{% include 'htmx/incidents/_incident_acknowledge_modal.html' with dialog_id="create-acknowledgment-dialog" button_title="Create acknowledgment" header="Submit acknowledgment" explanation="Write a message describing why this incident was acknowledged" endpoint=endpoints.ack cancel_text="Cancel" submit_text="Submit" %}

  </div>
</div>
</section>

<section id="events" class="card">
<h2 class="card-title">Related events</h2>
<div class="divide-y divide-solid">
{% for event in incident.events.all %}
{% if not event.ack %}
<div class="card-body flex-none">
<p>
{{ event.get_type_display }}
</p>
<p>
{{ event.description }}
</p>
<p>
{{ event.actor }}
{{ event.timestamp|date:datetime_format }}
</p>
</div>
{% endif %}
{% endfor %}
</div>
</section>
</div>

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