{% load form_helpers %}
{% load i18n %}

{% for field in form.hidden_fields %}
  {{ field }}
{% endfor %}

<div class="field-group my-5">
  <div class="row">
    <h2 class="col-9 offset-3">{% trans "Device" %}</h2>
  </div>
  {% render_field form.name %}
  {% render_field form.role %}
  {% render_field form.description %}
  {% render_field form.tags %}
</div>

<div class="field-group my-5">
  <div class="row">
    <h2 class="col-9 offset-3">{% trans "Hardware" %}</h2>
  </div>
  {% render_field form.device_type %}
  {% render_field form.airflow %}
  {% render_field form.serial %}
  {% render_field form.asset_tag %}
</div>

<div class="field-group my-5">
  <div class="row">
    <h2 class="col-9 offset-3">{% trans "Location" %}</h2>
  </div>
  {% render_field form.site %}
  {% render_field form.location %}
  {% render_field form.rack %}

  {% if object.device_type.is_child_device and object.parent_bay %}
    <div class="row mb-3">
      <label for="id_parent_device" class="col-sm-3 col-form-label">{% trans "Parent Device" %}</label>
      <div class="col">
        <input id="id_parent_device" class="form-control" value="{{ object.parent_bay.device }}" disabled />
      </div>
    </div>
    <div class="row mb-3">
      <label for="id_parent_bay" class="col-sm-3 col-form-label">{% trans "Parent Bay" %}</label>
      <div class="col">
        <div class="input-group">
          <input id="id_parent_bay" class="form-control" value="{{ object.parent_bay.name }}" disabled />
          <a href="{% url 'dcim:devicebay_depopulate' pk=object.parent_bay.pk %}" title="{% trans "Remove" %}" aria-label="{% trans "Remove" %}" class="btn btn-danger d-inline-flex align-items-center">
            <i class="mdi mdi-close-thick" aria-hidden="true"></i>&nbsp;{% trans "Remove" %}
          </a>
        </div>
      </div>
    </div>
  {% else %}
    {% render_field form.face %}
    {% render_field form.position %}
    {% render_field form.utilities_rack_width %}
    {% render_field form.utilities_horizontal_position %}
    {% render_field form.latitude %}
    {% render_field form.longitude %}
  {% endif %}
</div>

<div class="field-group my-5">
  <div class="row">
    <h2 class="col-9 offset-3">{% trans "Management" %}</h2>
  </div>
  {% render_field form.status %}
  {% render_field form.platform %}
  {% render_field form.config_template %}
  {% if object.pk %}
    {% render_field form.primary_ip4 %}
    {% render_field form.primary_ip6 %}
    {% render_field form.oob_ip %}
  {% endif %}
</div>

<div class="field-group my-5">
  <div class="row">
    <h2 class="col-9 offset-3">{% trans "Virtualization" %}</h2>
  </div>
  {% render_field form.cluster %}
</div>

<div class="field-group my-5">
  <div class="row">
    <h2 class="col-9 offset-3">{% trans "Tenancy" %}</h2>
  </div>
  {% render_field form.tenant_group %}
  {% render_field form.tenant %}
</div>

<div class="field-group my-5">
  <div class="row">
    <h2 class="col-9 offset-3">{% trans "Virtual Chassis" %}</h2>
  </div>
  {% render_field form.virtual_chassis %}
  {% render_field form.vc_position %}
  {% render_field form.vc_priority %}
</div>

<div class="field-group mb-5">
  <div class="row">
    <h2 class="col-9 offset-3">{% trans "Ownership" %}</h2>
  </div>
  {% render_field form.owner_group %}
  {% render_field form.owner %}
</div>

{% if form.custom_fields %}
  <div class="field-group my-5">
    <div class="row">
      <h2 class="col-9 offset-3">{% trans "Custom Fields" %}</h2>
    </div>
    {% render_custom_fields form %}
  </div>
{% endif %}

<div class="field-group my-5">
  <h2 class="text-center">{% trans "Local Config Context Data" %}</h2>
  {% render_field form.local_context_data %}
</div>

<div class="field-group mb-5">
  {% render_field form.comments %}
</div>

<div class="bg-primary-subtle border border-primary rounded-1 pt-3 px-3 mb-3">
  {% render_field form.changelog_message %}
</div>