{{-- Native #type-email-verifier (like custom-field #type); initEmailVerifierTypeNativeInModal in app.js. --}}
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg verify-email-modal">
  <div class="modal-content border-0 shadow">
    <form 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-envelope-check fs-20"></i>
          </span>
          <div class="min-w-0">
            <h5 class="modal-title mb-0 fw-semibold">{{ __('app.verify_email') }}</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-3 pb-3 border-bottom">
          <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.type') }}</div>
          <div class="form-group">
            <label class="form-label fw-semibold mt-2 visually-hidden" for="type-email-verifier">{{ __('app.type') }}</label>
            <select name="type" id="type-email-verifier" class="form-select" aria-label="{{ __('app.type') }}">
              @php $active_email_verifyers = \App\Models\EmailVerifier::whereIsActive(true)->get(); @endphp
              @foreach ($active_email_verifyers as $verifier)
                <option value="{{ $verifier->id }}" {{ !empty($email_verifier) && !empty($email_verifier->id) && $verifier->id == $email_verifier->id ? 'selected' : '' }}>{{ $verifier->name }}</option>
              @endforeach
            </select>
          </div>
        </div>

        <div class="mb-3 pb-3 border-bottom">
          <div class="text-secondary text-uppercase fw-semibold list-form-sec-label mb-2">{{ __('app.email') }}</div>
          <div class="form-group">
            <label class="form-label fw-semibold mt-2 visually-hidden" for="email">{{ __('app.email') }}</label>
            <input type="email" id="email" class="form-control" placeholder="{{ __('app.email') }}" value="{{ $email ?? '' }}" name="email" required autocomplete="email">
            <div class="invalid-feedback">{{ __('app.email_required') }}</div>
          </div>
        </div>

        <div class="mb-0">
          <div id="verify-email-feedback" class="alert d-none d-flex align-items-start gap-2 w-100">
            <i class="bi bi-info-circle flex-shrink-0 mt-1"></i>
            <div class="verify-email-message-body flex-grow-1 min-w-0"></div>
          </div>
        </div>
      </div>

      <div class="modal-footer border-top bg-light px-4 py-3 gap-2 flex-wrap">
        <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="button" id="btn-verify-email" class="btn btn-primary btn-loading">
          <i class="bi bi-check-lg me-1"></i>{{ __('app.verify') }}
        </button>
      </div>
    </form>
  </div>
</div>