<div class="tab" style="display: flex; overflow: auto">
  <div class="form-group import">
    <label class="import-options">Scene Name</label>
    <div class="form-fields">
      <input type='text' name="sceneName" />
    </div>
  </div>
  <div class="form-group import" data-tooltip-direction="LEFT" data-tooltip="Select where the image is uploaded.">
    <label class="import-options">Storage Type</label>
        <div class="form-fields">

    <select name="source" class="source-selector">
        {{selectOptions dataSources selected=defaultSource}}
    </select>
    </div>
  </div>
  <div class="form-group import convert-section convert-to-webp" data-tooltip-direction="LEFT"
    data-tooltip="You can save images as webp which will make them a lot smaller, but creation time is a bit longer">
    <label class="import-options">Convert to WebP</label>
        <div class="form-fields">

    <input type="checkbox" name="convert-to-webp" {{checked webpConversion}}>
    </div>
  </div>

  <div class="form-group import convert-section" data-tooltip-direction="LEFT"
    data-tooltip="You can set a custom Grid PPI value at time of import to change the resolution of the generated image">
    <label class="import-options">Set Custom Grid PPI</label>
        <div class="form-fields">

    <input type="checkbox" data-action="usePPI"  name="use-custom-gridPPI" {{checked useCustomPixelsPerGrid}}>
    </div>
  </div>

  <div class="form-group custom-gridPPI-section" style="display: none">

    <div class="form-fields">
    <range-picker name="customGridPPI" value="{{defaultCustomPixelsPerGrid}}" min="50" max="256" step="1">
      <input type='range'  min="50" max="256" value="{{defaultCustomPixelsPerGrid}}" step="1"/>
      <input type="number" min="50" max="256" >
    </range-picker>
    </div>
  </div>

  <div class="form-group import" data-tooltip-direction="LEFT" data-tooltip="This is where the image is uploaded. Your path should be relative to your User Data folder. e.g. worlds/yourworld/maps">
    <label class="import-options">Upload Path</label>
    <div class="form-fields">
      <file-picker type="folder" name="path">
        <input type="text" value="{{this.path}}" name="path">
        <button class="fa-solid fa-file-import fa-fw icon" type="button"></button>
      </file-picker>
    </div>
  </div>

  <div class="warning path notification error" style="display: none">
    Your path should be relative to your User Data folder. e.g. worlds/yourworld/maps, or blank to place in the "Data"
    folder.
  </div>

  <div class="form-group import">
    <label class="import-options" data-tooltip-direction="LEFT"
      data-tooltip="Fidelity decides how many cave walls to skip - Right is high fidelity, no walls skipped">Fidelity</label>
          <div class="form-fields">

    <input class="fidelity-input" type="range" min="1" max="6" value="1" name="fidelity">
    </div>
  </div>

  <div class="warning fidelity notification error" style="display: none">
    Higher Fidelity creates a very large amount of cave walls. Recommended to stay at the minimum.
  </div>

  <div class="form-group" data-tooltip-direction="LEFT"
    data-tooltip="Includes the walls from objects that block line of sight">
    <label class="import-options">Object Walls</label>
        <div class="form-fields">

    <input type="checkbox" name="object-walls" checked>
    </div>
  </div>

  <div class="form-group import">
    <label class="import-options">Padding</label>
    <div class="form-fields">

    <range-picker name="padding" value="{{padding}}" min="0" max="0.5" step="0.05">
      <input type='range'  min="0" max="0.5" value="{{defaultCustomPixelsPerGrid}}" step="0.05" />
      <input type="number" min="0" max="0.5" >
    </range-picker>
    </div>
  </div>

  <div class="form-group import">
    <label class="import-options">Upload Universal VTT (.dd2vtt, .df2vtt, .uvtt)</label>
  </div>
  <div class="form-group import" id="dd-upload-files" style="flex-direction: column" ;>
    <div class="file-input" style="width: 80%; display:flex; align-items: center; margin-bottom: 10px;">
      <input class="file-input" type='file' name='file0' accept=".dd2vtt,.df2vtt,.uvtt" />
    </div>

    <a class="add-file" data-action="addFile"><i class="fa-solid fa-plus"></i> Add another file</a>
    <fieldset class="multi-mode-section" style="display: none">
      <legend>Multi-File Options</legend>
      <div class="form-group">
        <label class="import-options">Add walls around single files</label>
        <input type="checkbox" name="walls-around-files" {{checked wallsAroundFiles}}>
      </div>
      <div class="form-group">

        <label class="import-options">Layout Mode</label>
        <select name="multi-mode">
          {{selectOptions multiImageModes selected=multiImageMode}}
        </select><br />
      </div>
      <div class="form-group stacked">
        <label class="import-options">Image File Name (also Scene Name if empty)</label>
        <input type='text' name="imageFileName" />
      </div>
    </fieldset>
  </div>
    <hr />
    <h3>Advanced</h3>
    <div class="form-group import conversion-quality">
      <label class="import-options" data-tooltip-direction="LEFT"
        data-tooltip="Increase for a better quality image at the cost of increased conversion speed and disk usage">WebP
        Quality</label>
            <div class="form-fields">
        <range-picker name="webp-quality" value="{{webpQuality}}" min="0.1" max="1" step="0.1">
          <input type='range'  value="{{webpQuality}}" min="0.1" max="1" step="0.1"/>
          <input type="number" min="0.1" max="1" >
        </range-picker>
    </div>
    </div>
    <div class="form-group import">
      <label class="import-options" data-tooltip-direction="LEFT"
        data-tooltip="Nudges the walls away from the edge. If you experience issues, leave at 0.">Offset</label>
      <div class="form-fields">
        <div class="form-fields">
          <input type="number" min="-3" step="0.1" max="3" value="{{offset}}" name="offset">
        </div>
      </div>
    </div>
    <div class="form-group s3-section" style="display: none">
      <div class="form-group import">
        <label class="import-options">Bucket Name for S3 Storage</label>
        <div class="form-fields">
          <select name="bucket">
            {{selectOptions bucketOptions selected=s3Bucket}}
          </select>
        </div>
      </div>
    </div>
</div>