{% extends 'layouts/base.html' %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Delete Patient" %} - PX360{% endblock %}

{% block content %}
<div class="p-6">
  <div class="max-w-lg mx-auto">
    <div class="card border-red-200">
      <div class="text-center mb-6">
        <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <i data-lucide="alert-triangle" class="w-8 h-8 text-red-600"></i>
        </div>
        <h1 class="text-2xl font-bold text-navy mb-2">{% trans "Delete Patient" %}</h1>
        <p class="text-slate">
          {% trans "Are you sure you want to delete this patient? This action cannot be undone." %}
        </p>
      </div>

      <div class="bg-light rounded-lg p-4 mb-6">
        <div class="flex items-center gap-3 mb-3">
          <i data-lucide="user" class="w-5 h-5 text-slate"></i>
          <div>
            <p class="font-semibold text-navy">{{ patient.get_full_name }}</p>
            <p class="text-sm text-slate">{% trans "MRN:" %} {{ patient.mrn }}</p>
          </div>
        </div>
        {% if patient.phone %}
        <div class="flex items-center gap-3 mb-2">
          <i data-lucide="phone" class="w-4 h-4 text-slate"></i>
          <p class="text-sm">{{ patient.phone }}</p>
        </div>
        {% endif %}
        {% if patient.email %}
        <div class="flex items-center gap-3">
          <i data-lucide="mail" class="w-4 h-4 text-slate"></i>
          <p class="text-sm">{{ patient.email }}</p>
        </div>
        {% endif %}
      </div>

      <form method="post">
        {% csrf_token %}
        <div class="flex gap-3 justify-center">
          <a href="{% url 'organizations:patient_detail' patient.pk %}" class="btn-secondary">
            {% trans "Cancel" %}
          </a>
          <button type="submit" class="btn-danger flex items-center gap-2">
            <i data-lucide="trash-2" class="w-4 h-4"></i>
            {% trans "Delete Patient" %}
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  lucide.createIcons();
</script>
{% endblock %}