{% extends 'generic/_base.html' %}
{% load helpers %}
{% load i18n %}

{% block title %}Run {{ object.name }}{% endblock %}

{% block subtitle %}
  <div class="text-secondary fs-5">
    Workflow <a href="{{ object.get_absolute_url }}">{{ object.name }}</a>
  </div>
{% endblock %}

{% block control-buttons %}{% endblock %}

{% block content %}

  {% if engine_settings.engine_status == "maintenance" %}
  <div class="alert alert-warning mb-3" role="alert">
    <strong>{% trans "Engine in Maintenance" %}</strong> —
    {% trans "Your job will be held and will start automatically when the engine returns to Active." %}
    {% if engine_settings.maintenance_message %}
      <div class="mt-1 text-muted small">{{ engine_settings.maintenance_message }}</div>
    {% endif %}
  </div>
  {% elif engine_settings.engine_status == "disabled" %}
  <div class="alert alert-danger mb-3" role="alert">
    <strong>{% trans "Engine Disabled" %}</strong> —
    {% trans "New jobs are not accepted. An administrator must re-enable the engine in Settings." %}
    {% if engine_settings.maintenance_message %}
      <div class="mt-1 small">{{ engine_settings.maintenance_message }}</div>
    {% endif %}
  </div>
  {% endif %}

  <form method="post" novalidate>
    {% csrf_token %}
    <input type="hidden" name="priority" value="50">

    <div class="row g-3">

      <div class="col-12 col-md-7">
        <div class="card">
          <h2 class="card-header">{% trans "Inputs" %}</h2>
          <div class="card-body">
            {% if workflow_spec.description %}
              <p class="text-muted mb-3">{{ workflow_spec.description }}</p>
            {% endif %}

            {% if form.fields %}
              {% for field in form %}
                <div class="mb-3">
                  {% if field.field.widget.input_type == "checkbox" %}
                    <div class="form-check">
                      {{ field }}
                      <label class="form-check-label" for="{{ field.id_for_label }}">
                        {{ field.label }}
                      </label>
                    </div>
                  {% else %}
                    <label for="{{ field.id_for_label }}" class="form-label">
                      {{ field.label }}
                      {% if field.field.required %}<span class="text-danger ms-1">*</span>{% endif %}
                    </label>
                    {{ field }}
                  {% endif %}
                  {% if field.help_text %}
                    <div class="form-text">{{ field.help_text }}</div>
                  {% endif %}
                  {% if field.errors %}
                    <div class="invalid-feedback d-block">{{ field.errors|join:", " }}</div>
                  {% endif %}
                </div>
              {% endfor %}
            {% else %}
              <p class="text-muted mb-0">{% trans "This workflow takes no inputs." %}</p>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="col-12 col-md-5">
        <div class="card">
          <h2 class="card-header">{% trans "Steps" %}</h2>
          <ol class="list-group list-group-flush list-group-numbered">
            {% for s in workflow_spec.build_steps %}
              <li class="list-group-item d-flex justify-content-between align-items-start">
                <div>
                  {{ s.name }}
                  <div><code class="text-muted small">{{ s.key }}</code></div>
                </div>
                {% if s.retries %}
                  <span class="badge text-bg-secondary">{{ s.retries }} retries</span>
                {% endif %}
              </li>
            {% endfor %}
          </ol>
        </div>
      </div>

    </div>

    <div class="d-flex justify-content-end gap-2 mt-3">
      <a href="{{ object.get_absolute_url }}" class="btn btn-outline-secondary">
        {% trans "Cancel" %}
      </a>
      <button type="submit" class="btn btn-primary"
              {% if engine_settings.engine_status == "disabled" %}disabled{% endif %}>
        {% trans "Enqueue" %}
      </button>
    </div>

  </form>

{% endblock content %}

{% block javascript %}
{{ block.super }}
<script>
  document.querySelectorAll('input[data-autocomplete-url]').forEach(function(input) {
    var url = input.dataset.autocompleteUrl;

    var dropdown = document.createElement('ul');
    dropdown.style.cssText = [
      'position:fixed', 'z-index:9999', 'display:none', 'max-height:240px',
      'overflow-y:auto', 'padding:0', 'margin:0', 'list-style:none',
      'border:1px solid var(--bs-border-color)',
      'border-radius:var(--bs-border-radius, 4px)',
      'background:var(--bs-body-bg)',
      'box-shadow:0 4px 16px rgba(0,0,0,.2)'
    ].join(';');
    document.body.appendChild(dropdown);

    function reposition() {
      var r = input.getBoundingClientRect();
      dropdown.style.top   = (r.bottom + 2) + 'px';
      dropdown.style.left  = r.left + 'px';
      dropdown.style.width = r.width + 'px';
    }

    var debounce;

    input.addEventListener('input', function() {
      clearTimeout(debounce);
      var q = input.value.trim();
      if (!q) { dropdown.style.display = 'none'; return; }
      debounce = setTimeout(function() {
        fetch(url + '?q=' + encodeURIComponent(q), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
          .then(function(r) { return r.json(); })
          .then(function(data) {
            dropdown.innerHTML = '';
            if (!data.results || !data.results.length) { dropdown.style.display = 'none'; return; }
            data.results.forEach(function(item) {
              var li = document.createElement('li');
              li.dataset.value = item.value;
              li.textContent   = item.label;
              li.style.cssText = [
                'padding:6px 10px', 'cursor:pointer', 'font-size:.875rem',
                'color:var(--bs-body-color)',
                'border-bottom:1px solid var(--bs-border-color-translucent, var(--bs-border-color))'
              ].join(';');
              li.addEventListener('mouseover', function() { li.style.background = 'var(--bs-tertiary-bg, #f8f9fa)'; });
              li.addEventListener('mouseout',  function() { li.style.background = ''; });
              li.addEventListener('mousedown', function(e) {
                e.preventDefault();
                input.value = item.value;
                dropdown.style.display = 'none';
              });
              dropdown.appendChild(li);
            });
            reposition();
            dropdown.style.display = 'block';
          })
          .catch(function() { dropdown.style.display = 'none'; });
      }, 250);
    });

    input.addEventListener('blur',  function() { setTimeout(function() { dropdown.style.display = 'none'; }, 150); });
    input.addEventListener('focus', function() { if (dropdown.children.length) { reposition(); dropdown.style.display = 'block'; } });
    window.addEventListener('scroll', function() { if (dropdown.style.display !== 'none') reposition(); }, true);
    window.addEventListener('resize', function() { if (dropdown.style.display !== 'none') reposition(); });

    input.addEventListener('keydown', function(e) {
      var items = Array.from(dropdown.querySelectorAll('li'));
      var idx   = items.findIndex(function(li) { return li.classList.contains('ac-on'); });

      function activate(i) {
        if (idx >= 0) { items[idx].classList.remove('ac-on'); items[idx].style.background = ''; }
        items[i].classList.add('ac-on');
        items[i].style.background = 'var(--bs-tertiary-bg, #f8f9fa)';
        items[i].scrollIntoView({ block: 'nearest' });
      }

      if      (e.key === 'ArrowDown' ) { e.preventDefault(); activate(idx < items.length - 1 ? idx + 1 : 0); }
      else if (e.key === 'ArrowUp'   ) { e.preventDefault(); activate(idx > 0 ? idx - 1 : items.length - 1); }
      else if (e.key === 'Enter' && idx >= 0 && dropdown.style.display !== 'none') {
        e.preventDefault(); input.value = items[idx].dataset.value; dropdown.style.display = 'none';
      }
      else if (e.key === 'Escape') { dropdown.style.display = 'none'; }
    });
  });
</script>
{% endblock javascript %}