{% extends 'base.html' %}
{% load i18n %}
{% block title %}
    {% trans "Organization Details" %}
{% endblock title %}
{% block content %}
    <main class="py-5  min-vh-80 d-flex justify-content-center align-items-center">
        <div class="container py-4">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-8 col-xl-6">
                    <div class="card shadow-lg border-0 rounded-4 overflow-hidden animate__animated animate__fadeInUp">
                        <div class="card-header bg-gradient py-4 border-0 rounded-top-4">
                            <h2 class="card-title mb-0 fs-3 fw-bold  text-center">
                                <i class="fas fa-building me-2"></i>
                                {{ organization.get_local_name }}
                            </h2>
                        </div>
                        <div class="card-body p-4 p-md-5">
                            <ul class="list-group list-group-flush rounded-3 border">
                                <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                                    <div class=" fw-semibold">
                                        <i class="fas fa-id-card-alt me-2 text-primary"></i>
                                        {% trans "CRN" %}:
                                    </div>
                                    <span class="">{{ organization.crn }}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                                    <div class=" fw-semibold">
                                        <i class="fas fa-receipt me-2 text-primary"></i>
                                        {% trans "VRN" %}:
                                    </div>
                                    <span class="">{{ organization.vrn }}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                                    <div class="fw-semibold">
                                        <i class="fas fa-phone-alt me-2 text-primary"></i>
                                        {% trans "Phone" %}:
                                    </div>
                                    <span class="">{{ organization.phone_number }}</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center p-3">
                                    <div class="fw-semibold">
                                        <i class="fas fa-map-marker-alt me-2 text-primary"></i>
                                        {% trans "Address" %}:
                                    </div>
                                    <span class=" text-end ms-3">{{ organization.address }}</span>
                                </li>
                            </ul>
                            <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mt-4 pt-2">
                                {% if perms.inventory.change_organization %}
                                    <a href="{% url 'organization_update' request.dealer.slug organization.slug %}"
                                       class="btn btn-phoenix-primary btn-lg flex-grow-1"><i class="fas fa-edit me-2"></i>{% trans "Edit Details" %}</a>
                                {% endif %}
                                {% if perms.inventory.delete_organization %}
                                    <button class="btn btn-phoenix-danger btn-lg delete-btn flex-grow-1"
                                            data-url="{% url 'organization_delete' request.dealer.slug organization.slug %}"
                                            data-message="Are you sure you want to delete this organization?"
                                            data-bs-toggle="modal"
                                            data-bs-target="#deleteModal">
                                        <i class="fas fa-trash me-2"></i>{% trans 'Delete' %}
                                    </button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    {% include 'modal/delete_modal.html' %}
{% endblock %}