{% 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">
<div class="row mb-3">
    <div class="col">
        <div class="card">
            <h2 class="card-header">{% trans "Fiber Management Summary" %}
                {% if show_on_map_url %}
                <div class="card-actions">
                    <a href="{{ show_on_map_url }}" class="btn btn-ghost-info btn-sm" title="{% trans 'Show on Map' %}">
                        <i class="mdi mdi-map-marker"></i> {% trans "Show on Map" %}
                    </a>
                </div>
                {% endif %}
            </h2>
            <div class="card-body">
                {# Stats bar #}
                <div class="row text-center mb-3">
                    <div class="col">
                        <h4>{{ stats.tray_count }}</h4>
                        <small class="text-muted">{% trans "Trays" %}</small>
                    </div>
                    <div class="col">
                        <h4>{{ stats.cable_count }}</h4>
                        <small class="text-muted">{% trans "Cables Connected" %}</small>
                    </div>
                    <div class="col">
                        <h4>{{ stats.fiber_cable_count }}</h4>
                        <small class="text-muted">{% trans "FiberCables" %}</small>
                    </div>
                    <div class="col">
                        <h4>{{ stats.strand_linked }}/{{ stats.strand_total }}</h4>
                        <small class="text-muted">{% trans "Strands Linked" %}</small>
                    </div>
                    <div class="col">
                        {% if plan %}
                            <h4>{% include "netbox_fms/inc/splice_plan_status_badge.html" with status=plan.status %}</h4>
                        {% else %}
                            <h4><span class="text-muted">{% trans "None" %}</span></h4>
                        {% endif %}
                        <small class="text-muted">{% trans "Splice Plan" %}</small>
                    </div>
                </div>

                {# Cable/Fiber status table #}
                {% if cable_rows %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>{% trans "Cable" %}</th>
                                <th>{% trans "Fiber Cable Type" %}</th>
                                <th>{% trans "Gland" %}</th>
                                <th>{% trans "Strands Linked" %}</th>
                                <th>{% trans "Actions" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in cable_rows %}
                                {% include "netbox_fms/htmx/fiber_overview_row.html" with row=row device=device %}
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-muted text-center py-3">
                    {% trans "No cables found on this device. Connect cables to see fiber status here." %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{# Tray Assignments section — HTMX refreshable #}
<div class="row mb-3">
    <div class="col">
        {% include "netbox_fms/htmx/tray_assignments_card.html" %}
    </div>
</div>

{# Splice Plan section #}
<div class="row mb-3">
    <div class="col">
        <div class="card">
            <h2 class="card-header">{% trans "Splice Plan" %}</h2>
            <div class="card-body">
                {% if plan %}
                    <p>
                        <strong>{{ plan.name }}</strong>
                        {% include "netbox_fms/inc/splice_plan_status_badge.html" with status=plan.status %}
                    </p>
                    <a href="{{ plan.get_absolute_url }}" class="btn btn-sm btn-outline-primary">
                        <i class="mdi mdi-eye"></i> {% trans "View Plan" %}
                    </a>
                {% else %}
                    <p class="text-muted">{% trans "No splice plan" %}</p>
                    <a href="{% url 'plugins:netbox_fms:spliceplan_add' %}?closure={{ device.pk }}" class="btn btn-sm btn-success">
                        <i class="mdi mdi-plus"></i> {% trans "Create Plan" %}
                    </a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% include 'inc/htmx_modal.html' %}
</div>
<script src="{% static 'netbox_fms/dist/fms-htmx.min.js' %}"></script>
{% endblock %}