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

{% block content %}
<div class="row">
  {# Left: general + technical relations #}
  <div class="col col-12 col-xl-6">
    <div class="card">
      <h2 class="card-header">{% trans "General" %}</h2>
      <table class="table table-hover attr-table">
        <tr>
          <th scope="row">{% trans "Service ID" %}</th>
          <td>{{ object|linkify }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Type" %}</th>
          <td>{{ object.get_type_display }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Description" %}</th>
          <td>{{ object.description|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Tenant" %}</th>
          <td>{{ object.tenant|linkify|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Status" %}</th>
          <td>{% badge object.get_status_display bg_color=object.get_status_color %}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Tags" %}</th>
          <td>
            {% for tag in object.tags.all %}
              {{ tag|linkify }}{% if not forloop.last %} {% endif %}
            {% empty %}
              {{ ''|placeholder }}
            {% endfor %}
          </td>
        </tr>
      </table>
    </div>

    <div class="card">
      <h2 class="card-header">{% trans "Devices & Interfaces" %}</h2>
      <table class="table table-hover attr-table">
        <tr>
          <th scope="row">{% trans "Devices" %}</th>
          <td>
            {% for device in object.devices.all %}
              {{ device|linkify }}{% if not forloop.last %}<br>{% endif %}
            {% empty %}
              {{ ''|placeholder }}
            {% endfor %}
          </td>
          <td class="text-end text-nowrap">
            <a href="{% url 'plugins:netbox_services:relate_devices' pk=object.pk %}" class="btn btn-sm btn-ghost-primary">{% trans "Assign" %}</a>
          </td>
        </tr>
        <tr>
          <th scope="row">{% trans "Interfaces" %}</th>
          <td>
            {% for iface in object.interfaces.all %}
              {{ iface|linkify }} <span class="text-muted">({{ iface.device }})</span>{% if not forloop.last %}<br>{% endif %}
            {% empty %}
              {{ ''|placeholder }}
            {% endfor %}
          </td>
          <td class="text-end text-nowrap">
            <a href="{% url 'plugins:netbox_services:relate_interfaces' pk=object.pk %}" class="btn btn-sm btn-ghost-primary">{% trans "Assign" %}</a>
          </td>
        </tr>
        <tr>
          <th scope="row">{% trans "Cables" %}</th>
          <td>
            {% for cable in object.cables.all %}
              {{ cable|linkify }}{% if not forloop.last %}<br>{% endif %}
            {% empty %}
              {{ ''|placeholder }}
            {% endfor %}
          </td>
          <td class="text-end text-nowrap">
            <a href="{% url 'plugins:netbox_services:relate_cables' pk=object.pk %}" class="btn btn-sm btn-ghost-primary">{% trans "Assign" %}</a>
          </td>
        </tr>
      </table>
    </div>

    <div class="card">
      <h2 class="card-header">{% trans "Network" %}</h2>
      <table class="table table-hover attr-table">
        <tr>
          <th scope="row">{% trans "VLANs" %}</th>
          <td>
            {% for vlan in object.vlans.all %}
              {{ vlan|linkify }}{% if not forloop.last %}<br>{% endif %}
            {% empty %}
              {{ ''|placeholder }}
            {% endfor %}
          </td>
          <td class="text-end text-nowrap">
            <a href="{% url 'plugins:netbox_services:relate_vlans' pk=object.pk %}" class="btn btn-sm btn-ghost-primary">{% trans "Assign" %}</a>
          </td>
        </tr>
        <tr>
          <th scope="row">{% trans "Prefixes" %}</th>
          <td>
            {% for prefix in object.prefixes.all %}
              {{ prefix|linkify }}{% if not forloop.last %}<br>{% endif %}
            {% empty %}
              {{ ''|placeholder }}
            {% endfor %}
          </td>
          <td class="text-end text-nowrap">
            <a href="{% url 'plugins:netbox_services:relate_prefixes' pk=object.pk %}" class="btn btn-sm btn-ghost-primary">{% trans "Assign" %}</a>
          </td>
        </tr>
        <tr>
          <th scope="row">{% trans "ASNs" %}</th>
          <td>
            {% for asn in object.asns.all %}
              {{ asn|linkify }}{% if not forloop.last %}<br>{% endif %}
            {% empty %}
              {{ ''|placeholder }}
            {% endfor %}
          </td>
          <td class="text-end text-nowrap">
            <a href="{% url 'plugins:netbox_services:relate_asns' pk=object.pk %}" class="btn btn-sm btn-ghost-primary">{% trans "Assign" %}</a>
          </td>
        </tr>
      </table>
    </div>

    <div class="card">
      <h2 class="card-header">{% trans "VPNs" %}</h2>
      <table class="table table-hover attr-table">
        <tr>
          <th scope="row">{% trans "VRFs" %}</th>
          <td>
            {% for vrf in object.vrfs.all %}
              {{ vrf|linkify }}{% if not forloop.last %}<br>{% endif %}
            {% empty %}
              {{ ''|placeholder }}
            {% endfor %}
          </td>
          <td class="text-end text-nowrap">
            <a href="{% url 'plugins:netbox_services:relate_vrfs' pk=object.pk %}" class="btn btn-sm btn-ghost-primary">{% trans "Assign" %}</a>
          </td>
        </tr>
        <tr>
          <th scope="row">{% trans "Route targets" %}</th>
          <td>
            {% for rt in object.route_targets.all %}
              {{ rt|linkify }}{% if not forloop.last %}<br>{% endif %}
            {% empty %}
              {{ ''|placeholder }}
            {% endfor %}
          </td>
          <td class="text-end text-nowrap">
            <a href="{% url 'plugins:netbox_services:relate_route_targets' pk=object.pk %}" class="btn btn-sm btn-ghost-primary">{% trans "Assign" %}</a>
          </td>
        </tr>
        <tr>
          <th scope="row">{% trans "L2VPNs" %}</th>
          <td>
            {% for l2vpn in object.l2vpns.all %}
              {{ l2vpn|linkify }}{% if not forloop.last %}<br>{% endif %}
            {% empty %}
              {{ ''|placeholder }}
            {% endfor %}
          </td>
          <td class="text-end text-nowrap">
            <a href="{% url 'plugins:netbox_services:relate_l2vpns' pk=object.pk %}" class="btn btn-sm btn-ghost-primary">{% trans "Assign" %}</a>
          </td>
        </tr>
        <tr>
          <th scope="row">{% trans "Tunnels" %}</th>
          <td>
            {% for tunnel in object.tunnels.all %}
              {{ tunnel|linkify }}{% if not forloop.last %}<br>{% endif %}
            {% empty %}
              {{ ''|placeholder }}
            {% endfor %}
          </td>
          <td class="text-end text-nowrap">
            <a href="{% url 'plugins:netbox_services:relate_tunnels' pk=object.pk %}" class="btn btn-sm btn-ghost-primary">{% trans "Assign" %}</a>
          </td>
        </tr>
      </table>
    </div>

    <div class="card">
      <h2 class="card-header">{% trans "Virtualization" %}</h2>
      <table class="table table-hover attr-table">
        <tr>
          <th scope="row">{% trans "Virtual machines" %}</th>
          <td>
            {% for vm in object.virtual_machines.all %}
              {{ vm|linkify }}{% if not forloop.last %}<br>{% endif %}
            {% empty %}
              {{ ''|placeholder }}
            {% endfor %}
          </td>
          <td class="text-end text-nowrap">
            <a href="{% url 'plugins:netbox_services:relate_virtual_machines' pk=object.pk %}" class="btn btn-sm btn-ghost-primary">{% trans "Assign" %}</a>
          </td>
        </tr>
      </table>
    </div>
  </div>

  {# Right: lifecycle + attachments #}
  <div class="col col-12 col-xl-6">
    <div class="card">
      <h2 class="card-header">{% trans "Lifecycle" %}</h2>
      <table class="table table-hover attr-table">
        <tr>
          <th scope="row">{% trans "Order date" %}</th>
          <td>{{ object.order_date|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Planned activation" %}</th>
          <td>{{ object.planned_activation|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Installed" %}</th>
          <td>{{ object.installed|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Contract start" %}</th>
          <td>{{ object.contract_start|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Contract end" %}</th>
          <td>{{ object.contract_end|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Requested disconnect" %}</th>
          <td>{{ object.requested_disconnect|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Decommissioned" %}</th>
          <td>{{ object.decommissioned|placeholder }}</td>
        </tr>
      </table>
    </div>

    <div class="card">
      <h2 class="card-header d-flex justify-content-between align-items-center">
        {% trans "Attachments" %}
        <a href="{% url 'plugins:netbox_services:service_attachment_add' pk=object.pk %}" class="btn btn-sm btn-green">
          <i class="mdi mdi-plus-thick"></i> {% trans "Add" %}
        </a>
      </h2>
      <table class="table table-hover attr-table">
        {% for attachment in object.attachments.all %}
        <tr>
          <td>
            {% if attachment.file %}
              <a href="{{ attachment.file.url }}" target="_blank" rel="noopener">{{ attachment }}</a>
            {% else %}
              {{ attachment }}
            {% endif %}
            {% if attachment.description %}<br><span class="text-muted">{{ attachment.description }}</span>{% endif %}
          </td>
          <td class="text-end text-nowrap">
            <a href="{% url 'plugins:netbox_services:service_attachment_delete' pk=object.pk attachment_pk=attachment.pk %}" class="btn btn-sm btn-red" title="{% trans 'Delete' %}">
              <i class="mdi mdi-trash-can-outline"></i>
            </a>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="2">{{ ''|placeholder }}</td>
        </tr>
        {% endfor %}
      </table>
    </div>
  </div>
</div>
{% endblock %}