{% extends 'generic/object.html' %}
{% load helpers %}
{% load i18n %}
{% load static %}

{% block content %}
<link rel="stylesheet" href="{% static 'netbox_fms/css/fms-components.css' %}">

<div class="fms-component">

    {# Summary stats #}
    {% if diff %}
    <div class="d-flex gap-4 mb-3 align-items-center">
        {% if total_add %}
        <span>
            <span class="fms-badge fms-badge--live">{% trans "ADD" %}</span>
            <strong>{{ total_add }}</strong> {% trans "splices" %}
        </span>
        {% endif %}
        {% if total_remove %}
        <span>
            <span class="fms-badge fms-badge--protected">{% trans "REMOVE" %}</span>
            <strong>{{ total_remove }}</strong> {% trans "splices" %}
        </span>
        {% endif %}
        {% if total_unchanged %}
        <span class="text-muted">
            <strong>{{ total_unchanged }}</strong> {% trans "unchanged" %}
        </span>
        {% endif %}
        <div class="ms-auto">
            <span class="text-muted">
                <i class="mdi mdi-information-outline"></i> {% trans "Apply changes from the closure's Pending Work tab." %}
            </span>
        </div>
    </div>

    {# Per-tray diff tables #}
    {% for tray in diff %}
    {% include "netbox_fms/inc/diff_tray_card.html" %}
    {% endfor %}

    {# Invalid entries — tray on a different device #}
    {% if invalid_entries %}
    <div class="card mb-3 border-warning">
        <div class="card-header py-2 bg-warning bg-opacity-10 d-flex justify-content-between align-items-center">
            <span>
                <i class="mdi mdi-alert-outline text-warning"></i>
                <strong>{% trans "Invalid Entries" %}</strong>
                <span class="text-muted small">{% trans "(tray belongs to a different device — will be removed on apply)" %}</span>
            </span>
            <span class="fms-badge fms-badge--pending">{{ invalid_entries|length }}</span>
        </div>
        <div class="table-responsive">
            <table class="table table-sm mb-0" style="opacity:0.7">
                <thead>
                    <tr>
                        <th>{% trans "Fiber A" %}</th>
                        <th></th>
                        <th>{% trans "Fiber B" %}</th>
                        <th>{% trans "Tray (wrong device)" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for entry in invalid_entries %}
                    <tr>
                        <td>{{ entry.fiber_a }}</td>
                        <td class="text-muted text-center">&harr;</td>
                        <td>{{ entry.fiber_b }}</td>
                        <td class="text-warning">{{ entry.tray }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {# Recent changelog messages #}
    {% if changelog_messages %}
    <div class="card mb-3">
        <div class="card-header py-2">
            <i class="mdi mdi-history"></i>
            <strong>{% trans "Recent Changes" %}</strong>
        </div>
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0">
                <thead>
                    <tr>
                        <th style="width:180px">{% trans "Time" %}</th>
                        <th style="width:120px">{% trans "User" %}</th>
                        <th>{% trans "Message" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for entry in changelog_messages %}
                    <tr>
                        <td class="text-muted small">{{ entry.time|timesince }} {% trans "ago" %}</td>
                        <td>{{ entry.user }}</td>
                        <td>{{ entry.message }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    {% else %}
    <div class="text-muted text-center py-4">
        <i class="mdi mdi-check-circle-outline mdi-48px"></i>
        <p class="mt-2">{% trans "No changes to apply. The plan matches the live state." %}</p>
    </div>
    {% endif %}

</div>
{% endblock %}