{% extends 'dcim/device/base.html' %}
{% load helpers %}
{% load i18n %}
{% load static %}

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

<div class="fms-component">

    {% 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">
            <form method="post" class="d-inline">
                {% csrf_token %}
                <button type="submit" class="btn btn-success">
                    <i class="mdi mdi-check-circle"></i> {% trans "Apply All Approved Plans" %}
                </button>
            </form>
        </div>
    </div>

    <div class="mb-3">
        <strong>{% trans "Plans included:" %}</strong>
        {% for plan in approved_plans %}
            <span class="badge text-bg-success">{{ plan.name }}{% if plan.project %} ({{ plan.project }}){% endif %}</span>
        {% endfor %}
    </div>

    {% for tray in diff %}
    <div class="card mb-3">
        <div class="card-header py-2 d-flex justify-content-between align-items-center">
            <span>
                <i class="mdi mdi-tray-full"></i>
                <strong>{{ tray.tray_name }}</strong>
            </span>
            <span class="text-muted small">
                {% if tray.add %}
                    <span class="fms-badge fms-badge--live">+{{ tray.add|length }}</span>
                {% endif %}
                {% if tray.remove %}
                    <span class="fms-badge fms-badge--protected">-{{ tray.remove|length }}</span>
                {% endif %}
                {% if tray.unchanged %}
                    <span class="text-muted">{{ tray.unchanged|length }} {% trans "kept" %}</span>
                {% endif %}
            </span>
        </div>
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0">
                <thead>
                    <tr>
                        <th style="width:80px">{% trans "Action" %}</th>
                        <th>{% trans "Fiber A" %}</th>
                        <th></th>
                        <th>{% trans "Fiber B" %}</th>
                        <th>{% trans "Plan" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for pair in tray.add %}
                    <tr>
                        <td><span class="fms-badge fms-badge--live">{% trans "Add" %}</span></td>
                        <td>{{ pair.name_a }}</td>
                        <td class="text-muted text-center">&harr;</td>
                        <td>{{ pair.name_b }}</td>
                        <td class="text-muted small">{{ pair.plan_name }}</td>
                    </tr>
                    {% endfor %}
                    {% for pair in tray.remove %}
                    <tr class="text-decoration-line-through" style="opacity:0.6">
                        <td><span class="fms-badge fms-badge--protected">{% trans "Remove" %}</span></td>
                        <td>{{ pair.name_a }}</td>
                        <td class="text-muted text-center">&harr;</td>
                        <td>{{ pair.name_b }}</td>
                        <td class="text-muted small">{{ pair.plan_name }}</td>
                    </tr>
                    {% endfor %}
                    {% for pair in tray.unchanged %}
                    <tr class="text-muted">
                        <td><span class="badge text-bg-secondary">{% trans "Keep" %}</span></td>
                        <td>{{ pair.name_a }}</td>
                        <td class="text-center">&harr;</td>
                        <td>{{ pair.name_b }}</td>
                        <td class="text-muted small">{{ pair.plan_name }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endfor %}

    {% 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 approved plans to apply." %}</p>
    </div>
    {% endif %}

</div>
{% endblock %}