{% load i18n %}
<div class="card">
  <h2 class="card-header">{% trans "Dimensions" %}</h2>
  <table class="table table-hover attr-table">
    <tr>
      <th scope="row">{% trans "Form factor" %}</th>
      <td>{{ object.get_form_factor_display|placeholder }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "Width" %}</th>
      <td>{{ object.get_width_display }}</td>
    </tr>
    <tr>
      <th scope="row">{% trans "Height" %}</th>
      <td>{{ object.u_height }}U</td>
    </tr>
    <tr>
      <th scope="row">{% trans "Outer Width" %}</th>
      <td>
        {% if object.outer_width %}
          {{ object.outer_width }} {{ object.get_outer_unit_display }}
        {% else %}
          {{ ''|placeholder }}
        {% endif %}
      </td>
    </tr>
    <tr>
      <th scope="row">{% trans "Outer Depth" %}</th>
      <td>
        {% if object.outer_depth %}
          {{ object.outer_depth }} {{ object.get_outer_unit_display }}
        {% else %}
          {{ ''|placeholder }}
        {% endif %}
      </td>
    </tr>
    <tr>
      <th scope="row">{% trans "Mounting Depth" %}</th>
      <td>
        {% if object.mounting_depth %}
          {{ object.mounting_depth }} {% trans "Millimeters" %}
        {% else %}
          {{ ''|placeholder }}
        {% endif %}
      </td>
    </tr>
  </table>
</div>