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

{% block form %}
  <div class="field-group my-5">
    <div class="row mb-2">
      <h5 class="offset-sm-3">{% trans "Service" %}</h5>
    </div>

    {# Device/VM selection #}
    <div class="row mb-2">
      <div class="offset-sm-3">
        <ul class="nav nav-pills" role="tablist">
          <li role="presentation" class="nav-item">
            <button role="tab" type="button" id="device_tab" data-bs-toggle="tab" aria-controls="device" data-bs-target="#device" class="nav-link {% if not form.initial.virtual_machine %}active{% endif %}">
              {% trans "Device" %}
            </button>
          </li>
          <li role="presentation" class="nav-item">
            <button role="tab" type="button" id="vm_tab" data-bs-toggle="tab" aria-controls="vm" data-bs-target="#vm" class="nav-link {% if form.initial.virtual_machine %}active{% endif %}">
              {% trans "Virtual Machine" %}
            </button>
          </li>
        </ul>
      </div>
    </div>
    <div class="tab-content p-0 border-0">
      <div class="tab-pane {% if not form.initial.virtual_machine %}active{% endif %}" id="device" role="tabpanel" aria-labeled-by="device_tab">
        {% render_field form.device %}
      </div>
      <div class="tab-pane {% if form.initial.virtual_machine %}active{% endif %}" id="vm" role="tabpanel" aria-labeled-by="vm_tab">
        {% render_field form.virtual_machine %}
      </div>
    </div>

    {# Template or custom #}
    <div class="row mb-2">
      <div class="offset-sm-3">
        <ul class="nav nav-pills" role="tablist">
          <li role="presentation" class="nav-item">
            <button role="tab" type="button" id="template_tab" data-bs-toggle="tab" data-bs-target="#template" class="nav-link active">
              {% trans "From Template" %}
            </button>
          </li>
          <li role="presentation" class="nav-item">
            <button role="tab" type="button" id="custom_tab" data-bs-toggle="tab" data-bs-target="#custom" class="nav-link">
              {% trans "Custom" %}
            </button>
          </li>
        </ul>
      </div>
    </div>
    <div class="tab-content p-0 border-0">
      <div class="tab-pane active" id="template" role="tabpanel" aria-labeled-by="template_tab">
        {% render_field form.service_template %}
      </div>
      <div class="tab-pane" id="custom" role="tabpanel" aria-labeled-by="custom_tab">
        {% render_field form.name %}
        {% render_field form.protocol %}
        {% render_field form.ports %}
      </div>
    </div>
    {% render_field form.ipaddresses %}
    {% render_field form.description %}
    {% render_field form.tags %}
  </div>

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

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