<!-- Preprocessing Options (for fMRI data) -->
<div class ='row mt-2'>
  <div class='col-12 pr-0 pl-1'>
    <div class ='card'>
      <div class="card-body pt-2 pb-1">
        <form>
          <!-- Normalization -->
          <div class='row mb-1'>
            <div class='col-12'>
              <div class='row pl-1'>
                <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input" id="enable-normalization" disabled>
                  <label class="custom-control-label small" for="enable-normalization"><strong>Normalization</strong></label>
                  <span class="fa-solid fa-circle-info ml-1 toggle-immediate" data-toggle="tooltip" data-placement="top" title="Normalization is performed separately on each voxel/vertex time course" aria-hidden="true"></span>
                </div>
              </div>
              <div class='row pl-1 mb-1' id='normalization-options'>
                <div class="form-check form-check-inline">
                  <input class="form-check-input norm-option" type="radio" name="norm-options" id="select-mean-center" value="mean-center" disabled>
                  <label class="form-check-label small" for="select-mean-center">mean-center</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input norm-option" type="radio" name="norm-options" id="select-z-score" value="z-score" disabled>
                  <label class="form-check-label small" for="select-z-score">z-score</label>
                </div>
              </div>
            </div>
          </div>
          <!-- Filtering and Detrending-->
          <div class='row mt-1 mb-1'>
            <div class='col-12'>
              <!-- Filter Switch -->
              <div class='row pl-1'>
                <div class='col-6 pl-0'>
                  <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="enable-filtering" disabled>
                    <label class="custom-control-label small" for="enable-filtering"><strong>Filter</strong></label>
                    <span class="fa-solid fa-circle-info ml-1 toggle-immediate" data-toggle="tooltip" data-placement="top" title="Temporal filtering is performed with a Butterworth 5th-order filter. Low-cut and high-cut are provided in Hertz (Hz). Providing only low-cut performs high-pass filtering. Providing only high-cut performs low-pass filtering. Providing both performs bandpass filtering." aria-hidden="true"></span>
                  </div>
                </div>
                <!-- Detrending Checkbox layout -->
                <div class='col-6 pl-0 d-flex align-items-center'>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" id="enable-detrending" disabled>
                    <label class="form-check-label small" for="enable-detrending">Detrend</label>
                    <span class="fa-solid fa-circle-info ml-1 toggle-immediate" data-toggle="tooltip" data-placement="top" title="Linear trend removal" aria-hidden="true"></span>
                  </div>
                </div>
              </div>
              <!-- Filter options layout -->
              <div class='row pl-1 justify-content-start' id='filter-options'>
                <div class="col-4 pl-0 pr-1">
                  <div class="form-group mb-1">
                    <label for="filter-tr" class='mb-0'><small>TR:</small></label>
                    <span class="fa-solid fa-circle-info ml-1 toggle-immediate" data-toggle="tooltip" data-placement="top" title="The repitition time of the functional MRI time courses" aria-hidden="true"></span>
                    <input type="number" class="form-control form-control-sm filter-option" id="filter-tr" step="0.01" disabled>
                  </div>
                </div>
                <div class="col-4 pl-0 pr-1">
                  <div class="form-group filter-options mb-1">
                    <label for="filter-low-cut" class='mb-0'><small>Low-Cut:</small></label>
                    <div class="d-flex align-items-center">
                      <input type="number" class="form-control form-control-sm filter-option mr-1" id="filter-low-cut" step="0.01" disabled>
                    </div>
                  </div>
                </div>
                <div class="col-4 pl-0 pr-1">
                  <div class="form-group filter-options mb-1">
                    <label for="filter-high-cut" class='mb-0'><small>High-Cut:</small></label>
                    <div class="d-flex align-items-center">
                      <input type="number" class="form-control form-control-sm filter-option mr-1" id="filter-high-cut" step="0.01" disabled>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Spatial Smoothing-->
          <div class='row mb-1'>
            <div class='col-12'>
              <div class='row pl-1'>
                <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input" id="enable-smoothing" disabled>
                  <label class="custom-control-label small" for="enable-smoothing"><strong>Smoothing</strong></label>
                  <span class="fa-solid fa-circle-info ml-1 toggle-immediate" data-toggle="tooltip" data-placement="top" title=" (Not supported for surface .gii input) Perform 3D gaussian isometric spatial smoothing of the fMRI volumes. The extent of smoothing is controlled by the size of the FWHM kernel in mm." aria-hidden="true"></span>
                </div>
              </div>
              <!-- Smoothing options layout -->
              <div class='row pl-2 justify-content-start'>
                <div class='col-6 pl-0'>
                  <label for="smoothing-fwhm" class='mb-0'><small>FWHM:</small></label>
                  <div class="d-flex align-items-center">
                    <input type="number" class="form-control form-control-sm mr-1" id="smoothing-fwhm" step="0.1" min="0" max="12" disabled>
                    <span><small>mm</small></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class='row mt-3 mb-1'>
            <!-- Error Message Placeholder -->
            <div id="error-message-preprocess" class="alert alert-danger" role='alert' style="display: none;"></div>
            <div class='col-7 pl-1 pr-1'>
              <button type="button" class="btn btn-primary btn-sm btn-block" id='submit-preprocess-button' type='submit' disabled>Preprocess</button>
            </div>
            <div class='col-5 pl-1'>
              <button type="button" class="btn btn-secondary btn-sm btn-block" id='reset-preprocess-button' disabled>Reset</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>