{% extends base_template %}

{% block content %}
<div class="container-fluid">
  <div class="page-header">
    <h2>
      {% if sub %}Edit{% else %}Create{% endif %} RMQ Subscription
      {% if group_subs %}
        <small class="text-muted"> — group ({{ group_subs | length }} queue(s))</small>
      {% endif %}
      {% if is_dag_file %}
        <small class="text-muted"> — dag_file source (read-only fields managed by code)</small>
      {% endif %}
    </h2>
  </div>

  {# Flash messages #}
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}
    <div class="alert alert-{{ 'danger' if category == 'error' else category }}">{{ message }}</div>
    {% endfor %}
  {% endwith %}

  {% if is_dag_file %}
  <div class="alert alert-info">
    This subscription is defined in a DAG file via <code>@rmq_trigger</code>.
    Only the <strong>Enabled</strong> toggle can be changed here.
    To modify other fields, update the DAG file.
  </div>
  {% endif %}

  <div class="panel panel-default">
    <div class="panel-body">
      <form method="post" class="form-horizontal">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

        <div class="form-group">
          <label class="col-sm-2 control-label">DAG ID</label>
          <div class="col-sm-6">
            <input type="text" name="dag_id" class="form-control"
                   value="{{ sub.dag_id if sub else '' }}"
                   {% if is_dag_file %}readonly{% else %}required{% endif %}>
          </div>
        </div>

        {# Queue(s) — dynamic list for create/group-edit, single field for single-sub edit #}
        {% if group_subs %}
        {# Group edit: show all queues with remove buttons #}
        <div class="form-group">
          <label class="col-sm-2 control-label">Queues</label>
          <div class="col-sm-6" id="queue-list">
            {% for gs in group_subs %}
            <div class="input-group" style="margin-bottom:4px">
              <input type="text" name="queue_name" class="form-control"
                     value="{{ gs.queue_name }}"
                     {% if is_dag_file %}readonly{% else %}required{% endif %}>
              {% if not is_dag_file %}
              <span class="input-group-btn">
                <button type="button" class="btn btn-default btn-remove-queue" title="Remove queue">✕</button>
              </span>
              {% endif %}
            </div>
            {% endfor %}
          </div>
        </div>
        {% elif not sub %}
        {# Create: start with one queue, allow adding more #}
        <div class="form-group">
          <label class="col-sm-2 control-label">Queue(s)</label>
          <div class="col-sm-6" id="queue-list">
            <div class="input-group" style="margin-bottom:4px">
              <input type="text" name="queue_name" class="form-control" placeholder="queue name" required>
              <span class="input-group-btn">
                <button type="button" class="btn btn-default btn-remove-queue" title="Remove queue">✕</button>
              </span>
            </div>
          </div>
        </div>
        {% else %}
        {# Single-sub edit: single queue field #}
        <div class="form-group">
          <label class="col-sm-2 control-label">Queue Name</label>
          <div class="col-sm-6">
            <input type="text" name="queue_name" class="form-control"
                   value="{{ sub.queue_name if sub else '' }}"
                   {% if is_dag_file %}readonly{% else %}required{% endif %}>
          </div>
        </div>
        {% endif %}

        {% if not is_dag_file and (not sub or group_subs) %}
        {# Show "+ Add queue" button in create mode and group-edit mode #}
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-6">
            <button type="button" id="btn-add-queue" class="btn btn-default btn-sm">+ Add queue</button>
          </div>
        </div>
        {% endif %}

        <div class="form-group">
          <label class="col-sm-2 control-label">Connection ID</label>
          <div class="col-sm-6">
            <input type="text" name="conn_id" class="form-control"
                   value="{{ sub.conn_id if sub else 'rmq_default' }}"
                   {% if is_dag_file %}readonly{% endif %}>
            <p class="help-block">Airflow connection ID pointing to the RabbitMQ instance.</p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Cooldown (seconds)</label>
          <div class="col-sm-6">
            <input type="number" name="cooldown" class="form-control" min="0"
                   value="{{ sub.cooldown if sub and sub.cooldown else 0 }}"
                   {% if is_dag_file %}readonly{% endif %}>
            <p class="help-block">
              0 = trigger DAG immediately on each message.
              &gt;0 = trigger once after this many seconds; all messages within the window are ACKed.
            </p>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">Filter Data (JSON)</label>
          <div class="col-sm-6">
            <textarea name="filter_data" class="form-control" rows="4"
                      {% if is_dag_file %}readonly{% endif %}>{{ sub.filter_data | tojson(indent=2) if sub and sub.filter_data else '' }}</textarea>
            <p class="help-block">
              Optional message filter in format <code>{"filter_headers": {"key": "value"}}</code>.
              Leave empty to trigger on any message.
            </p>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-6">
            <div class="checkbox">
              <label>
                <input type="checkbox" name="enabled"
                       {% if (sub is none) or sub.enabled %}checked{% endif %}>
                Enabled
              </label>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-6">
            <button type="submit" class="btn btn-primary">Save</button>
            <a href="{{ url_for('RMQWatcherView.subscriptions') }}" class="btn btn-default">Cancel</a>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

{% if not is_dag_file %}
<script>
(function() {
  var queueList = document.getElementById('queue-list');
  var addBtn = document.getElementById('btn-add-queue');

  function removeRow(btn) {
    var rows = queueList.querySelectorAll('.input-group');
    if (rows.length <= 1) { return; }  // keep minimum 1
    btn.closest('.input-group').remove();
  }

  // Attach remove handlers to existing rows
  queueList && queueList.querySelectorAll('.btn-remove-queue').forEach(function(btn) {
    btn.addEventListener('click', function() { removeRow(btn); });
  });

  // Add queue button
  addBtn && addBtn.addEventListener('click', function() {
    var div = document.createElement('div');
    div.className = 'input-group';
    div.style.marginBottom = '4px';
    div.innerHTML = '<input type="text" name="queue_name" class="form-control" placeholder="queue name" required>' +
      '<span class="input-group-btn">' +
      '<button type="button" class="btn btn-default btn-remove-queue" title="Remove queue">✕</button>' +
      '</span>';
    div.querySelector('.btn-remove-queue').addEventListener('click', function() { removeRow(this); });
    queueList.appendChild(div);
  });
})();
</script>
{% endif %}

{% endblock %}