{% 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">Mount</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_mount_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">Face</th>
            <td>{{ object.get_face_display|default:"Both" }}</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>Placements</span>
        <div class="d-flex gap-2">
          <form method="post" action="{% url 'plugins:netbox_cabinet_view:auto_provision' %}" class="d-inline">
            {% csrf_token %}
            <input type="hidden" name="device_pk" value="{{ object.host_device.pk }}">
            <input type="hidden" name="mount_pk" value="{{ object.pk }}">
            <button type="submit" class="btn btn-sm btn-outline-success"
                    title="Create one placement per unplaced bay on this mount's host device">
              <i class="mdi mdi-auto-fix"></i> Auto-provision from bays
            </button>
          </form>
          <a href="{% url 'plugins:netbox_cabinet_view:placement_add' %}?mount={{ object.pk }}"
             class="btn btn-sm btn-primary">
            <i class="mdi mdi-plus-thick"></i> Add Placement
          </a>
        </div>
      </h5>
      <div class="card-body table-responsive">
        {% render_table placement_table %}
      </div>
    </div>
  </div>
</div>
{% endblock content %}