<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">
   

    <!-- Stations Table -->
    <table class="table table-bordered">
        <thead class="table-dark">
            <tr>
                <th>Location</th>
                <th>Map Link</th>
                <th>Capacity</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>12.9716, 77.5946</td>
                <td><a href="https://maps.google.com" target="_blank">View Map</a></td>
                <td>50</td>
                <td>
                    <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#editStationModal1">Edit</button>
                    <button class="btn btn-danger btn-sm">Delete</button>
                </td>
            </tr>
        </tbody>
    </table>

    <!-- Add Station Form -->
    <h3 class="mt-4">Add New Station</h3>
    <form method="post">
        {% csrf_token %}
        <div class="mb-3">
            <label class="form-label">Location </label>
            <input type="text" class="form-control" placeholder="Enter location ">
        </div>
        <div class="mb-3">
            <label class="form-label">Google Maps URL</label>
            <input type="url" class="form-control" placeholder="Enter Google Maps link">
        </div>
        <div class="mb-3">
            <label class="form-label">Capacity</label>
            <input type="number" class="form-control" placeholder="Enter station capacity">
        </div>
        <button type="submit" class="btn btn-primary">Add Station</button>
    </form>
</div>

<!-- Edit Station Modal -->
<div class="modal fade" id="editStationModal1" tabindex="-1" aria-labelledby="editStationModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editStationModalLabel">Edit Station</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label class="form-label">Location (Latitude, Longitude)</label>
                        <input type="text" class="form-control" value="12.9716, 77.5946">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Google Maps URL</label>
                        <input type="url" class="form-control" value="https://maps.google.com">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Capacity</label>
                        <input type="number" class="form-control" value="50">
                    </div>
                    <button type="submit" class="btn btn-success">Save Changes</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
