{% extends 'base.html' %}
{% load buttons %}
{% load helpers %}
{% load perms %}
{% load plugins %}
{% load static %}
{% load ui_framework %}
{% load form_helpers %}
{% load i18n %}

{% comment %}
Blocks:
  - title:      Page title
  - controls:   Control elements displayed between the header and content
  - tabs:       Page tabs
  - content:    Primary page content
    - form:     Content within the <form> element
    - buttons:  Form submission buttons
  - modals:     Any pre-loaded modals

Context:
  - object:      Python instance of the object being edited
  - form:        The edit form
  - return_url:  The URL to which the user is redirected after submitting the form
{% endcomment %}

{% block breadcrumbs_wrapper %}
{% endblock breadcrumbs_wrapper %}

{% block controls %}
  <div class="btn-list">

    {# Link to model documentation #}
    {% if settings.DOCS_ROOT and object.docs_url %}
      <a href="{{ object.docs_url }}" target="_blank" class="btn btn-outline-secondary" title="{% trans "View model documentation" %}">
        <i class="mdi mdi-help-circle"></i> {% trans "Help" %}
      </a>
    {% endif %}

  </div>
{% endblock controls %}

{% block tabs %}
  <ul class="nav nav-tabs">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="edit-form-tab" data-bs-toggle="tab" data-bs-target="#edit-form" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
        {% if object.pk %}{% trans "Execute" %}{% endif %}
      </button>
    </li>
  </ul>
{% endblock tabs %}

{% block title %}
  {% if object.pk %}
    {% trans "Execute Job" %}: {{ object.name }}
  {% else %}
    {% trans "Execute Job" %}
  {% endif %}
{% endblock %}

{% block content %}
  <div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="object-list-tab">

    {# Warn about missing prerequisite objects #}
    {% if prerequisite_model %}
      {% include 'inc/missing_prerequisites.html' %}
    {% endif %}

    <form action="" method="post" enctype="multipart/form-data" class="object-edit mt-20 form form-horizontal">
      {% csrf_token %}
      
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
          {% block form_errors %}
              {% if form.non_field_errors or model_form.non_field_errors %}
                  <div class="panel panel-danger">
                      <div class="panel-heading"><strong>Errors</strong></div>
                      <div class="panel-body">
                          {{ form.non_field_errors }}
                          {{ model_form.non_field_errors }}
                      </div>
                  </div>
              {% endif %}
          {% endblock %}
          {% block form %}
              <div class="panel panel-default">
                  <div class="panel-body">
                      {% block form_fields %}
                          {% render_form form %}
                      {% endblock %}
                  </div>
              </div>
          {% endblock %}

          {% if form.confirm.value %}
              <hr/>
              <div class="row mb-3{% if field.errors %} has-errors{% endif %}">
                  <div class="col-sm-3 text-lg-end"><label for="id_confirm">Commands to devices</label></div>
                  <div class="col"><span class="font-monospace">{{ final_commands }}</span></div>
              </div>
          {% endif %}
        </div>
      </div>

      <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 d-flex justify-content-end gap-2">
          {% block buttons %}
            <a href="{{ return_url }}" class="btn btn-outline-secondary btn-float" id="cancel-btn">{% trans "Cancel" %}</a>
            {% if object.pk %}
              <button type="submit" name="_update" class="btn btn-primary" id="submit-btn">
                <span id="submit-text">
                  {% if form.confirm.value %}
                    {% trans "Execute now" %}{% else %}{% trans "Render commands" %}
                  {% endif %}
                </span>
                <span id="submit-spinner" class="spinner-border spinner-border-sm d-none ms-2" role="status" aria-hidden="true"></span>
              </button>
            {% endif %}
          {% endblock buttons %}
        </div>
      </div>
    </form>
    <script>
    (function() {
        const form = document.querySelector('form.object-edit');
        const submitBtn = document.getElementById('submit-btn');
        const submitSpinner = document.getElementById('submit-spinner');
        let isSubmitting = false;
        
        if (form && submitBtn) {
            form.addEventListener('submit', function(e) {
                if (isSubmitting) {
                    e.preventDefault();
                    return false;
                }
                isSubmitting = true;
                
                if (submitSpinner) {
                    submitSpinner.classList.remove('d-none');
                    submitSpinner.style.display = 'inline-block';
                    submitSpinner.style.visibility = 'visible';
                }
                
                submitBtn.disabled = true;
                submitBtn.setAttribute('disabled', 'disabled');
                submitBtn.classList.add('disabled');
                submitBtn.style.cursor = 'not-allowed';
                submitBtn.style.opacity = '0.7';
                submitBtn.style.pointerEvents = 'none';
                
                return true;
            }, false);
        }
    })();
    </script>
  </div>
{% endblock content %}

{% block extra_javascript %}
{% endblock extra_javascript %}

{% block modals %}
  {% include 'inc/htmx_modal.html' with size='lg' %}
{% endblock %}