{% extends 'generic/object_edit.html' %}
{% load static %}
{% load form_helpers %}
{% load helpers %}

{% block form %}
    <div class="field-group my-5">
      <div class="row mb-2">
        <h5 class="offset-sm-3">InventoryItem</h5>
      </div>
      {% render_field form.device %}
      {% render_field form.parent %}
      {% render_field form.name %}
      {% render_field form.label %}
      {% render_field form.role %}
      {% render_field form.description %}
      {% render_field form.tags %}
    </div>

    <div class="field-group my-5">
      <div class="row mb-2">
        <h5 class="offset-sm-3">Hardware</h5>
      </div>
      {% render_field form.manufacturer %}
      {% render_field form.part_id %}
      {% render_field form.serial %}
      {% render_field form.asset_tag %}
    </div>

    <div class="field-group my-5">
      <div class="row mb-2">
        <h5 class="offset-sm-3">Component Assignment</h5>
      </div>
      <div class="row mb-2 offset-sm-3">
        <ul class="nav nav-pills" role="tablist">
          <li role="presentation" class="nav-item">
              <button role="tab" type="button" id="consoleport_tab" data-bs-toggle="tab" aria-controls="consoleport" data-bs-target="#consoleport" class="nav-link {% if form.initial.consoleport or form.no_component %}active{% endif %}">
                Console Port
              </button>
            </li>
            <li role="presentation" class="nav-item">
              <button role="tab" type="button" id="consoleserverport_tab" data-bs-toggle="tab" aria-controls="consoleserverport" data-bs-target="#consoleserverport" class="nav-link {% if form.initial.consoleserverport %}active{% endif %}">
                Console Server Port
              </button>
            </li>
            <li role="presentation" class="nav-item">
              <button role="tab" type="button" id="frontport_tab" data-bs-toggle="tab" aria-controls="frontport" data-bs-target="#frontport" class="nav-link {% if form.initial.frontport %}active{% endif %}">
                Front Port
              </button>
            </li>
            <li role="presentation" class="nav-item">
              <button role="tab" type="button" id="interface_tab" data-bs-toggle="tab" aria-controls="interface" data-bs-target="#interface" class="nav-link {% if form.initial.interface %}active{% endif %}">
                Interface
              </button>
            </li>
            <li role="presentation" class="nav-item">
              <button role="tab" type="button" id="poweroutlet_tab" data-bs-toggle="tab" aria-controls="poweroutlet" data-bs-target="#poweroutlet" class="nav-link {% if form.initial.poweroutlet %}active{% endif %}">
                Power Outlet
              </button>
            </li>
            <li role="presentation" class="nav-item">
              <button role="tab" type="button" id="powerport_tab" data-bs-toggle="tab" aria-controls="powerport" data-bs-target="#powerport" class="nav-link {% if form.initial.powerport %}active{% endif %}">
                Power Port
              </button>
            </li>
            <li role="presentation" class="nav-item">
              <button role="tab" type="button" id="rearport_tab" data-bs-toggle="tab" aria-controls="rearport" data-bs-target="#rearport" class="nav-link {% if form.initial.rearport %}active{% endif %}">
                Rear Port
              </button>
            </li>
        </ul>
      </div>
      <div class="tab-content p-0 border-0">
        <div class="tab-pane {% if form.initial.consoleport or form.no_component %}active{% endif %}" id="consoleport" role="tabpanel" aria-labeled-by="consoleport_tab">
            {% render_field form.consoleport %}
          </div>
          <div class="tab-pane {% if form.initial.consoleserverport %}active{% endif %}" id="consoleserverport" role="tabpanel" aria-labeled-by="consoleserverport_tab">
            {% render_field form.consoleserverport %}
          </div>
          <div class="tab-pane {% if form.initial.frontport %}active{% endif %}" id="frontport" role="tabpanel" aria-labeled-by="frontport_tab">
            {% render_field form.frontport %}
          </div>
          <div class="tab-pane {% if form.initial.interface %}active{% endif %}" id="interface" role="tabpanel" aria-labeled-by="interface_tab">
            {% render_field form.interface %}
          </div>
          <div class="tab-pane {% if form.initial.poweroutlet %}active{% endif %}" id="poweroutlet" role="tabpanel" aria-labeled-by="poweroutlet_tab">
            {% render_field form.poweroutlet %}
          </div>
          <div class="tab-pane {% if form.initial.powerport %}active{% endif %}" id="powerport" role="tabpanel" aria-labeled-by="powerport_tab">
            {% render_field form.powerport %}
          </div>
          <div class="tab-pane {% if form.initial.rearport %}active{% endif %}" id="rearport" role="tabpanel" aria-labeled-by="rearport_tab">
            {% render_field form.rearport %}
          </div>
      </div>
    </div>

    {% if form.custom_fields %}
      <div class="field-group my-5">
        <div class="row mb-2">
          <h5 class="offset-sm-3">Custom Fields</h5>
        </div>
        {% render_custom_fields form %}
      </div>
    {% endif %}
{% endblock %}