{% extends 'base.html' %}

{% block title %}Unit Management - {{ project_name }}{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="display-4">Unit & Resource Management</h1>
    <p class="lead">Real-time status and location of all emergency response units.</p>
</div>

<div class="card shadow-sm">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th>Unit ID</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th>Latitude</th>
                        <th>Longitude</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for unit in units %}
                    <tr>
                        <td><strong>{{ unit.unit_id }}</strong></td>
                        <td>{{ unit.unit_type }}</td>
                        <td><span class="badge bg-secondary">{{ unit.status }}</span></td>
                        <td>{{ unit.location_lat }}</td>
                        <td>{{ unit.location_lon }}</td>
                        <td class="text-end">
                            <a href="{% url 'unit_update' unit.pk %}" class="btn btn-primary btn-sm">Edit</a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center">No units found.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}
