{% extends "base.html" %}

{% block content %}
<div class="mb-6">
    <div class="flex justify-between items-center mb-4">
        <div>
            <h2 class="text-2xl font-bold">{{ engagement.name }}</h2>
            <p class="text-gray-500">{{ engagement.description or 'No description' }}</p>
        </div>
        <div class="flex space-x-3">
            <a href="/engagements/{{ engagement.id }}/schedule" class="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700">Schedule Scan</a>
            <a href="/engagements/{{ engagement.id }}/report" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">View Report</a>
        </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white p-4 rounded-lg shadow">
            <p class="text-sm text-gray-500">Status</p>
            <p class="font-bold text-lg capitalize">{{ engagement.status }}</p>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
            <p class="text-sm text-gray-500">Max Tool Level</p>
            <p class="font-bold text-lg">{{ engagement.max_tool_level }}</p>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
            <p class="text-sm text-gray-500">CIDRs</p>
            <p class="font-bold text-lg">{{ engagement.scope_cidrs|length }}</p>
        </div>
        <div class="bg-white p-4 rounded-lg shadow">
            <p class="text-sm text-gray-500">Domains</p>
            <p class="font-bold text-lg">{{ engagement.scope_domains|length }}</p>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow">
        <div class="p-4 border-b flex justify-between items-center">
            <h3 class="text-lg font-semibold">Scans</h3>
            <button hx-get="/engagements/{{ engagement.id }}/scans/new-form" hx-target="#new-scan-form" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm">Add Scan</button>
        </div>
        <div id="new-scan-form"></div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr class="text-left text-sm text-gray-500">
                        <th class="p-4">Tool</th>
                        <th class="p-4">Target</th>
                        <th class="p-4">Status</th>
                        <th class="p-4">Started</th>
                        <th class="p-4">Completed</th>
                        <th class="p-4">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200" id="scans-table">
                    {% for scan in scans %}
                    <tr class="hover:bg-gray-50" id="scan-{{ scan.id }}">
                        <td class="p-4">{{ scan.tool_name }}</td>
                        <td class="p-4">{{ scan.target }}</td>
                        <td class="p-4">
                            <span class="px-2 py-1 text-xs rounded-full
                                {% if scan.status == 'pending' %}bg-gray-100 text-gray-800{% endif %}
                                {% if scan.status == 'running' %}bg-blue-100 text-blue-800{% endif %}
                                {% if scan.status == 'completed' %}bg-green-100 text-green-800{% endif %}
                                {% if scan.status == 'failed' %}bg-red-100 text-red-800{% endif %}
                            ">
                                {{ scan.status }}
                            </span>
                        </td>
                        <td class="p-4 text-sm text-gray-500">{{ scan.started_at[:19] if scan.started_at else '-' }}</td>
                        <td class="p-4 text-sm text-gray-500">{{ scan.completed_at[:19] if scan.completed_at else '-' }}</td>
                        <td class="p-4">
                            <a href="/scans/{{ scan.id }}" class="text-blue-600 hover:underline mr-3">View</a>
                            {% if scan.status == 'pending' %}
                            <button hx-post="/scans/{{ scan.id }}/start" hx-target="#scan-{{ scan.id }}" class="text-green-600 hover:underline">Start</button>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}