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

{% block tabs %}
  {% include 'netbox_assets/inc/asset_edit_header.html' with active_tab='add' %}
{% endblock tabs %}

{% block form %}
    {% render_errors form %}
    <div class="field-group mb-5">
        <div class="row">
          <h2 class="col-9 offset-3">General</h2>
        </div>
        {% render_field form.name %}
        {% render_field form.asset_tag %}
        {% render_field form.description %}
        {% render_field form.tags %}
        {% render_field form.status %}
         {% render_field form.role %}
    </div>

    <div class="field-group mb-5">
        <div class="row">
          <h2 class="col-9 offset-3">Hardware</h2>
        </div>
        {% render_field form.serial %}
        {% render_field form.manufacturer %}
        <div class="row">
          <div class="col-9 offset-3">
          <ul class="nav nav-pills mb-1" role="tablist">
            <li role="presentation" class="nav-item">
                <a class="nav-link{% if form.initial.device_type or form.no_hardware_type %} active{% endif %}" href="#device_type" role="tab" data-bs-toggle="tab">Device</a>
              </li>
            <li role="presentation" class="nav-item">
                <a class="nav-link{% if form.initial.module_type %} active{% endif %}" href="#module_type" role="tab" data-bs-toggle="tab">Module</a>
              </li>
            <li role="presentation" class="nav-item">
                <a class="nav-link{% if form.initial.rack_type %} active{% endif %}" href="#rack_type" role="tab" data-bs-toggle="tab">Rack</a>
              </li>
          </ul>
          </div>
        </div>
        <div class="tab-content p-0 border-0">
          <div class="tab-pane{% if form.initial.device_type or form.no_hardware_type %} active{% endif %}" id="device_type">
            {% render_field form.device_type %}
          </div>
          <div class="tab-pane{% if form.initial.module_type %} active{% endif %}" id="module_type">
            {% render_field form.module_type %}
          </div>
          <div class="tab-pane{% if form.initial.rack_type %} active{% endif %}" id="rack_type">
            {% render_field form.rack_type %}
          </div>
        </div>
    </div>

    <div class="field-group mb-5">
        <div class="row">
          <h2 class="col-9 offset-3">Tenancy</h2>
        </div>
        {% render_field form.owning_tenant %}
        {% render_field form.tenant %}
        {% render_field form.contact_group %}
        {% render_field form.contact %}
    </div>

    <div class="field-group mb-5">
        <div class="row">
          <h2 class="col-9 offset-3">Location</h2>
        </div>
        {% render_field form.storage_site %}
        {% render_field form.storage_location %}
    </div>

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

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

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

{% endblock %}