{% extends 'settings/index.html' %}

{% block header_text %}<h1><i class="fa-solid fa-trash-can"></i> Delete Repository</h1>{% endblock %}

{% block main %}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
  <style>
    .repo-name {
      font-weight: bold;
      font-size: 1.2rem;
      margin: 1rem 0;
      color: #dc3545;
    }
    .actions {
      display: flex; gap: 1rem; justify-content: left; margin-top: 1.5rem;
    }
    button {
      background: #dc3545; color: #fff;
      border: none; border-radius: 5px; padding: 0.6rem 1.2rem;
      font-size: 1rem; cursor: pointer;
      display: flex; align-items: center; gap: 0.5rem; text-decoration: none; justify-content: center;
      transition: background 0.2s;
    }
    .cancel {
      background: #6c757d;
    }
    @media (max-width: 600px) {
      .container { max-width: 98vw; }
      .confirm-box { padding: 1rem; }
    }
  </style>
  <div class="container">
      <p>Are you sure you want to <strong>delete</strong> the following repository?</p>
      <div class="repo-name"><i class="fa-solid fa-book"></i> {{ repository.name }}</div>
      <form method="post" style="margin-top:1.5rem;">
        <input type="hidden" name="name" value="{{ repository.name }}">
        <div class="actions">
          <button type="submit"><i class="fa-solid fa-trash"></i> Yes, delete</button>
          <button type="button" onclick="history.back()" class="cancel"><i class="fa-solid fa-arrow-left"></i> Cancel</button>
        </div>
      </form>
  </div>
{% endblock %}