{% extends 'base.html' %}
{% load static %}

{% block title %}Incident Detail{% endblock %}

{% block content %}
<div class="container">
    <div class="incident-detail-card">
        <div class="card-header">
            <h2 class="incident-title">{{ incident.get_incident_type_display }}</h2>
            <span class="incident-source">Source: <a href="{{ incident.source_url }}" target="_blank" rel="noopener noreferrer">{{ incident.source_url }}</a></span>
        </div>
        <div class="card-content">
            <p>{{ incident.content }}</p>
        </div>
        <div class="card-footer">
            <span class="status {{ incident.status }}">{{ incident.get_status_display }}</span>
        </div>
    </div>

    <div class="ai-analysis-card">
        <div class="card-header">
            <h3 class="analysis-title">AI-Powered Analysis</h3>
        </div>
        <div class="card-content">
            <h4>Summary</h4>
            <p>{{ ai_analysis.summary }}</p>
            <h4>Sentiment</h4>
            <p class="sentiment-{{ ai_analysis.sentiment|lower }}">{{ ai_analysis.sentiment }}</p>
            <h4>Suggested Remediation Steps</h4>
            <ul>
                {% for step in ai_analysis.suggested_steps %}
                    <li>{{ step }}</li>
                {% empty %}
                    <li>No remediation steps suggested at this time.</li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="back-link-container">
        <a href="{% url 'home' %}" class="btn btn-secondary">&larr; Back to Dashboard</a>
    </div>
</div>
{% endblock %}
