{% extends "base.html" %}
{% block title %}{% if action=='new' %}Log New Incident{% else %}Edit {{incident.ref}}{% endif %}{% endblock %}
{% block breadcrumb %}{% if action=='new' %}Log New Incident{% else %}Edit Incident{% endif %}{% endblock %}

{% block content %}
<div class="page-header">
  <div class="page-header-left">
    <div class="page-eyebrow">{% if action=='new' %}New Report{% else %}Editing{% endif %}</div>
    <div class="page-title">{% if action=='new' %}Log New Incident{% else %}Edit — {{incident.ref}}{% endif %}</div>
    <div class="page-subtitle">{% if action=='new' %}Fill in all required fields to create a new incident report.{% else %}Update the incident details and status below.{% endif %}</div>
  </div>
  <div class="page-header-actions">
    <a href="{% if incident %}/incident/{{incident.ref}}{% else %}/incidents{% endif %}" class="btn btn-outline">
      ← Cancel
    </a>
  </div>
</div>

<form method="POST">
  <div style="display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start">

    <!-- Left: main fields -->
    <div style="display:flex;flex-direction:column;gap:20px">

      <div class="card">
        <div class="card-body">
          <div class="form-section-title">
            <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="9"/><path d="M12 8v4m0 4h.01"/>
            </svg>
            Basic Information
          </div>
          <div class="form-grid">
            <div class="form-group">
              <label class="form-label">Incident Title <span class="req">*</span></label>
              <input class="form-control" name="title" required placeholder="e.g. Core switch failure — HQ Techiman" value="{{incident.title if incident else ''}}">
            </div>
            <div class="form-row-3">
              <div class="form-group">
                <label class="form-label">Severity <span class="req">*</span></label>
                <select class="form-control" name="severity" required>
                  <option value="">Select…</option>
                  {% for s in ['Critical','High','Medium','Low'] %}
                  <option value="{{s}}" {{'selected' if incident and incident.severity==s else ''}}>{{s}}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">Category <span class="req">*</span></label>
                <select class="form-control" name="category" required>
                  <option value="">Select…</option>
                  {% for c in ['Network Outage','Hardware Failure','Cybersecurity Breach','Configuration Error','ISP / WAN Issue','DNS / DHCP Failure','Power Failure','Performance Degradation','Software / Application','Other'] %}
                  <option value="{{c}}" {{'selected' if incident and incident.category==c else ''}}>{{c}}</option>
                  {% endfor %}
                </select>
              </div>
              {% if action=='edit' %}
              <div class="form-group">
                <label class="form-label">Status</label>
                <select class="form-control" name="status">
                  {% for s in ['Open','In Progress','Resolved','Closed'] %}
                  <option value="{{s}}" {{'selected' if incident.status==s else ''}}>{{s}}</option>
                  {% endfor %}
                </select>
              </div>
              {% endif %}
            </div>
            <div class="form-row-2">
              <div class="form-group">
                <label class="form-label">Reported By <span class="req">*</span></label>
                <input class="form-control" name="reported_by" required placeholder="Full name of reporter" value="{{incident.reported_by if incident else ''}}">
              </div>
              <div class="form-group">
                <label class="form-label">Assigned To</label>
                <input class="form-control" name="assigned_to" placeholder="Engineer / team" value="{{incident.assigned_to if incident else ''}}">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-body">
          <div class="form-section-title">
            <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
              <path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
            Impact & Location
          </div>
          <div class="form-grid">
            <div class="form-row-2">
              <div class="form-group">
                <label class="form-label">Location / Site</label>
                <input class="form-control" name="location" placeholder="e.g. Techiman HQ, Server Room" value="{{incident.location if incident else ''}}">
              </div>
              <div class="form-group">
                <label class="form-label">Affected Systems / Services</label>
                <input class="form-control" name="affected" placeholder="e.g. Core Router, VLAN 10, IP phones" value="{{incident.affected if incident else ''}}">
              </div>
            </div>
            <div class="form-row-2">
              <div class="form-group">
                <label class="form-label">Incident Start Time</label>
                <input type="datetime-local" class="form-control" name="start_time" value="{{incident.start_time[:16] if incident and incident.start_time else ''}}">
              </div>
              <div class="form-group">
                <label class="form-label">Incident End Time</label>
                <input type="datetime-local" class="form-control" name="end_time" value="{{incident.end_time[:16] if incident and incident.end_time else ''}}">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-body">
          <div class="form-section-title">
            <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
            Incident Narrative
          </div>
          <div class="form-grid">
            <div class="form-group">
              <label class="form-label">Description <span class="req">*</span></label>
              <textarea class="form-control" name="description" rows="4" required placeholder="What happened? Symptoms observed, user impact, scope of outage…">{{incident.description if incident else ''}}</textarea>
            </div>
            {% if action=='edit' %}
            <div class="form-group">
              <label class="form-label">Root Cause Analysis</label>
              <textarea class="form-control" name="root_cause" rows="3" placeholder="What was the root cause? Underlying fault, contributing factors…">{{incident.root_cause if incident else ''}}</textarea>
            </div>
            <div class="form-group">
              <label class="form-label">Resolution / Actions Taken</label>
              <textarea class="form-control" name="resolution" rows="3" placeholder="Steps taken to resolve. What was fixed, replaced, or configured…">{{incident.resolution if incident else ''}}</textarea>
            </div>
            {% endif %}
          </div>
        </div>
      </div>

    </div>

    <!-- Right: submit panel -->
    <div style="display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--header-h) + 16px)">
      <div class="card">
        <div class="card-body">
          <div class="form-section-title" style="margin-bottom:14px">Submit</div>
          <div style="display:flex;flex-direction:column;gap:10px">
            <button type="submit" class="btn btn-gold" style="width:100%;justify-content:center">
              <svg width="15" height="15" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                <path d="M5 13l4 4L19 7"/>
              </svg>
              {% if action=='new' %}Create Incident Report{% else %}Save Changes{% endif %}
            </button>
            <a href="{% if incident %}/incident/{{incident.ref}}{% else %}/incidents{% endif %}"
               class="btn btn-outline" style="width:100%;justify-content:center">Cancel</a>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-body">
          <div style="font-size:12px;font-weight:700;color:var(--green-800);margin-bottom:10px">Severity Guide</div>
          <div style="display:flex;flex-direction:column;gap:8px">
            {% for s,desc in [
              ('Critical','Total outage · All users affected'),
              ('High','Major degradation · Partial outage'),
              ('Medium','Isolated issue · Limited impact'),
              ('Low','Minor issue · Workaround available')
            ] %}
            <div style="display:flex;gap:8px;align-items:flex-start">
              <span class="badge badge-{{s|lower}}" style="flex-shrink:0;margin-top:1px">{{s}}</span>
              <span style="font-size:11px;color:var(--gray-500);line-height:1.4">{{desc}}</span>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>

      {% if action=='new' %}
      <div class="card" style="border-left:3px solid var(--gold-600)">
        <div class="card-body">
          <div style="font-size:11px;font-weight:700;color:var(--gold-600);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px">Tip</div>
          <div style="font-size:12px;color:var(--gray-500);line-height:1.6">Root cause and resolution can be added later when the incident is under investigation or resolved.</div>
        </div>
      </div>
      {% endif %}
    </div>

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