{% extends "base.html" %}
{% block content %}
<div class="breadcrumb-bar"><a href="/incidents">Incidents</a> / {{ incident.incident_number }}</div>
<div class="page-header">
  <h1>{{ incident.incident_number }} — {{ incident.title }}
    <span class="status-pill badge-severity-{{ incident.severity.value[:2] | lower }}">{{ incident.severity.value }}</span>
  </h1>
  {% if current_user.has_permission('incidents.close') and incident.status.value != 'Closed' %}
    <form method="post" action="/incidents/{{ incident.id }}/close" onsubmit="return confirm('Close this incident?')">
      <button class="btn btn-outline-danger btn-sm">Close Incident</button>
    </form>
  {% endif %}
</div>

<div class="row g-3">
  <div class="col-lg-8">
    <div class="card-panel mb-3">
      <p><strong>Description:</strong> {{ incident.description or '—' }}</p>
      <p><strong>Impact:</strong> {{ incident.impact or '—' }}</p>
      <p class="mb-0"><strong>Affected:</strong> Servers: {{ incident.affected_servers or '—' }} · Services: {{ incident.affected_services or '—' }} · Customers: {{ incident.affected_customers or '—' }}</p>
    </div>

    <div class="card-panel mb-3">
      <h2 class="h6">Timeline</h2>
      {% for entry in incident.timeline_entries %}
        <div class="timeline-item">
          <div class="small text-muted">{{ entry.created_at.strftime('%d %b %H:%M') }} — {{ entry.author.full_name if entry.author else 'System' }}</div>
          <div>{{ entry.note }}</div>
        </div>
      {% endfor %}
      {% if current_user.has_permission('incidents.edit') %}
      <form method="post" action="/incidents/{{ incident.id }}/timeline" class="d-flex gap-2 mt-3">
        <input type="text" name="note" class="form-control form-control-sm" placeholder="Add timeline update..." required>
        <button class="btn btn-sm btn-outline-primary">Add</button>
      </form>
      {% endif %}
    </div>

    {% if current_user.has_permission('incidents.edit') %}
    <div class="card-panel mb-3">
      <h2 class="h6">Root Cause &amp; Resolution</h2>
      <form method="post" action="/incidents/{{ incident.id }}/resolution">
        <div class="mb-2"><label class="form-label small">Root Cause</label><textarea name="root_cause" class="form-control" rows="2">{{ incident.root_cause }}</textarea></div>
        <div class="mb-2"><label class="form-label small">Resolution</label><textarea name="resolution" class="form-control" rows="2">{{ incident.resolution }}</textarea></div>
        <div class="mb-2"><label class="form-label small">Customer Communication</label><textarea name="customer_communication" class="form-control" rows="2">{{ incident.customer_communication }}</textarea></div>
        <button class="btn btn-sm btn-primary">Save</button>
      </form>
    </div>
    {% endif %}

    <div class="card-panel">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h2 class="h6 mb-0">RCA / Postmortem</h2>
        {% if not incident.rca and current_user.has_permission('incidents.edit') %}
          <a href="/incidents/{{ incident.id }}/rca/new" class="btn btn-sm btn-outline-primary">Create RCA</a>
        {% endif %}
      </div>
      {% if incident.rca %}
        {% set rca = incident.rca %}
        <p><strong>Summary:</strong> {{ rca.summary }}</p>
        <p><strong>Root Cause:</strong> {{ rca.root_cause }}</p>
        <p><strong>What went well:</strong> {{ rca.what_went_well }}</p>
        <p><strong>What went wrong:</strong> {{ rca.what_went_wrong }}</p>
        <h3 class="h6 mt-3">Action Items</h3>
        <ul class="list-unstyled">
          {% for action in rca.actions %}
            <li class="d-flex justify-content-between border-bottom py-1">
              <span class="{{ 'text-decoration-line-through text-muted' if action.status == 'Done' }}">{{ action.description }} {{ '('+action.owner.full_name+')' if action.owner }}</span>
              {% if action.status != 'Done' and current_user.has_permission('incidents.edit') %}
                <form method="post" action="/incidents/{{ incident.id }}/rca/{{ rca.id }}/actions/{{ action.id }}/complete"><button class="btn btn-sm btn-link p-0">Mark done</button></form>
              {% endif %}
            </li>
          {% endfor %}
        </ul>
        {% if current_user.has_permission('incidents.edit') %}
        <form method="post" action="/incidents/{{ incident.id }}/rca/{{ rca.id }}/actions" class="d-flex gap-2 mt-2">
          <input type="text" name="description" class="form-control form-control-sm" placeholder="New action item" required>
          <button class="btn btn-sm btn-outline-primary">Add</button>
        </form>
        {% endif %}
      {% else %}
        <p class="text-muted small mb-0">No RCA created yet.</p>
      {% endif %}
    </div>
  </div>

  <div class="col-lg-4">
    <div class="card-panel mb-3">
      <p class="mb-1"><strong>Status:</strong> {{ incident.status.value }}</p>
      {% if current_user.has_permission('incidents.edit') %}
      <form method="post" action="/incidents/{{ incident.id }}/status" class="d-flex gap-2">
        <select name="status" class="form-select form-select-sm">
          {% for s in ['Detected','Investigating','Identified','Mitigating','Monitoring','Resolved','Closed'] %}
            <option value="{{ s }}" {{ 'selected' if incident.status.value == s }}>{{ s }}</option>
          {% endfor %}
        </select>
        <button class="btn btn-sm btn-outline-primary">Update</button>
      </form>
      {% endif %}
    </div>
    <div class="card-panel">
      <p class="mb-1"><strong>Assigned To:</strong> {{ incident.assigned_to.full_name if incident.assigned_to else '—' }}</p>
      <p class="mb-1"><strong>Incident Commander:</strong> {{ incident.incident_commander.full_name if incident.incident_commander else '—' }}</p>
      <p class="mb-1"><strong>Detected:</strong> {{ incident.detected_at.strftime('%d %b %Y %H:%M') }}</p>
      <p class="mb-0"><strong>Resolved:</strong> {{ incident.resolved_at.strftime('%d %b %Y %H:%M') if incident.resolved_at else '—' }}</p>
    </div>
  </div>
</div>
{% endblock %}