<div style="width: 400px;" data-indent-offset="20">
  <!-- Folder template -->
  <div data-template="folder" class="import-popup-folder" style="width:100%; position:relative;">
    <div style="width:100%; height:24px; position:relative;">
      <div class="sidebar-panel-dark-input" style="position:absolute; left:2px; width:24px; top:3px; bottom:3px" data-click="onFolderBoxClicked">
        <i class="fa fa-check" data-class="!import:hidden,implicit:import-popup-implicit-check,import:import-popup-import-check"
          style="position:absolute; left:7px; top:5px"></i>
      </div>
      <div class="indent-me" style="width:100%; height:24px; position:absolute;" data-click="onFolderClicked">
        <div style="position:absolute; width:28px; top:4px; bottom:4px">
          <i class="fa" data-class="open:fa-caret-down,!open:fa-caret-right"></i>
        </div>
        <div style="line-height:20px; position:absolute; left:10px; top:3px; bottom:3px; right:3px;" data-text="localName">
        </div>
      </div>
    </div>

    <!-- folder content goes here -->
    <div class="content" style=""></div>
  </div>

  <!-- Item template -->
  <div data-template="item" class="import-popup-item" style="width:100%; height:24px; position:relative;">
    <div class="sidebar-panel-dark-input" style="position:absolute; left:2px; width:24px; top:3px; bottom:3px" data-click="onBoxClicked">
      <i class="fa fa-check" data-class="!check:hidden,implicit:import-popup-implicit-check,import:import-popup-import-check"
        style="position:absolute; left:7px; top:5px"></i>
    </div>

    <div class="indent-me" style="line-height:20px; position:absolute; top:3px; bottom:3px; right:3px;" data-text="localName">
    </div>
  </div>

  <div  style="height:500px;overflow: hidden auto;">
    <label class="popup-group-label">COLLISIONS</label>
    <div class="import-popup-text">
      There are collisions when importing, you may select what to import (current project will be overwritten) and what to leave as is.
    </div>

    <!-- Components -->
    <div data-class="!hasComponents:hidden" style="margin-top:20px">
      <label class="popup-group-label">COMPONENTS</label>
      <div class="import-popup-text">
        Choose which components that will be imported and overwrite your current components.
      </div>
      <div class="components import-popup-item" style="margin-top:10px;"></div>
    </div>

    <!-- Resources -->
    <div data-class="!hasResources:hidden" style="margin-top:20px">
      <label class="popup-group-label">RESOURCES</label>
      <div class="import-popup-text">
        Choose which resources that will be imported and overwrite your current resources.
      </div>
      <div class="resources import-popup-item" style="margin-top:10px;"></div>
    </div>

    <!-- Modules -->
    <div data-class="!hasModules:hidden" style="margin-top:20px">
      <label class="popup-group-label">MODULES</label>
      <div class="import-popup-text">
        Choose which modules that will be imported and overwrite your current modules.
      </div>
      <div class="modules import-popup-item" style="margin-top:10px;"></div>
    </div>

    <!-- Variants -->
    <div data-class="!hasVariants:hidden" style="margin-top:20px">
      <label class="popup-group-label">VARIANTS</label>
      <div class="import-popup-text">
        Choose which variants that will be imported and overwrite your current variants.
      </div>
      <div class="variants import-popup-item" style="margin-top:10px;"></div>
    </div>

    <!-- Text Styles -->
    <div data-class="!hasTextStyles:hidden" style="margin-top:20px">
      <label class="popup-group-label">TEXT STYLES</label>
      <div class="import-popup-text">
        Choose which text styles that will be imported and overwrite your current text styles.
      </div>
      <div class="text-styles import-popup-item" style="margin-top:10px;"></div>
    </div>

    <!-- Color Styles -->
    <div data-class="!hasColorStyles:hidden" style="margin-top:20px">
      <label class="popup-group-label">COLOR STYLES</label>
      <div class="import-popup-text">
        Choose which color styles that will be imported and overwrite your current color styles.
      </div>
      <div class="color-styles import-popup-item" style="margin-top:10px;"></div>
    </div>

    <div class="import-popup-text" style="margin-top:20px">
      <strong>Warning</strong> this operation cannot be undone! Would you like to proceed?
    </div>

    <div style="height: 30px; padding: 5px; padding-bottom: 10px; margin-top:20px;">
      <button class="popup-button" data-click="onOkClicked">Overwrite</button>
      <button class="popup-button-grey" data-click="onCancelClicked">Cancel</button>
    </div>
  </div>
</div>