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

{% block title %}{% trans "Delete Category" %}{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">{% trans "Delete Category" %}</h1>
            <p class="text-muted mb-0">{% trans "Confirm deletion of standard category" %}</p>
        </div>
        <a href="{% url 'standards:category_list' %}" class="btn btn-outline-secondary">
            {% action_icon "back" %} {% trans "Back to Categories" %}
        </a>
    </div>

    <div class="row">
        <div class="col-12 col-lg-8">
            <div class="card">
                <div class="card-body">
                    <div class="alert alert-warning">
                        {% action_icon "warning" %}
                        <strong>{% trans "Warning:" %}</strong> {% trans "This action cannot be undone." %}
                    </div>

                    <h5>{% trans "Are you sure you want to delete this category?" %}</h5>

                    <div class="table mt-3">
                        <table class="table table-sm">
                            <tr>
                                <th width="30%">{% trans "Order" %}</th>
                                <td><span class="badge bg-secondary">{{ category.order }}</span></td>
                            </tr>
                            <tr>
                                <th>{% trans "Name" %}</th>
                                <td><strong>{{ category.name }}</strong></td>
                            </tr>
                            <tr>
                                <th>{% trans "Arabic Name" %}</th>
                                <td>{{ category.name_ar|default:"-" }}</td>
                            </tr>
                            <tr>
                                <th>{% trans "Description" %}</th>
                                <td>{{ category.description|default:"-" }}</td>
                            </tr>
                        </table>
                    </div>

                    <form method="post" class="mt-4">
                        {% csrf_token %}
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-danger">
                                {% action_icon "delete" %} {% trans "Delete Category" %}
                            </button>
                            <a href="{% url 'standards:category_list' %}" class="btn btn-secondary">
                                {% trans "Cancel" %}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">{% trans "Impact" %}</h5>
                </div>
                <div class="card-body">
                    <p class="small text-muted">
                        {% trans "Deleting this category will affect:" %}
                    </p>
                    <ul class="small">
                        <li>{% trans "All standards linked to this category" %}</li>
                        <li>{% trans "Compliance records for those standards" %}</li>
                        <li>{% trans "Any reports or analytics using this data" %}</li>
                    </ul>
                    <p class="small text-danger mt-3">
                        <strong>{% trans "Consider:" %}</strong> {% trans "You may want to mark this category as inactive instead of deleting it." %}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}