{{-- Loaded via viewModal into #modal-data; popovers: initBootstrapPopoversIn in app.js if needed. --}}
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg list-split-modal">
  <div class="modal-content border-0 shadow">
    <form id="frm-group" method="post" action="{{ route('list.split', [$list->id]) }}" class="needs-validation" novalidate>
      @csrf
      <div class="modal-header border-bottom py-3 px-4">
        <div class="d-flex align-items-center gap-3 min-w-0 flex-grow-1">
          <span class="avatar avatar-md avatar-rounded bg-primary-transparent text-primary flex-shrink-0 d-inline-flex align-items-center justify-content-center">
            <i class="bi bi-layout-split fs-20"></i>
          </span>
          <div class="min-w-0">
            <h5 class="modal-title mb-0 fw-semibold">{{ __('app.split') }} ({{ $list->name }})</h5>
          </div>
        </div>
        <button type="button" class="btn-close flex-shrink-0" data-bs-dismiss="modal" aria-label="{{ __('app.close') }}"></button>
      </div>

      <div class="modal-body px-4 py-3">
        <div class="mb-0">
          <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.no_of_lists') }}</div>
          <div class="form-group">
            <label class="form-label fw-semibold mt-2 visually-hidden" for="split-no-of-lists">{{ __('app.no_of_lists') }}</label>
            <input type="number" class="form-control" id="split-no-of-lists" placeholder="{{ __('app.no_of_lists') }}" value="" name="no_of_lists" min="2" required autofocus>
            <div class="invalid-feedback">{{ __('app.no_of_lists_required') }}</div>
          </div>
        </div>
      </div>

      <div class="modal-footer border-top bg-light px-4 py-3 gap-2 flex-wrap mt-3">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">
          <i class="bi bi-x-lg me-1"></i>{{ __('app.close') }}
        </button>
        <button type="submit" class="btn btn-primary btn-loading">
          <i class="bi bi-layout-split me-1"></i>{{ __('app.split') }}
        </button>
      </div>
    </form>
  </div>
</div>