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

{% block extra_controls %}
    {% if perms.dcim.add_frontport %}
    <a href="#"
       hx-get="{% url 'plugins:netbox_fms:provision_ports' %}?fiber_cable={{ object.pk }}"
       hx-target="#htmx-modal-content"
       data-bs-toggle="modal"
       data-bs-target="#htmx-modal"
       class="btn btn-outline-primary">
        <i class="mdi mdi-ethernet"></i> {% trans "Provision Ports" %}
    </a>
    {% endif %}
{% endblock extra_controls %}

{% 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 col-md-6">
        <div class="card">
            <h5 class="card-header">{% trans "Fiber Cable" %}</h5>
            <table class="table table-hover attr-table">
                <tr>
                    <th scope="row">{% trans "Cable" %}</th>
                    <td>{{ object.cable|linkify }}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans "Fiber Cable Type" %}</th>
                    <td>{{ object.fiber_cable_type|linkify }}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans "Manufacturer" %}</th>
                    <td>{{ object.fiber_cable_type.manufacturer|linkify }}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans "Construction" %}</th>
                    <td>{{ object.fiber_cable_type.get_construction_display }}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans "Fiber Type" %}</th>
                    <td>{{ object.cable.get_type_display }}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans "Strand Count" %}</th>
                    <td>{{ object.fiber_cable_type.strand_count }}</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col col-md-6">
        <div class="card">
            <h5 class="card-header">{% trans "Identification" %}</h5>
            <table class="table table-hover attr-table">
                <tr>
                    <th scope="row">{% trans "Serial Number" %}</th>
                    <td>{{ object.serial_number|placeholder }}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans "Install Date" %}</th>
                    <td>{{ object.install_date|placeholder }}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans "Installed by" %}</th>
                    <td>{{ object.installed_by|linkify|placeholder }}</td>
                </tr>
                <tr>
                    <th scope="row">{% trans "Glass Length" %}</th>
                    <td>
                        {% if object.glass_length is not None %}
                            {{ object.glass_length }} {{ object.cable.length_unit|default:'' }}
                        {% else %}
                            {{ ''|placeholder }}
                        {% endif %}
                    </td>
                </tr>
            </table>
        </div>
        <div class="card mt-3">
            <h5 class="card-header">{% trans "Sheath Marks" %}</h5>
            <table class="table table-hover attr-table">
                <tr>
                    <th scope="row">{% trans "Start mark" %}</th>
                    <td>
                        {% if object.start_mark is not None %}
                            {{ object.start_mark }} {{ object.fiber_cable_type.get_mark_unit_display|default:'' }}
                        {% else %}
                            {{ ''|placeholder }}
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th scope="row">{% trans "End mark" %}</th>
                    <td>
                        {% if object.end_mark is not None %}
                            {{ object.end_mark }} {{ object.fiber_cable_type.get_mark_unit_display|default:'' }}
                        {% else %}
                            {{ ''|placeholder }}
                        {% endif %}
                    </td>
                </tr>
            </table>
        </div>
        <div class="card mt-3">
            <h5 class="card-header">{% trans "Strand Utilization" %}</h5>
            <div class="card-body">
                {% if strand_stats.total > 0 %}
                <div class="progress mb-2" style="height: 24px;">
                    {% if strand_stats.active_pct %}
                    <div class="progress-bar bg-primary" role="progressbar" style="width: {{ strand_stats.active_pct }}%" title="{{ strand_stats.active }} Active">
                        {{ strand_stats.active }}
                    </div>
                    {% endif %}
                    {% if strand_stats.available_pct %}
                    <div class="progress-bar bg-secondary" role="progressbar" style="width: {{ strand_stats.available_pct }}%" title="{{ strand_stats.available }} Available">
                        {{ strand_stats.available }}
                    </div>
                    {% endif %}
                </div>
                <div class="d-flex justify-content-between">
                    <small><span class="fms-badge fms-badge--live">{{ strand_stats.active }}</span> {% trans "Active" %}</small>
                    <small><span class="fms-badge fms-badge--draft">{{ strand_stats.available }}</span> {% trans "Available" %}</small>
                    <small class="text-muted">{{ strand_stats.total }} {% trans "total" %}</small>
                </div>
                {% else %}
                <p class="text-muted mb-0">{% trans "No strands." %}</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% if object.notes %}
<div class="row mb-3">
    <div class="col col-md-12">
        <div class="card">
            <h5 class="card-header">{% trans "Notes" %}</h5>
            <div class="card-body">{{ object.notes|markdown }}</div>
        </div>
    </div>
</div>
{% endif %}
{% plugin_full_width_page object %}
</div>
{% endblock %}