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

{% block content %}
{% if not port_sync_valid %}
<div class="alert alert-warning d-flex align-items-center justify-content-between mb-3" role="alert">
    <div>
        <i class="mdi mdi-alert-circle-outline me-1"></i>
        {% trans "Port mappings are out of sync with the channel grid." %}
    </div>
    <button type="button" class="btn btn-sm btn-warning" id="wdm-sync-now"
            data-url="{% url 'plugins-api:netbox_wdm-api:wdmnode-sync-ports' object.pk %}?dry_run=false">
        <i class="mdi mdi-sync me-1"></i>{% trans "Sync Now" %}
    </button>
    <script>
    document.getElementById('wdm-sync-now').addEventListener('click', function() {
        const btn = this;
        btn.disabled = true;
        btn.innerHTML = '<i class="mdi mdi-loading mdi-spin me-1"></i>Syncing...';
        fetch(btn.dataset.url, {
            method: 'POST',
            headers: {'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json'},
        }).then(function() { location.reload(); })
          .catch(function() { location.reload(); });
    });
    </script>
</div>
{% endif %}
<div class="row mb-3">
    <div class="col col-md-6">
        <div class="card">
            <h5 class="card-header">{% trans "WDM Node" %}</h5>
            <table class="table table-hover attr-table">
                <tr>
                    <th scope="row">{% trans "Device" %}</th>
                    <td>{{ object.device|linkify }}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans "Node Type" %}</th>
                    <td>{{ object.get_node_type_display }}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans "Grid" %}</th>
                    <td>{{ object.get_grid_display }}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans "Channels" %}</th>
                    <td>{{ channel_count }}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans "Line Ports" %}</th>
                    <td>{{ line_port_count }}</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col col-md-6">
        <div class="card mb-3">
            <h5 class="card-header">{% trans "Channel Utilization" %}</h5>
            <div class="card-body">
                {% if channel_stats.total %}
                <div class="progress mb-3" style="height: 24px;" title="{{ channel_stats.available_disconnected }} Available">
                    {% if channel_stats.active_connected %}
                    <div class="progress-bar bg-success" role="progressbar" style="width: {{ channel_stats.active_connected_pct }}%" title="{{ channel_stats.active_connected }} Active + Connected">
                        {{ channel_stats.active_connected }}
                    </div>
                    {% endif %}
                    {% if channel_stats.active_disconnected %}
                    <div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: {{ channel_stats.active_disconnected_pct }}%" title="{{ channel_stats.active_disconnected }} Active + Disconnected">
                        {{ channel_stats.active_disconnected }}
                    </div>
                    {% endif %}
                    {% if channel_stats.reserved_connected %}
                    <div class="progress-bar bg-warning text-dark" role="progressbar" style="width: {{ channel_stats.reserved_connected_pct }}%" title="{{ channel_stats.reserved_connected }} Reserved + Connected">
                        {{ channel_stats.reserved_connected }}
                    </div>
                    {% endif %}
                    {% if channel_stats.reserved_disconnected %}
                    <div class="progress-bar bg-warning text-dark progress-bar-striped" role="progressbar" style="width: {{ channel_stats.reserved_disconnected_pct }}%" title="{{ channel_stats.reserved_disconnected }} Reserved + Disconnected">
                        {{ channel_stats.reserved_disconnected }}
                    </div>
                    {% endif %}
                    {% if channel_stats.available_connected %}
                    <div class="progress-bar bg-info text-dark" role="progressbar" style="width: {{ channel_stats.available_connected_pct }}%" title="{{ channel_stats.available_connected }} Available + Connected">
                        {{ channel_stats.available_connected }}
                    </div>
                    {% endif %}
                </div>
                <div class="d-flex flex-wrap gap-1 small">
                    <span class="rounded overflow-hidden d-inline-flex" style="height: 18px;"><span class="progress-bar bg-success px-2">{% trans "Active" %}</span></span>
                    <span class="rounded overflow-hidden d-inline-flex" style="height: 18px;"><span class="progress-bar bg-success progress-bar-striped px-2">{% trans "Active (no cable)" %}</span></span>
                    <span class="rounded overflow-hidden d-inline-flex" style="height: 18px;"><span class="progress-bar bg-warning text-dark px-2">{% trans "Reserved" %}</span></span>
                    <span class="rounded overflow-hidden d-inline-flex" style="height: 18px;"><span class="progress-bar bg-warning text-dark progress-bar-striped px-2">{% trans "Reserved (no cable)" %}</span></span>
                    <span class="rounded overflow-hidden d-inline-flex" style="height: 18px;"><span class="progress-bar bg-info text-dark px-2">{% trans "Connected" %}</span></span>
                    <span class="rounded overflow-hidden d-inline-flex" style="height: 18px;"><span class="progress-bar bg-secondary px-2">{% trans "Available" %}</span></span>
                    <span class="text-muted ms-auto align-self-center">{{ channel_stats.total }} {% trans "total" %}</span>
                </div>
                {% else %}
                <p class="text-muted mb-0">{% trans "No channels configured." %}</p>
                {% endif %}
            </div>
        </div>
        {% if object.description %}
        <div class="card">
            <h5 class="card-header">{% trans "Description" %}</h5>
            <div class="card-body">{{ object.description|markdown }}</div>
        </div>
        {% endif %}
        {% include 'inc/panels/tags.html' %}
        {% include 'inc/panels/custom_fields.html' %}
    </div>
</div>
{% plugin_full_width_page object %}
{% endblock %}