{% extends 'generic/object.html' %}
{% load render_table from django_tables2 %}

{% block content %}
<div class="row g-3 mb-3">

  <div class="col-md-6">
    <div class="card">
      <h5 class="card-header">Carrier</h5>
      <div class="card-body">
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">Name</th>
            <td>{{ object.name }}</td>
          </tr>
          <tr>
            <th scope="row">Host Device</th>
            <td><a href="{{ object.host_device.get_absolute_url }}">{{ object.host_device }}</a></td>
          </tr>
          <tr>
            <th scope="row">Type</th>
            <td>{{ object.get_carrier_type_display }}</td>
          </tr>
          <tr>
            <th scope="row">Subtype</th>
            <td>{{ object.get_subtype_display|default:"—" }}</td>
          </tr>
          <tr>
            <th scope="row">Orientation</th>
            <td>{{ object.get_orientation_display }}</td>
          </tr>
          <tr>
            <th scope="row">Unit</th>
            <td>{{ object.get_unit_display }}</td>
          </tr>
          <tr>
            <th scope="row">Description</th>
            <td>{{ object.description|default:"—" }}</td>
          </tr>
        </table>
      </div>
    </div>

    {% include 'inc/panels/tags.html' %}
  </div>

  <div class="col-md-6">
    <div class="card">
      <h5 class="card-header">Geometry</h5>
      <div class="card-body">
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">Offset X</th>
            <td>{{ object.offset_x_mm }} mm</td>
          </tr>
          <tr>
            <th scope="row">Offset Y</th>
            <td>{{ object.offset_y_mm }} mm</td>
          </tr>
          {% if object.length_mm %}
          <tr>
            <th scope="row">Length</th>
            <td>{{ object.length_mm }} mm</td>
          </tr>
          <tr>
            <th scope="row">Capacity</th>
            <td>{{ object.capacity_units }} × {{ object.get_unit_display }}</td>
          </tr>
          {% endif %}
          {% if object.width_mm %}
          <tr>
            <th scope="row">Width</th>
            <td>{{ object.width_mm }} mm</td>
          </tr>
          <tr>
            <th scope="row">Height</th>
            <td>{{ object.height_mm }} mm</td>
          </tr>
          {% endif %}
        </table>
      </div>
    </div>
  </div>

</div>

<div class="row">
  <div class="col-12">
    <div class="card">
      <h5 class="card-header d-flex justify-content-between align-items-center">
        <span>Mounts</span>
        <a href="{% url 'plugins:netbox_cabinet_view:mount_add' %}?carrier={{ object.pk }}"
           class="btn btn-sm btn-primary">
          <i class="mdi mdi-plus-thick"></i> Add Mount
        </a>
      </h5>
      <div class="card-body table-responsive">
        {% render_table mount_table %}
      </div>
    </div>
  </div>
</div>
{% endblock content %}