<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Delete URL</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
  <h2 class="text-danger">Delete Confirmation</h2>
  <p>Are you sure you want to delete this URL?</p>

  <ul class="list-group mb-3">
    <li class="list-group-item"><strong>ID:</strong> <%= url.id %></li>
    <li class="list-group-item"><strong>Original URL:</strong> <%= url.original_url %></li>
    <li class="list-group-item"><strong>Short URL:</strong> <%= basePath %>/<%= url.short_code %></li>
  </ul>

  <form action="<%= basePath %>/delete/<%= url.id %>" method="POST">
    <div class="mb-3">
      <label for="pin" class="form-label">Enter PIN to confirm:</label>
      <input type="password" id="pin" name="pin" class="form-control" required>
    </div>
    <button type="submit" class="btn btn-danger">Confirm Delete</button>
    <a href="<%= basePath %>/app" class="btn btn-secondary">Cancel</a>
  </form>
</div>
</body>
</html>
