wizarr/app/templates/modals/bundle-add-steps.html

<div class="relative modal-container"
     aria-labelledby="modal-title"
     role="dialog"
     aria-modal="true">
  <!-- backdrop -->
  <div class="fixed inset-0 modal-backdrop transition-opacity"></div>
  <div class="fixed inset-0 z-10 overflow-y-auto">
    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
      <div class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
        <div class="bg-white dark:bg-gray-800 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
          <div class="flex justify-between items-center pb-3">
            <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 dark:text-white">
              {{ _("Add steps to bundle") }} — {{ bundle.name }}
            </h1>
          </div>
          <form class="space-y-4"
                method="post"
                hx-post="{{ url_for('wizard_admin.add_steps', bundle_id=bundle.id) }}"
                hx-target="#tab-body"
                hx-swap="innerHTML">
            {{ form.hidden_tag() }}
            <div class="max-h-96 overflow-y-auto border rounded p-2 space-y-1">
              {% for step in steps %}
                <label class="flex items-center gap-2 text-sm">
                  <input type="checkbox" name="step_ids" value="{{ step.id }}">
                  <span>{{ step.title or _("Untitled") }} <span class="text-xs text-gray-500">({{ step.server_type }})</span></span>
                </label>
              {% endfor %}
              {% if not steps %}<p class="text-gray-500 text-sm">{{ _("All steps are already included.") }}</p>{% endif %}
            </div>
            <div class="flex gap-2 justify-end pt-4">
              <button type="button"
                      onclick="document.getElementById('step-modal').innerHTML=''"
                      class="px-4 py-2 rounded border border-gray-300 text-gray-700 dark:text-gray-300">
                {{ _("Cancel") }}
              </button>
              <button type="submit"
                      class="px-4 py-2 rounded bg-primary text-white"
                      {% if not steps %}disabled{% endif %}>{{ _("Add") }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>