{% extends "base.html" %}

{% block content %}

<div class="title">
    Incident {{ incident.incident_id }}
</div>

<br />

<!-- Summary -->
<div class="card">
    <h2>Summary</h2>

    <table>
        <tr>
            <td><b>Container</b></td>
            <td>{{ incident.container_name }}</td>
        </tr>

        <tr>
            <td><b>Status</b></td>
            <td>{{ incident.status }}</td>
        </tr>

        <tr>
            <td><b>Created</b></td>
            <td>{{ incident.created_at }}</td>
        </tr>

        <tr>
            <td><b>Exit Code</b></td>
            <td>{{ incident.analysis.exit_code }}</td>
        </tr>

        <tr>
            <td><b>Reason</b></td>
            <td>{{ incident.analysis.reason }}</td>
        </tr>
    </table>
</div>

<!-- Root Cause -->
<div class="card">
    <h2>Root Cause</h2>

    <p>{{ incident.analysis.summary }}</p>

    <p>
        <b>Severity:</b>
        {{ incident.analysis.severity }}
    </p>

    <p>
        <b>Confidence:</b>
        {{ incident.analysis.confidence }}
    </p>
</div>

<!-- AI Investigation -->
<div class="card">
    <h2>AI Investigation</h2>

    <div
        style="
            white-space: pre-wrap;
            padding: 16px;
            border-radius: 8px;
            max-height: 450px;
            overflow: auto;
            font-family: monospace;
            line-height: 1.5;
        "
    >
        {{ incident.investigation }}
    </div>
</div>

<!-- Execution Plan -->
{% if approval %}

<div class="card">
    <h2>Execution Plan</h2>

    <p>
        <b>Status:</b>

        {% if approval.status == "PENDING" %}
            🟡 Pending Approval
        {% elif approval.status == "APPROVED" %}
            🟢 Approved
        {% elif approval.status == "EXECUTED" %}
            ✅ Executed
        {% else %}
            {{ approval.status }}
        {% endif %}
    </p>

    <table>
        <tr>
            <th>#</th>
            <th>Tool</th>
            <th>Arguments</th>
        </tr>

        {% for action in approval.actions %}
        <tr>
            <td>{{ loop.index }}</td>
            <td>{{ action.tool }}</td>
            <td>
                <pre
                    style="
                        white-space: pre-wrap;
                        margin: 0;
                    "
                >
{{ action.arguments | tojson(indent=2) }}
                </pre>
            </td>
        </tr>
        {% endfor %}
    </table>

    <br />

    {% if approval.status == "PENDING_APPROVAL" %}
    <form
        action="/approvals/{{ incident.incident_id }}/approve"
        method="post"
    >
        <button
            type="submit"
            style="
                padding: 12px 24px;
                font-size: 15px;
                cursor: pointer;
                background: #2f855a;
                color: white;
                border: none;
                border-radius: 6px;
            "
        >
            Approve & Execute
        </button>
    </form>
    {% endif %}
</div>

{% endif %}

{% endblock %}