<div id="dialogOptions" class="modal fullScreenMobile" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
          <i class="fa fa-times"></i>
        </button>
        <h4 data-i18n="ns.dialogs:optionsTitle"></h4>
        <ul class="nav nav-tabs" style="margin-bottom: 15px; border-bottom: 1px solid lightgray;">
          <li><a href="#general" data-toggle="tab" class="optionsTitle" data-i18n="ns.dialogs:generalTab"></a></li>
          {{#if isProVersion}}
          <li style="min-width: 70px; text-align: center;"><a href="#pro" data-toggle="tab" class="optionsTitle"
                                                              data-i18n="ns.dialogs:proTab"></a></li>
          {{/if}}
          <li><a href="#perspectives" data-toggle="tab" class="optionsTitle" data-i18n="ns.dialogs:perspectivesTab"></a>
          </li>
          <li><a href="#filetypes" data-toggle="tab" class="optionsTitle" data-i18n="ns.dialogs:fileTypeTab"></a></li>
          <li><a href="#keyBindings" data-toggle="tab" class="optionsTitle" data-i18n="ns.dialogs:keyBindingsTab"></a>
          </li>
        </ul>
      </div>
      <div class="modal-body form tab-content" id="optionsAccordion">
        <div class="tab-pane active" id="general">
          <div class="form-group">
            <label for='languagesList' class="col-sm-6 control-label" data-i18n="ns.dialogs:interfaceLanguage"></label>
            <div class="col-sm-6">
              <select class='form-control' id='languagesList'></select>
            </div>
            <p class="help-block col-sm-12" data-i18n="ns.dialogs:switchLanguageHelp"></p>
          </div>
          <div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="showHiddenFilesCheckbox">
                <input type="checkbox" id="showHiddenFilesCheckbox"/>
                <span data-i18n="ns.dialogs:showUnixHiddenFiles"></span>
              </label>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="checkforUpdatesCheckbox">
                <input type="checkbox" id="checkforUpdatesCheckbox"/>
                <span data-i18n="ns.dialogs:checkForNewVersion"></span>
              </label>
            </div>
          </div>
          <!--div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="showMainMenuCheckbox">
                <input type="checkbox" id="showMainMenuCheckbox"/>
                <span data-i18n="ns.dialogs:showMainMenu"></span>
              </label>
            </div>
          </div-->
          <div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="useDefaultLocationCheckbox">
                <input type="checkbox" id="useDefaultLocationCheckbox"/>
                <span data-i18n="ns.dialogs:useDefaultLocation"></span>
              </label>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="coloredFileExtensionsEnabledCheckbox">
                <input type="checkbox" id="coloredFileExtensionsEnabledCheckbox"/>
                <span data-i18n="ns.dialogs:coloredFileExtensionsEnabled"></span>
              </label>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="showTagAreaOnStartupCheckbox">
                <input type="checkbox" id="showTagAreaOnStartupCheckbox"/>
                <span data-i18n="ns.dialogs:showTagAreaOnStartup"></span>
              </label>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="loadLocationMetaData">
                <input type="checkbox" id="loadLocationMetaData"/>
                <span data-i18n="ns.dialogs:loadLocationMetaData"></span>
              </label>

              <p class="help-block" data-i18n="ns.dialogs:loadLocationMetaDataHelp"></p>
            </div>
          </div>
          <div class="form-group">
            <label for='maxSearchResultCount' class="col-sm-6 control-label" data-i18n="ns.dialogs:maxSearchResultCount"></label>
            <div class="col-sm-6">
              <input type="number" class='form-control' id='maxSearchResultCount' min="0" max="2000"/>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="useSearchInSubfolders">
                <input type="checkbox" id="useSearchInSubfolders"/>
                <span data-i18n="ns.dialogs:useSearchInSubfolders"></span>
              </label>
            </div>
          </div>
          <div class='form-group'>
            <button class="btn btn-default" id="exportTagGroupsButton" aria-hidden="true">
              <i class="fa fa-upload"></i>&nbsp;
              <span data-i18n="ns.dialogs:exportTagGroupsButton"></span>
            </button>
            <button class="btn btn-default" id="defaultSettingsButton" aria-hidden="true">
              <i class="fa fa-rotate-left"></i>&nbsp;
              <span data-i18n="ns.dialogs:restoreDefaulSettingButton"></span>
            </button>
          </div>
          <div class="form-group">
            <label class="control-label" for="tagsBackgroundColor" data-i18n="ns.dialogs:tagBackgroundColor"></label>
            <input type="color" class="form-control" id="tagsBackgroundColor" style="padding: 0">
            <select class="form-control" id="tagsBackgroundColorChooser">
              <option value="#ffffff">#ffffff</option>
              <option value="#000000">#000000</option>
              <option value="#ac725e">#ac725e</option>
              <option value="#d06b64">#d06b64</option>
              <option value="#f83a22">#f83a22</option>
              <option value="#fa573c">#fa573c</option>
              <option value="#ff7537">#ff7537</option>
              <option value="#ffad46">#ffad46</option>
              <option value="#42d692">#42d692</option>
              <option value="#008000">#008000</option>
              <option value="#7bd148">#7bd148</option>
              <option value="#fad165">#fad165</option>
              <option value="#FFCC24">#FFCC24</option>
              <option value="#92e1c0">#92e1c0</option>
              <option value="#9fe1e7">#9fe1e7</option>
              <option value="#9fc6e7">#9fc6e7</option>
              <option value="#4986e7">#4986e7</option>
              <option value="#9a9cff">#9a9cff</option>
              <option value="#b99aff">#b99aff</option>
              <option value="#c2c2c2">#c2c2c2</option>
              <option value="#cabdbf">#cabdbf</option>
              <option value="#cca6ac">#cca6ac</option>
              <option value="#f691b2">#f691b2</option>
              <option value="#cd74e6">#cd74e6</option>
              <option value="#a47ae2">#a47ae2</option>
            </select>
          </div>
          <div class="form-group">
            <label class="control-label" for="tagsForegroundColor" data-i18n="ns.dialogs:tagForegroundColor"></label>
            <input type="color" class="form-control" id="tagsForegroundColor" style="padding: 0">
            <select class="form-control" id="tagForegroundColorChooser">
              <option value="#ffffff">#ffffff</option>
              <option value="#cccccc">#cccccc</option>
              <option value="#333333">#333333</option>
              <option value="#000000">#000000</option>
            </select>
          </div>
          <div style="margin-top: 20px;" class="alert alert-warning col-sm-12" role="alert"><i class="fa fa-flask fa-2x"></i>&nbsp;<span
            data-i18n="ns.dialogs:experimentalHelp"></span></div>
          <div class="form-group" id="watchCurrentDirectoryControls">
            <div class="col-sm-12 checkbox">
              <label for="watchCurrentDirectory">
                <input type="checkbox" id="watchCurrentDirectory"/>
                <span data-i18n="ns.dialogs:watchCurrentDirectory"></span><sup class="betaTag">BETA</sup>
              </label>
            </div>
          </div>
        </div>
        {{#if isProVersion}}
        <div class="tab-pane active" id="pro">
          <div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="calculateTagsCheckbox">
                <input type="checkbox" id="calculateTagsCheckbox"/>
                <span data-i18n="ns.dialogs:calculateTag"></span>
              </label>
              <p class="help-block" data-i18n="ns.dialogs:calculateTagHelp"></p>
            </div>
          </div>
          <div class="form-group" id="trashCanArea">
            <div class="col-sm-12 checkbox">
              <label for="useTrashCan">
                <input type="checkbox" id="useTrashCan"/>
                <span data-i18n="ns.dialogs:useTrashCan"></span>
              </label>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="enableMetaData">
                <input type="checkbox" id="enableMetaData"/>
                <span data-i18n="ns.dialogs:enablingUsingMetaFolder"></span><sup class="betaTag">BETA</sup>
              </label>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="writeMetaToSidecarFile">
                <input type="checkbox" id="writeMetaToSidecarFile"/>
                <span data-i18n="ns.dialogs:writeMetaToSidecarFile"></span><sup class="betaTag">BETA</sup>
              </label>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="useGenerateThumbnails">
                <input type="checkbox" id="useGenerateThumbnails"/>
                <span data-i18n="ns.dialogs:useGenerateThumbnails"></span>
              </label>
            </div>
          </div>
          <div>
            <div class="form-group">
              <label for='defaultThumbnailSize' class="col-sm-6 control-label" data-i18n="ns.dialogs:defaultThumbnailSize"></label>
               <div class="col-sm-6">
                 <select class='form-control' id='defaultThumbnailSize'></select>
               </div>
            </div>
          </div>
          <div>
            <div class="form-group">
              <label for='defaultThumbnailFormat' class="col-sm-6 control-label" data-i18n="ns.dialogs:defaultThumbnailFormat"></label>
               <div class="col-sm-6">
                 <select class='form-control' id='defaultThumbnailFormat'></select>
            </div>
          </div>
          </div>
          <div style="margin-top: 20px;" class="alert alert-warning col-sm-12" role="alert"><i class="fa fa-flask fa-2x"></i>&nbsp;<span
            data-i18n="ns.dialogs:experimentalHelp"></span></div>
          <div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="useTextExtraction">
                <input type="checkbox" id="useTextExtraction"/>
                <span data-i18n="ns.dialogs:useTextExtraction"></span><sup class="betaTag">ALPHA</sup>
              </label>
            </div>
          </div>
          <!--div class="form-group">
            <div class="col-sm-12 checkbox">
              <label for="useOCR">
                <input type="checkbox" id="useOCR"/>
                <span data-i18n="ns.dialogs:useOCR"></span>
              </label>
            </div>
          </div-->
          <!--div class='form-group col-sm-12'>
              <label for='tagsDelimiterInput' data-i18n="ns.dialogs:tagDelimiter"></label>
              <input type='text' class='form-control' id='tagsDelimiterInput' />
          </div>
          <div class='form-group col-sm-12'>
              <label for='prefixTagContainerInput' data-i18n="ns.dialogs:prefixTagContainer"></label>
              <input type='text' class='form-control' id='prefixTagContainerInput' />
          </div>
          <div class='form-group col-sm-12'>
              <label for='extensionsPathInput' data-i18n="ns.dialogs:extensionsFolder"></label>
              <input type='text' class='form-control' id='extensionsPathInput' data-i18n="[placeholder]ns.dialogs:extensionsFolderPlaceholder"/>
          </div-->
          <div class="form-group">
            <div class="col-sm-12 ">&nbsp;</div>
          </div>
        </div>
        {{/if}}
        <div class="tab-pane" id="perspectives">
          <button class='btn btn-default' id='addPerspectiveButton'>
            <i class='fa fa-plus'></i>&nbsp;<span data-i18n="ns.dialogs:addPerspectiveButton"></span>
          </button>
          <br><br>

          <div id='perspectiveList'></div>
          <p class="help-block" data-i18n="ns.dialogs:perspectivesHelp"></p>
        </div>
        <div class="tab-pane" id="filetypes">
          <button class='btn btn-default' id='addFileTypeButton'>
            <i class='fa fa-plus'></i>&nbsp;<span data-i18n="ns.dialogs:addNewFileExtensionButton"></span>
          </button>
          <br><br>

          <div id='fileTypesList'></div>
        </div>
        <div class="tab-pane" id="keyBindings">
          <form class="form-horizontal" role="form">
            <button class='btn btn-default' id='keyBindingInstructionsToggle'>
              <i class='fa fa-info-circle'></i>&nbsp;<span data-i18n="ns.dialogs:keyBindingInstructions"></span>
            </button>
            <div class='form-group col-sm-12' id="keyBindingInstructions">
              <p class="help-block"><span data-i18n="ns.dialogs:keyBindingInstructions1"></span>&nbsp;<code>shift</code>,
                <code>ctrl</code>, <code>alt</code>, <code>option</code>, <code>meta</code>, <code>command</code> &amp;
                <code>mod</code>.</p>

              <p class="help-block"><span
                data-i18n="ns.dialogs:keyBindingInstructions2"></span>&nbsp;<code>backspace</code>, <code>tab</code>,
                <code>enter</code>, <code>return</code>, <code>capslock</code>, <code>esc</code>, <code>escape</code>,
                <code>space</code>, <code>pageup</code>, <code>pagedown</code>, <code>end</code>, <code>home</code>,
                <code>left</code>, <code>up</code>, <code>right</code>, <code>down</code>, <code>ins</code> &amp; <code>del</code>.
              </p>

              <p class="help-block"><span data-i18n="ns.dialogs:keyBindingInstructions3"></span>&nbsp;<code>a</code>,
                <code>/</code>, <code>$</code>, <code>*</code>, <code>=</code>.</p>

              <p class="help-block"><span data-i18n="ns.dialogs:keyBindingInstructions4"></span>&nbsp;<code>,</code>.
              </p>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:selectAllFiles"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='selectAllKeyBinding' placeholder='ctrl+a | command+a'/>
              </div>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:reloadDocumentKeyBinding"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='reloadDocumentKeyBinding' placeholder='ctrl+r | command+r'/>
              </div>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:closeDocumentKeyBinding"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='closeDocumentKeyBinding' placeholder='esc'/>
              </div>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:deleteDocumentKeyBinding"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='deleteDocumentKeyBinding' placeholder='esc'/>
              </div>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:openFileKeyBinding"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='openFileKeyBinding' placeholder='esc'/>
              </div>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:openFileExternallyKeyBinding"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='openFileExternallyKeyBinding' placeholder='esc'/>
              </div>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:documentPropertiesKeyBinding"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='documentPropertiesKeyBinding' placeholder='alt+enter'/>
              </div>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:saveDocumentKeyBinding"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='saveDocumentKeyBinding' placeholder='ctrl+s | command+s'/>
              </div>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:nextDocumentKeyBinding"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='nextDocumentKeyBinding' placeholder='right'/>
              </div>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:prevDocumentKeyBinding"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='prevDocumentKeyBinding' placeholder='left'/>
              </div>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:editDocumentKeyBinding"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='editDocumentKeyBinding' placeholder='ctrl+e | command+e'/>
              </div>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:addRemoveTagsKeyBinding"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='addRemoveTagsKeyBinding' placeholder='ctrl+t | command+t'/>
              </div>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:showSearchKeyBinding"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='showSearchKeyBinding' placeholder='ctrl+f | command+f'/>
              </div>
            </div>
            <div class='form-group'>
              <label class="col-sm-4 control-label" data-i18n="ns.dialogs:renamingFileKeyBinding"></label>

              <div class="col-sm-7">
                <input type='text' class='form-control' id='renamingFileKeyBinding' placeholder='f2 | f2'/>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default pull-left" id="saveSettingsRestartButton" data-i18n="ns.dialogs:confirmSaveAndRestartButton"></button>
        <button class="btn btn-primary" id="saveSettingsButton" data-i18n="ns.dialogs:confirmSaveButton"></button>
      </div>
    </div>
  </div>
</div>
