{% extends 'base.html' %}
{% block title %}Routes{% endblock %}
{% block topbar_title %}Route Management{% endblock %}
{% block content %}
<h1 class="page-title">🗺️ Routes</h1>
<p class="page-sub">Add and manage the routes your trips run on.</p>

<a href="{% url 'add_route' %}" class="btn" style="margin-bottom:1rem;">➕ Add a route</a>

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>From</th>
                <th>To</th>
                <th>Distance</th>
                <th>Duration</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for r in routes %}
            <tr>
                <td>{{ r.id }}</td>
                <td>{{ r.source_city.city_name }}</td>
                <td>{{ r.destination_city.city_name }}</td>
                <td>{% if r.distance_km %}{{ r.distance_km }} km{% else %}—{% endif %}</td>
                <td>{% if r.estimated_duration_minutes %}{{ r.estimated_duration_minutes }} min{% else %}—{% endif %}
                </td>
                <td>
                    {% if r.is_active %}<span class="status-badge status-active">ACTIVE</span>
                    {% else %}<span class="status-badge status-inactive">INACTIVE</span>{% endif %}
                </td>
                <td>
                    <a href="{% url 'edit_route' r.id %}" class="btn" style="padding:5px 12px;">Edit</a>
                    <a href="{% url 'toggle_route' r.id %}" class="btn btn-danger" style="padding:5px 12px;">
                        {% if r.is_active %}Deactivate{% else %}Activate{% endif %}
                    </a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="7" style="text-align:center; color:var(--muted);">No routes yet.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}