{% extends 'base.html' %}
{% load i18n %}
{% block title %}{% trans "View Vendor" %}{% endblock title %}

{% block content %}
<!-- Delete Modal -->
<div class="modal fade" id="deleteModal"
     data-bs-backdrop="static"
     data-bs-keyboard="false"
     tabindex="-1"
     aria-labelledby="deleteModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="bi bi-exclamation-diamond-fill"></i> 
                    {% trans "Delete Vendor" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <p class="mb-0 text-danger fw-bold">
                    {% trans "Are you sure you want to delete this vendor?" %}
                </p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                    {% trans "No" %}
                </button>
                <a type="button" class="btn btn-danger btn-sm" href="{% url 'vendor_delete' vendor.id %}">
                    {% trans "Yes" %}
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Vendor Details -->
<div class="container mt-4">
    <div class="card shadow rounded">
            <p class="card-header bg-primary text-white mb-0 fs-5">{% trans "Vendor Details" %}</p>
        <div class="card-body">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <strong>{% trans "Name" %}:</strong> {{ vendor.get_local_name }}
                </li>
                <li class="list-group-item">
                    <strong>{% trans "Contact Person" %}:</strong> {{ vendor.contact_person }}
                </li>
                <li class="list-group-item">
                    <strong>{% trans "Phone Number" %}:</strong> {{ vendor.phone_number }}
                </li>
                <li class="list-group-item">
                    <strong>{% trans "Email" %}:</strong> {{ vendor.email }}
                </li>
                <li class="list-group-item">
                    <strong>{% trans "Address" %}:</strong> {{ vendor.address }}
                </li>
            </ul>
        </div>
        <div class="card-footer d-flex justify-content-between">
            <a class="btn btn-sm btn-primary" href="{% url 'vendor_update' vendor.id %}">
               {% trans "Edit" %}
            </a>
            <button class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
                 {% trans "Delete" %}
            </button>
        </div>
    </div>
</div>
{% endblock %}