{% 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 %}
    {% include "netbox_fms/inc/diff_tray_card.html" with show_plan=True %}
    {% 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 %}