{% extends 'base.html' %}
{% block title %}Schedules{% endblock %}
{% block topbar_title %}Schedule Management{% endblock %}
{% block content %}
<h1 class="page-title">🗓️ Trips / Schedules</h1>
<p class="page-sub">Create and manage the trips passengers can book.</p>

<a href="{% url 'add_schedule' %}" class="btn" style="margin-bottom:1rem;">➕ New trip</a>

<div class="table-container">
    <table>
        <thead>
            <tr>
                <th>Route</th>
                <th>Bus</th>
                <th>Departure</th>
                <th>Fare</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for s in schedules %}
            <tr>
                <td>{{ s.route.source_city.city_name }} → {{ s.route.destination_city.city_name }}</td>
                <td>{{ s.bus.bus_name }}</td>
                <td>{{ s.departure_time|date:"Y-m-d H:i" }}</td>
                <td>Rs. {{ s.fare }}</td>
                <td>
                    {% if s.status == 'ACTIVE' %}<span class="status-badge status-active">ACTIVE</span>
                    {% elif s.status == 'CANCELLED' %}<span class="status-badge status-inactive">CANCELLED</span>
                    {% else %}<span class="status-badge status-confirmed">{{ s.status }}</span>{% endif %}
                </td>
                <td>
                    {% if s.status == 'ACTIVE' %}
                    <a href="{% url 'edit_schedule' s.id %}" class="btn" style="padding:5px 12px;">Edit</a>
                    <a href="{% url 'cancel_schedule' s.id %}" class="btn btn-danger" style="padding:5px 12px;">Cancel
                        trip</a>
                    {% else %}<span style="color:var(--muted);">—</span>{% endif %}
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" style="text-align:center; color:var(--muted);">No trips yet.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}