{% extends 'base.html' %}
{% block title %}Cities{% endblock %}
{% block topbar_title %}City Management{% endblock %}
{% block content %}
<h1 class="page-title">🏙️ Cities</h1>
<p class="page-sub">The canonical city list operators pick from when creating routes.</p>

<form method="post" class="card" style="max-width:420px; margin-bottom:1.5rem; display:flex; gap:.5rem;">
    {% csrf_token %}
    <input type="hidden" name="action" value="add">
    <input type="text" name="city_name" placeholder="New city name" required
           style="flex:1; padding:10px 14px; border:1px solid var(--border); border-radius:10px;">
    <button class="btn" type="submit">➕ Add</button>
</form>

<div class="table-container">
    <table>
        <thead><tr><th>ID</th><th>City</th><th>Action</th></tr></thead>
        <tbody>
        {% for c in cities %}
            <tr>
                <td>{{ c.id }}</td>
                <td>{{ c.city_name }}</td>
                <td>
                    <form method="post" onsubmit="return confirm('Delete this city?');">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="delete">
                        <input type="hidden" name="city_id" value="{{ c.id }}">
                        <button class="btn btn-danger" type="submit" style="padding:6px 12px;">Delete</button>
                    </form>
                </td>
            </tr>
        {% empty %}
            <tr><td colspan="3" style="text-align:center; color:var(--muted);">No cities yet.</td></tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}