{% extends "extras/job.html" %}
{% load form_helpers %}

{% block job_form_wrapper %}
    {% with csv_tab_active=form.initial.csv_input %}
      <div class="card mb-16">
          <div class="card-header">
              <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item" role="presentation">
                      <a class="nav-link{% if not csv_tab_active %} active{% endif %}" data-bs-toggle="tab" href="#job_manual_input" role="tab">Manual Input</a>
                  </li>
                  <li class="nav-item" role="presentation">
                      <a class="nav-link{% if csv_tab_active %} active{% endif %}" data-bs-toggle="tab" href="#job_csv_input" role="tab">CSV Input</a>
                  </li>
              </ul>
          </div>
          <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane fade{% if not csv_tab_active %} show active{% endif %}" id="job_manual_input">
                    {% render_field job_form.location %}
                    {% render_field job_form.namespace %}
                    {% render_field job_form.ip_addresses %}
                    {% render_field job_form.port %}
                    {% render_field job_form.timeout %}
                    {% render_field job_form.set_mgmt_only %}
                    {% render_field job_form.update_devices_without_primary_ip %}
                    {% render_field job_form.device_role %}
                    {% render_field job_form.device_status %}
                    {% render_field job_form.interface_status %}
                    {% render_field job_form.ip_address_status %}
                    {% render_field job_form.secrets_group %}
                    {% render_field job_form.platform %}
                    {% render_field job_form.device_tenant %}
                </div>
                <div class="tab-pane fade{% if csv_tab_active %} show active{% endif %}" id="job_csv_input">
                    {% render_field job_form.csv_file %}
                </div>
            </div>
          </div>
      </div>
      {% endwith %}
    <div class="card mb-16">
        <div class="card-header">
            <strong>Job Data</strong>
        </div>
        <div class="card-body">
            {% render_form job_form excluded_fields="['location', 'namespace', 'ip_addresses', 'device_role', 'device_status', 'interface_status', 'ip_address_status', 'port', 'timeout', 'secrets_group', 'platform', 'device_tenant', 'set_mgmt_only', 'update_devices_without_primary_ip', 'csv_file']" %}
        </div>
    </div>
{% endblock job_form_wrapper %}

{# fmt:off #}
{% block javascript %}
  {{ block.super }}
  <script>
    const csvInput = document.getElementById('id_csv_file');
    const manualRequiredFields = [
      "id_location", "id_namespace", "id_ip_addresses", "id_device_role", 
      "id_device_status", "id_interface_status", "id_ip_address_status", 
      "id_port", "id_timeout", "id_secrets_group"
    ];

    function setFieldRequired(fieldId, isRequired) {
      const element = document.getElementById(fieldId);
      element.required = isRequired;
      const label = document.querySelector(`label[for="${fieldId}"]`);
      if (isRequired) {
        label.classList.add('nb-required');
      } else {
        label.classList.remove('nb-required');
      }
    }

    document.addEventListener("DOMContentLoaded", function() {
      manualRequiredFields.forEach(field => setFieldRequired(field, true));

      $('.nav-tabs a').on('shown.bs.tab', function(e) {
        const activeTab = $(e.target).attr('href');
        const isManualInputTab = activeTab === '#job_manual_input';

        csvInput.value = '';
        csvInput.required = !isManualInputTab;
        document.querySelector('label[for="id_csv_file"]').classList.toggle('nb-required', !isManualInputTab);

        manualRequiredFields.forEach(field => setFieldRequired(field, isManualInputTab));
      });
    });
  </script>
{% endblock javascript %}
{# fmt:on #}