{% extends "admin/base_site.html" %}
{% load i18n admin_urls static %}

{% block extrastyle %}
  {{ block.super }}
  <style>
    .delete-warning {
      background: #ffebee;
      border: 2px solid #f44336;
      border-radius: 4px;
      padding: 20px;
      margin: 20px 0;
    }
    .delete-warning h2 {
      color: #d32f2f;
      margin-top: 0;
    }
    .confirmation-input {
      font-family: monospace;
      font-size: 16px;
      padding: 10px;
      border: 2px solid #f44336;
      border-radius: 4px;
      width: 100%;
      max-width: 400px;
    }
    .database-info {
      background: #fff3e0;
      border-left: 4px solid #ff9800;
      padding: 15px;
      margin: 15px 0;
    }
    .confirmation-section {
      margin: 30px 0;
    }
    .btn-danger {
      background: #f44336;
      color: white;
    }
    .btn-danger:hover {
      background: #d32f2f;
    }
  </style>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
  <a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
  &rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
  &rsaquo; <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
  &rsaquo; <a href="{% url opts|admin_urlname:'change' object.pk|admin_urlquote %}">{{ object|truncatewords:"18" }}</a>
  &rsaquo; {% translate 'Delete' %}
</div>
{% endblock %}

{% block content %}
<div id="content-main">
  <div class="delete-warning">
    <h2>⚠️ {% translate 'WARNING: Database Will Be Permanently Deleted' %}</h2>
    
    <p><strong>{% translate 'You are about to delete a database tenant.' %}</strong></p>
    
    <div class="database-info">
      <h3>{% translate 'The following database will be DELETED:' %}</h3>
      <ul>
        <li><strong>{% translate 'Tenant:' %}</strong> {{ object.name }} ({{ object.slug }})</li>
        <li><strong>{% translate 'Database:' %}</strong> {{ database_name }}</li>
        <li><strong>{% translate 'All data in this database will be permanently lost.' %}</strong></li>
      </ul>
    </div>
    
    <p style="color: #d32f2f; font-weight: bold;">
      {% translate 'This action cannot be undone. The database and all its data will be permanently removed from the PostgreSQL server.' %}
    </p>
  </div>

  <form method="post">
    {% csrf_token %}
    
    <div class="confirmation-section">
      <h3>{% translate 'Type the confirmation text to proceed:' %}</h3>
      <p>
        {% translate 'To confirm deletion, please type:' %} 
        <code style="background: #ffebee; padding: 5px 10px; font-weight: bold; color: #d32f2f;">{{ expected_confirmation }}</code>
      </p>
      
      <input 
        type="text" 
        name="confirm_delete_database" 
        class="confirmation-input" 
        placeholder="{% translate 'Type the confirmation text here' %}"
        autocomplete="off"
        autofocus
      >
    </div>
    
    <div class="submit-row">
      <input type="submit" class="btn btn-danger" value="{% translate 'Yes, Delete Tenant and Database' %}">
      <a href="{% url opts|admin_urlname:'change' object.pk|admin_urlquote %}" class="button cancel-link">
        {% translate 'No, Take Me Back' %}
      </a>
    </div>
  </form>
</div>
{% endblock %}