{% load dlux_tags %}
{% load dlux_translation %}

<div class="row g-3 px-2">
    {% for field in auto_detail_fields %}
        <div class="col-md-6 col-lg-4">
            <div class="mb-3">
                <div class="info-label text-muted small fw-bold text-uppercase tracking-wider mb-1">{{ field.label }}</div>
                <div class="info-value text-dark">
                    {% if field.is_html %}
                        {{ field.value|safe }}
                    {% else %}
                        {{ field.value }}
                    {% endif %}
                </div>
            </div>
        </div>
    {% empty %}
        {% if not extra_detail_fields %}
        <div class="col-12 text-center text-muted py-4">
            <i class="bi bi-inbox fs-1 d-block mb-2"></i>
            {{ DLUX_STRINGS.no_details|default:"No details recorded." }}
        </div>
        {% endif %}
    {% endfor %}

    {% comment %}
    Rows a model computes for itself, from `get_modal_context()`.

    `auto_detail_fields` is built from stored fields, and it is built *after*
    that context is merged, so a model cannot append to it — a derived value
    (a price converted at today's rate, a total that is a property) has nowhere
    else to go. Returning `extra_detail_fields` is how a model adds one, and
    they render after the generated rows.
    {% endcomment %}
    {% for field in extra_detail_fields %}
        <div class="col-md-6 col-lg-4">
            <div class="mb-3">
                <div class="info-label text-muted small fw-bold text-uppercase tracking-wider mb-1">{{ field.label }}</div>
                <div class="info-value text-dark fw-semibold">
                    {% if field.is_html %}
                        {{ field.value|safe }}
                    {% else %}
                        {{ field.value }}
                    {% endif %}
                </div>
            </div>
        </div>
    {% endfor %}
</div>

{% if related_object %}
    <hr class="my-4">
    <h6 class="fw-bold mb-3 text-secondary"><i class="bi bi-link-45deg me-1"></i> {{ DLUX_STRINGS.label_related_object|default:"Related Object" }}</h6>
    <div class="glass-card mb-4 p-3 bg-light rounded border">
        <div class="info-label-sm mb-1 text-primary fw-bold">{{ related_object_model }}</div>
        <div class="info-value">{{ related_object }}</div>
        <div class="text-muted small mt-1">{{ DLUX_STRINGS.label_id|default:"ID" }}: {{ related_object.pk }}</div>
    </div>
{% endif %}

{% dlux_audit_trail object %}

{% if request.GET.action == 'view' and not ribbon %}
<div class="mt-4 text-end border-top pt-3">
    <button type="button" class="btn btn-outline-secondary px-4 rounded-pill dlux-back-link dynamic-back-btn">
        <i class="bi bi-arrow-left me-1"></i> {{ DLUX_STRINGS.btn_back|default:"رجوع" }}
    </button>
</div>
{% endif %}