{% raw %}
<div id="main-wrapper" class="main-wrapper">
  <div class="sticky-section left-sticky-section" id="tool-section">
<div class="sticky-section-wrap">
  <div class="vertical-centerer">
    <div class="pen-size-container" title="Pen size<br/>from 1 to 4 pixels" rel="tooltip" data-placement="top">
      <div class="pen-size-option" data-size="1"></div>
      <div class="pen-size-option" data-size="2"></div>
      <div class="pen-size-option" data-size="3"></div>
      <div class="pen-size-option" data-size="4"></div>
    </div>
    <ul id="tools-container" class="tools-wrapper">
      <!-- Drawing tools will be inserted here -->
    </ul>
    <div class="palette-wrapper">
      <div
        class="tool-icon tool-color-picker"
        data-initial-title="Primary - left mouse button"
        rel="tooltip"
        data-placement="right"
      >
        <input id="color-picker" class="color" type="text"/>
      </div>
      <div
        class="tool-icon tool-color-picker"
        data-initial-title="Secondary - right mouse button"
        rel="tooltip"
        data-placement="right"
      >
        <input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
      </div>
      <div
        class="swap-colors-button icon-common-swapcolors-arrow-grey"
        title="Swap colors (X)"
        rel="tooltip"
        data-placement="right"
      ></div>
    </div>
  </div>
</div>

<!-- Templates -->

<!-- Drawing tool icon-button -->
<script type="text/template" id="drawingTool-item-template">
  <li rel="tooltip" data-placement="{{tooltipposition}}" class="{{cssclass}}" data-tool-id="{{toolid}}" title="{{title}}"></li>
</script>
</div>


  <div id="column-wrapper" class="column-wrapper">
    <div class='column left-column'>
      <div id="preview-list-wrapper" class="preview-list-wrapper">
<div id="preview-list-scroller" class="preview-list-scroller">
  <ul class="preview-list" id="preview-list"></ul>
</div>
<div class="top-overflow"></div>
<div class="bottom-overflow"></div>
</div>
    </div>

    <div class='column main-column'>
      <div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
        <div class="canvas-background"></div>
      </div>
    </div>

    <div class="column right-column">
      <div id="animated-preview-container" class="preview-container">
<div class="canvas-container-wrapper minimap-container">
  <div class="preview-contextual-actions">
    <div class="preview-drop-down">
      <div class="preview-disable-overlay" rel="tooltip" data-placement="left"></div>
      <div class="preview-contextual-action  original-size-button" rel="tooltip" data-placement="left">1x</div>
      <div class="preview-contextual-action  best-size-button" rel="tooltip" data-placement="left"></div>
      <div class="preview-contextual-action  full-size-button" rel="tooltip" data-placement="left">Full</div>
    </div>
    <div class="preview-contextual-action  open-popup-preview-button  icon-minimap-popup-preview-arrow-white"
         title="Open preview in popup" rel="tooltip" data-placement="bottom"></div>
  </div>

  <div id="animated-preview-canvas-container" class="canvas-container">
    <div class="canvas-background"></div>
  </div>
</div>
<div>
  <div rel="tooltip"
       data-placement="bottom"
       class="piskel-icon-onion preview-toggle-onion-skin"></div>
  <span id="display-fps" class="display-fps"></span>
  <input id="preview-fps" class="range-fps" type="range" min="0" max="24"/>
</div>
<div>
</div>
</div>
      <div class="toolbox-container layers-list-container">
<h3 class="toolbox-title layers-title">Layers
  <div rel="tooltip"
       data-placement="left"
       class="layers-toggle-preview piskel-icon-eye"></div>
</h3>
<div class="toolbox-buttons">
  <button data-action="add"
    class="button layers-button piskel-icon-plus"
    title="Create a new layer" rel="tooltip" data-placement="top" ></button>

  <button data-action="up"
    class="button layers-button piskel-icon-arrow-up-fat"
    title="Move layer up" rel="tooltip" data-placement="top" ></button>

  <button data-action="down"
    class="button layers-button piskel-icon-arrow-down-fat"
    title="Move layer down" rel="tooltip" data-placement="top" ></button>

  <button data-action="edit"
    class="button layers-button piskel-icon-pencil"
    title="Edit layer name" rel="tooltip" data-placement="top"></button>

  <button data-action="merge"
    class="button layers-button piskel-icon-merge"
    title="Merge with layer below" rel="tooltip" data-placement="top" ></button>

  <button data-action="delete"
    class="button layers-button piskel-icon-close"
    title="Delete selected layer" rel="tooltip" data-placement="top" ></button>

</div>

<ul class="layers-list"></ul>

<script type="text/template" id="layer-item-template">
  <li class="layer-item {{isselected:current-layer-item}}"
      data-layer-index="{{layerindex}}">
      <span class="layer-name" data-placement="top">{{layername}}</span>
      <span class="layer-item-opacity"
            title="Layer opacity" rel="tooltip" data-placement="top">
        {{opacity}}&#945;
      </span>
  </li>
</script>
</div>

      <div class="toolbox-container transformations-container">
<h3 class="toolbox-title transformations-title">Transform</h3>
<ul class="tools-wrapper"></ul>
</div>
      <div class="toolbox-container palettes-list-container">
<h3 class="toolbox-title palettes-title">Palettes</h3>
<div class="toolbox-buttons">
  <button
    class="button palettes-list-button create-palette-button piskel-icon-plus" data-action="add"
    title="Create a new palette" rel="tooltip" data-placement="top" ></button>
  <select class="button palettes-list-select"></select>
  <button
    class="button palettes-list-button edit-palette-button  piskel-icon-pencil" data-action="edit"
    title="Manage this palette" rel="tooltip" data-placement="top"></button>
</div>
<div class="palettes-list-colors"></div>
<script type="text/template" id="palette-color-template">
  <div class="palettes-list-color" data-color="{{color}}" data-color-index="{{index}}" title="{{color}}">
    <div data-color="{{color}}" style="background:{{color}}"></div>
  </div>
</script>

<script type="text/template" id="palettes-list-no-colors-partial">
  <div class="palettes-list-no-colors">
    No color in the selected palette ...
  </div>
</script>

</div>



      <div class="pull-bottom cursor-coordinates"></div>
    </div>
  </div>

  <div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section">
    <div class="sticky-section-wrap">
      <div class="vertical-centerer">
<div
  data-setting="user"
  class="tool-icon icon-settings-gear-white"
  title="<span class='highlight'>PREFERENCES</span></br>"
  rel="tooltip" data-placement="left">
</div>

<div
  data-setting="resize"
  class="tool-icon  icon-settings-resize-white"
  title="<span class='highlight'>RESIZE</span></br>Resize the drawing area"
  rel="tooltip" data-placement="left">
</div>

<div
  data-setting="save"
  class="tool-icon  icon-settings-save-white"
  title="<span class='highlight'>SAVE</span></br>Save to your gallery, save locally<br/>or export as a file"
  rel="tooltip" data-placement="left" >
</div>

<div
  data-setting="export"
  class="tool-icon  icon-settings-export-white"
  title="<span class='highlight'>EXPORT</span></br>Export as Image, as Spritesheet<br/>or as Animated GIF"
  rel="tooltip" data-placement="left">
</div>

<div
  data-setting="import"
  class="tool-icon  icon-settings-open-folder-white"
  title="<span class='highlight'>IMPORT</span></br>Import an existing image,<br/>an animated GIF or a .piskel file"
  rel="tooltip" data-placement="left">
</div>

</div>
      <div class="drawer vertical-centerer">
        <div class="drawer-content" id="drawer-container">
        </div>
      </div>
    </div>
  </div>
</div>

<div id="dialog-container-wrapper">
  <div id="dialog-container">
  </div>
</div>

<div style="display:none">
<script type="text/template" id="progress-bar-template">
  <div class="progress-bar-container">
    <div class="progress-bar-name">{{name}}</div>
    <div class="progress-bar-item progress-bar"></div>
    <div class="progress-bar-item progress-bar-status">{{status}}%</div>
  </div>
</script>

<!-- Tooltip container -->
<script type="text/template" id="tooltip-container-template">
  <div class='tooltip-container'>
    <div>{{helptext}} <span class='tooltip-shortcut'>{{shortcut}}</span></div>
    {{!descriptors!}}
  </div>
</script>

<!-- Tooltip description with modifier -->
<script type="text/template" id="tooltip-modifier-descriptor-template">
  <div class='tooltip-descriptor'>
    <span class='tooltip-descriptor-button'>{{key}}</span>
    {{description}}
  </div>
</script>

<!-- Simple tooltip description -->
<script type="text/template" id="tooltip-simple-descriptor-template">
  <div class='tooltip-descriptor'>
    {{description}}
  </div>
</script>
</div>
<div style="display:none">
<script type="text/template" id="popup-preview-partial">
  <style>
    body,
    .popup-container ,
    .preview-container,
    .background-image-frame-container {
      width : 100%;
      height : 100%;
    }

    body {
      margin: 0;
    }

    .popup-container {
      position: absolute;
      background : #333;
    }

    .preview-container {
      position: relative;
    }

    .background-image-frame-container {
      position: relative;
      background-repeat : no-repeat;
    }

    .canvas-container .canvas-background {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .light-picker-background,
    .light-canvas-background .canvas-background {
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXf39////8zI3BgAAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC') repeat;
    }

    .medium-picker-background,
    .medium-canvas-background .canvas-background {
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEW6urr///82MBGFAAAAHUlEQVR4AWOAAUYoQOePEAUj3v9oYDQ9gMBoegAAJFwCAbLaTIMAAAAASUVORK5CYII=') repeat;
    }

    .lowcont-medium-picker-background,
    .lowcont-medium-canvas-background .canvas-background {
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEXV1dXb29tFGkCIAAAAHklEQVR4AWNghAIGCMDgjwgFCDDSw2M0PSCD0fQAACRcAgF4ciGUAAAAAElFTkSuQmCC ') repeat;
    }

    .lowcont-dark-picker-background,
    .lowcont-dark-canvas-background .canvas-background {
      background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABlBMVEVMTExVVVUnhsEkAAAAHUlEQVR4AWOAAUYoQOePEAUj3v9oYDQ9gMBoegAAJFwCAbLaTIMAAAAASUVORK5CYII=') repeat;
    }
  </style>
  <div class="popup-container  lowcont-dark-canvas-background ">
    <div class="preview-container  canvas-container">
      <div class="canvas-background"></div>
    </div>
  </div>
</script>
</div>

<span class="cheatsheet-link icon-common-keyboard-gold"
      rel="tooltip" data-placement="right" title="Keyboard shortcuts">&nbsp;</span>
<div class="performance-link icon-common-warning-red"
     rel="tooltip" data-placement="left" title="Performance problem detected, learn more.">&nbsp;</div>

<!-- dialogs partials -->
<script type="text/template" id="templates/dialogs/create-palette.html">
<div class="dialog-wrapper">
  <h3 class="dialog-head">
    <span class="dialog-title">Create palette</span>
    <span class="dialog-close">X</span>
  </h3>
  <div class="dialog-create-palette" style="font-size:1.3em">
      <div class="create-palette-section form-section">
        <span class="create-palette-name-label">Name</span>
        <input type="text" class="textfield create-palette-name-input" name="palette-name" placeholder="palette name ..."/>
        <div class="create-palette-import-section">
          <button
            type="button"
            rel="tooltip" data-placement="right" title="Import palette from an existing Image or from a palette file"
            class="button  button-primary create-palette-import-button">Import from file</button>
          <button
            type="button"
            rel="tooltip" data-placement="right" title="Download the palette as a GPL file"
            class="button  button-primary create-palette-download-button">Download as file</button>
          <input style="display:none"
            class="create-palette-import-input"
            type="file" value="file" accept="*"/>
        </div>
      </div>
      <div class="colors-container">
        <ul class="colors-list"></ul>
        <div class="color-picker-container">
          <div class="color-picker-spectrum"></div>
          <div class="color-picker-input">
            <input type="text"  data-model="hex" data-dimension="*" class="textfield  uppercase" value="#000000" />
          </div>
          <div class="color-picker-slider">
            <span>H</span>
            <input type="range" data-model="hsv" data-dimension="h" value="0" min="0" max="359" tabindex="-1"/>
            <input type="text"  data-model="hsv" data-dimension="h" class="textfield" value="0" />
          </div>
          <div class="color-picker-slider">
            <span>S</span>
            <input type="range" data-model="hsv" data-dimension="s" value="0" min="0" max="100" tabindex="-1"/>
            <input type="text"  data-model="hsv" data-dimension="s" class="textfield" value="0" />
          </div>
          <div class="color-picker-slider">
            <span>V</span>
            <input type="range" data-model="hsv" data-dimension="v" value="0" min="0" max="100" tabindex="-1"/>
            <input type="text"  data-model="hsv" data-dimension="v" class="textfield" value="0" />
          </div>
          <br/>
          <div class="color-picker-slider">
            <span>R</span>
            <input type="range" data-model="rgb" data-dimension="r" value="0" min="0" max="255" tabindex="-1"/>
            <input type="text"  data-model="rgb" data-dimension="r" class="textfield" value="0" />
          </div>
          <div class="color-picker-slider">
            <span>G</span>
            <input type="range" data-model="rgb" data-dimension="g" value="0" min="0" max="255" tabindex="-1"/>
            <input type="text"  data-model="rgb" data-dimension="g" class="textfield" value="0" />
          </div>
          <div class="color-picker-slider">
            <span>B</span>
            <input type="range" data-model="rgb" data-dimension="b" value="0" min="0" max="255" tabindex="-1"/>
            <input type="text"  data-model="rgb" data-dimension="b" class="textfield" value="0" />
          </div>
          <div class="color-preview"></div>
        </div>
      </div>
      <div class="create-palette-actions">
        <button type="button" name="create-palette-cancel" data-action="cancel" class="button create-palette-cancel">Cancel</button>
        <button type="button" name="create-palette-delete" data-action="delete" class="button button-primary create-palette-delete">Delete</button>
        <!-- <button type="button" name="create-palette-clone" class="button button-primary create-palette-clone">Save as new</button> -->
        <button type="button" name="create-palette-submit" data-action="submit" class="button button-primary create-palette-submit">Save</button>
      </div>
  </div>
</div>
</script>

<script type="text/template" id="create-palette-color-template">
<li
  class="create-palette-color {{:selected}} {{:light-color}}"
  style="background:{{color}}"
  data-palette-index="{{index}}"
  data-palette-color="{{color}}">
  <div class="create-palette-remove-color">X</div>
</li>
</script>
<script type="text/template" id="templates/dialogs/import-image.html">
<div class="dialog-wrapper">
  <h3 class="dialog-head">
    Import Image
    <span class="dialog-close">X</span>
  </h3>
  <div class="dialog-import-body">
    <form action="" method="POST" name="import-image-form">
      <div class="import-section">
        <span class="dialog-section-title">Name :</span><span class="import-image-file-name"></span>
      </div>
      <div class="import-section">
        <div class="import-section-preview-title">Preview :</div>
        <div class="import-section-preview"></div>
      </div>
      <div class="import-section">
        <label class="dialog-section-radio-label">
          <input class="dialog-section-radio" name="import-type" value="single" type="radio" checked="checked">
          Import as single image
        </label>
      </div>
      <div class="import-section import-subsection">
        <span class="dialog-section-title">Resize to</span>
        <input type="text" class="textfield import-size-field" name="resize-width"/>x
        <input type="text" class="textfield import-size-field" name="resize-height"/>
      </div>
      <div class="import-section import-subsection">
        <span class="import-section-title">Smooth resize</span>
        <input type="checkbox" class="checkbox-fix" checked="checked" name="smooth-resize-checkbox" value="1"/>
      </div>
      <div class="import-section">
        <label class="dialog-section-radio-label">
          <input class="dialog-section-radio" name="import-type" value="sheet" type="radio">
          Import as spritesheet
        </label>
      </div>
      <div class="import-section import-subsection">
        <span class="dialog-section-title">Frame size</span>
        <input type="text" class="textfield import-size-field" name="frame-size-x"/>x
        <input type="text" class="textfield import-size-field" name="frame-size-y"/>
      </div>
      <div class="import-section import-subsection">
        <span class="dialog-section-title">Offset</span>
        <input type="text" class="textfield import-size-field" name="frame-offset-x"/>x
        <input type="text" class="textfield import-size-field" name="frame-offset-y"/>
      </div>
      <input type="submit" name="import-submit" class="button button-primary import-button" value="Import"/>
    </form>
  </div>
</div>
</script>
<script type="text/template" id="templates/dialogs/browse-local.html">
<div class="dialog-wrapper">
  <h3 class="dialog-head">
    Browse Local Piskels
    <span class="dialog-close">X</span>
  </h3>
  <div class="dialog-content" style="padding:10px 20px; font-size:1.5em; overflow: auto;">
    <table class="local-piskel-list">
      <thead>
        <tr class="local-piskel-list-head">
          <td class="local-piskel-name">Name</td>
          <td class="local-piskel-save-date">Date</td>
          <td colspan=2>Actions</td>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>
</script>

<script type="text/template" id="local-storage-item-template">
<tr class="local-piskel-item">
  <td class="local-piskel-name">{{name}}</td>
  <td class="local-piskel-save-date">{{date}}</td>
  <td><button type="button" data-action="load" data-name="{{name}}" class="button button-primary local-piskel-load-button">Load</button></td>
  <td><button type="button" data-action="delete" data-name="{{name}}" class="button local-piskel-delete-button">Delete</button></td>
</tr>
</script>
<script type="text/template" id="templates/dialogs/cheatsheet.html">
<div id="cheatsheetContainer" class="dialog-wrapper">
  <h3 class="dialog-head">
    <span class="dialog-title">Keyboard shortcuts</span>
    <span class="dialog-close">X</span>
  </h3>
  <div class="cheatsheet-container dialog-content">
    <div class="cheatsheet-section">
      <h3 class="cheatsheet-title">Tool shortcuts</h3>
      <ul class="cheatsheet-tool-shortcuts"></ul>
    </div>
    <div class="cheatsheet-section">
      <h3 class="cheatsheet-title">Misc shortcuts</h3>
      <ul class="cheatsheet-misc-shortcuts"></ul>
    </div>
    <div class="cheatsheet-boxes">
      <div class="cheatsheet-section">
        <h3 class="cheatsheet-title">Selection shortcuts</h3>
        <ul class="cheatsheet-selection-shortcuts"></ul>
      </div>
      <div class="cheatsheet-section">
        <h3 class="cheatsheet-title">Color shortcuts</h3>
        <ul class="cheatsheet-color-shortcuts"></ul>
      </div>
      <div class="cheatsheet-section">
        <h3 class="cheatsheet-title">Storage shortcuts</h3>
        <ul class="cheatsheet-storage-shortcuts"></ul>
      </div>
    </div>
  </div>
  <div class="cheatsheet-actions">
    <span class="cheatsheet-helptext" rel="tooltip" data-placement="top" title="!!!Set in CheatsheetController!!!"><b>Customize shortcuts ?</b></span>
    <button type="button" name="cheatsheet-restore-defaults" data-action="restore-defaults" class="button cheatsheet-button cheatsheet-restore-defaults">Restore default shortcuts</button>
  </div>

  <!-- Event trap to capture keyboard remaps -->
  <div style="position:relative; overflow:hidden; width:1px; height:1px;">
    <input type="text" id="cheatsheetEventTrap" style="position:absolute; top:-1000px;" />
  </div>
</div>
</script>

<script type="text/template" id="cheatsheet-shortcut-template">
<li class="cheatsheet-shortcut {{className}}" data-shortcut-id="{{id}}">
  <div class="cheatsheet-icon {{icon}}"></div>
  <span class="cheatsheet-key" rel="tooltip" data-placement="top" title="{{title}}">{{key}}</span>
  <span class="cheatsheet-description">{{description}}</span>
</li>
</script>
<script type="text/template" id="templates/dialogs/performance-info.html">
<div class="dialog-wrapper">
  <h3 class="dialog-head">
    Performance issues
    <span class="dialog-close">X</span>
  </h3>
  <div class="dialog-performance-info-body">
    <p>The current sprite may exceed the recommendations for Piskel.</p>
    <p>You can ignore this warning and continue working with your sprite but you might experience the following issues:</p>
    <ul>
      <li>saving failures</li>
      <li>slowdowns</li>
      <li>crashes</li>
    </ul>
    <p>If you ignore this warning, please save often!</p>
    <p>To fix the issue, try adjusting your sprite settings:</p>
     <ul>
      <li>sprite resolution <sup title="recommended: lower than 256x256, max: 512x512" rel="tooltip" data-placement="top">?</sup></li>
      <li>number of layers <sup title="recommended: lower than 5, max: 20" rel="tooltip" data-placement="top">?</sup></li>
      <li>number of frames <sup title="recommended: lower than 25, max: 100" rel="tooltip" data-placement="top">?</sup></li>
      <li>number of colors <sup title="max: 100" rel="tooltip" data-placement="top">?</sup></li>
    </ul>
    <p>We strive to improve Piskel, its performance and stability, but this is a personal project with limited time and resources.
       We prefer to warn you early rather than having you lose your work.</p>
    <p>Feedback welcome at <a href="https://github.com/juliandescottes/piskel" target="_blank">https://github.com/juliandescottes/piskel</a></p>
    <p>
      <div class="warning-icon icon-common-warning-red">&nbsp;</div>
      <div class="warning-icon-info">This icon will remain on the bottom-right of the application until the performance issue is fixed. You can click on it at anytime to display this information again.</div>
    </p>
  </div>
</div>
</script>
<script type="text/template" id="templates/dialogs/unsupported-browser.html">
<div class="dialog-wrapper">
  <h3 class="dialog-head">
    Browser not supported
    <span class="dialog-close">X</span>
  </h3>
  <div class="dialog-content">
    <p>Your current browser (<span id="current-user-agent"></span>) is not supported.</p>
    <p>Piskel is currently tested for:</p>
    <ul class="supported-browser-list">
      <li>Google Chrome <a href="https://www.google.com/chrome/browser/desktop/" target="_blank">https://www.google.com/chrome/browser/desktop/</a></li>
      <li>Mozilla Firefox <a href="https://www.mozilla.org/en-US/firefox/" target="_blank">https://www.mozilla.org/en-US/firefox/</a></li>
      <li>Microsoft Edge <a href="https://www.microsoft.com/en-us/windows/microsoft-edge" target="_blank">https://www.microsoft.com/en-us/windows/microsoft-edge</a></li>
    </ul>
    <p>This browser has not been tested with Piskel, you might experience unknown bugs and crashes if you decide to continue.</p>
  </div>
</div>
</script>

<!-- settings-panel partials -->
<script type="text/html" id="templates/settings/application.html">
<form action="" method="POST" name="application-settings-form">
  <div class="settings-section settings-section-application">
    <div class="settings-title">
      General
    </div>

    <div class="settings-item">
      <label>Background</label>
      <div class="background-picker-wrapper">
        <div class="background-picker light-picker-background" data-background="light-canvas-background"
              rel="tooltip" data-placement="bottom" title="light / high contrast">
        </div>
        <div class="background-picker medium-picker-background" data-background="medium-canvas-background"
              rel="tooltip" data-placement="bottom" title="medium / high contrast">
        </div>
        <div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
              rel="tooltip" data-placement="bottom" title="medium / low contrast">
        </div>
        <div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
              rel="tooltip" data-placement="bottom" title="dark / low contrast">
        </div>
      </div>
    </div>

    <div class="settings-item">
      <label for="grid-width">Pixel grid</label>
      <select id="grid-width" class="grid-width-select">
        <option value="0">Disabled</option>
        <option value="1">1px</option>
        <option value="2">2px</option>
        <option value="3">3px</option>
        <option value="4">4px</option>
      </select>
    </div>

    <div class="settings-item">
      <label>Layer opacity</label>
      <input type="range" class="settings-opacity-input layer-opacity-input" name="layer-opacity" min="0"  max="1" step="0.05"/>
      <span class="settings-opacity-text layer-opacity-text"></span>
    </div>

    <div class="settings-item">
      <label>
        Seamless drawing mode
        <input type="checkbox" value="1" class="seamless-mode-checkbox" name="seamless-mode-checkbox"/>
      </label>
    </div>

    <div class="settings-item">
      <label>Seamless opacity</label>
      <input type="range" class="settings-opacity-input seamless-opacity-input" name="seamless-opacity" min="0"  max="0.5" step="0.01"/>
      <span class="settings-opacity-text seamless-opacity-text"></span>
    </div>

    <div class="settings-item">
      <label>Maximum FPS</label>
      <input type="text" class="textfield  textfield-small  max-fps-input" autocomplete="off" name="max-fps"/>
    </div>

    <div class="settings-item">
      <label for="color-format">Color format</label>
      <select id="color-format" class="color-format-select">
        <option value="hex">Hex</option>
        <option value="rgb">RGB</option>
      </select>
    </div>

    <input type="submit" class="button button-primary" value="Apply settings" />
  </div>
</form>
</script>

<script type="text/html" id="templates/settings/resize.html">
<div class="settings-section settings-section-resize">
  <!-- RESIZE DRAWING SECTION -->
  <div class="settings-title">
    Resize
  </div>
  <div class="settings-item  resize-canvas">
    <form action="" method="POST" name="resize-canvas-form">
      <div class="resize-section">
        <span  class="resize-section-title">Width</span>
        <input type="text" class="textfield resize-size-field" autocomplete="off" name="resize-width"/>
        <span>px</span>
      </div>
      <div class="resize-section">
        <span  class="resize-section-title">Height</span>
        <input type="text" class="textfield resize-size-field" autocomplete="off" name="resize-height"/>
        <span>px</span>
      </div>
      <div class="resize-section">
        <label>
          <input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true"/>
          <span>Maintain aspect ratio</span>
        </label>
      </div>
      <div class="resize-section">
        <label>
          <input type="checkbox" class="resize-content-checkbox checkbox-fix" value="true"/>
          <span>Resize canvas content</span>
        </label>
      </div>
      <div class="resize-section">
        <span  class="resize-section-title">Anchor</span>
        <div class="resize-origin-container">
          <div class="resize-origin-option"  title="top left"      data-origin="TOPLEFT"></div>
          <div class="resize-origin-option"  title="top"           data-origin="TOP"></div>
          <div class="resize-origin-option"  title="top right"     data-origin="TOPRIGHT"></div>
          <div class="resize-origin-option"  title="middle left"   data-origin="MIDDLELEFT"></div>
          <div class="resize-origin-option"  title="middle"        data-origin="MIDDLE"></div>
          <div class="resize-origin-option"  title="middle right"  data-origin="MIDDLERIGHT"></div>
          <div class="resize-origin-option"  title="bottom left"   data-origin="BOTTOMLEFT"></div>
          <div class="resize-origin-option"  title="bottom"        data-origin="BOTTOM"></div>
          <div class="resize-origin-option"  title="bottom right"  data-origin="BOTTOMRIGHT"></div>
        </div>
      </div>
      <input type="submit" class="button button-primary resize-button" value="Resize" />
    </form>
  </div>
  <!-- DEFAULT SIZE SECTION -->
  <div class="settings-title">
    Default size
  </div>
  <div class="settings-item  settings-default-size">
    <form action="" method="POST" name="default-size-form">
      <div class="resize-section">
        <span  class="resize-section-title">Width</span>
        <input type="text" class="textfield resize-size-field" autocomplete="off" name="default-width"/>
        <span>px</span>
      </div>
      <div class="resize-section">
        <span  class="resize-section-title">Height</span>
        <input type="text" class="textfield resize-size-field" autocomplete="off" name="default-height"/>
        <span>px</span>
      </div>
      <input type="submit" class="button button-primary default-size-button" value="Set default" />
    </form>
  </div>
</div>
</script>

<script type="text/template" id="templates/settings/save.html">
<div class="settings-section settings-section-save">
  <form action="" method="POST" class="save-form" name="save-form">
    <div class="settings-title">Sprite Information</div>
    <div class="settings-item">
      <div class="settings-form-section" style="overflow:hidden">
        <label class="row" style="line-height:20px;">Title : </label>
        <input id="save-name" type="text" class="save-field textfield" autocomplete="off" />
      </div>
      <div class="settings-form-section">
        <label class="row" style="line-height:20px;">Description : </label>
        <textarea id="save-description" class="save-field textfield"></textarea>
      </div>
      <div class="settings-form-section  save-public-section">
        <label class="row">
          Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
        </label>
      </div>
    </div>
  </form>
</div>
</script>

<!-- save-gallery-partial -->
<script type="text/template" id="save-gallery-partial">
<div class="settings-title">Save online</div>
<div class="settings-item">
  <input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
  <div class="save-status save-online-status">Your piskel will be stored online in your gallery.</div>
</div>
</script>

<script type="text/template" id="save-gallery-warning-partial">
<div class="save-status-warning-icon icon-common-warning-red">&nbsp;</div>
<div class="save-status-warning-text">Saving to the gallery might fail due to the sprite size.</div>
</script>

<!-- save-gallery-unavailable-partial -->
<script type="text/template" id="save-gallery-unavailable-partial">
<div class="settings-title">Save online</div>
<div class="settings-item">
  <div class="save-status">Login to <a href="http://piskelapp.com" target="_blank">piskelapp.com</a> to save and share your sprites online.</div>
</div>
</script>

<!-- save-localstorage-partial -->
<script type="text/template" id="save-localstorage-partial">
<div class="settings-title">Save offline in Browser</div>
<div class="settings-item">
  <input type="button" class="button button-primary" id="save-localstorage-button" value="Save in Browser" />
  <div class="save-status">Your piskel will be saved locally and will only be accessible from this browser.</div>
</div>
</script>

<!-- save-desktop-partial -->
<script type="text/template" id="save-desktop-partial">
<div class="settings-title">Save as File</div>
<div class="settings-item">
  <input type="button" class="button button-primary" id="save-desktop-button" value="Save" />
  <input type="button" class="button button-primary" id="save-desktop-as-new-button" value="Save as ..." />
  <div class="save-status">Your sprite will be saved as a .piskel file.</div>
</div>
</script>

<!-- save-file-download-partial -->
<script type="text/template" id="save-file-download-partial">
<div class="settings-title">Save offline as File</div>
<div class="settings-item">
  <input type="button" class="button button-primary" id="save-file-download-button" value="Save as .piskel" />
  <div class="save-status">Your sprite will be downloaded as a .piskel file.</div>
</div>
</script>
<script type="text/template" id="templates/settings/import.html">
<div class="settings-section settings-section-import">
  <div class="settings-title">
    Load from Browser
  </div>
  <div class="settings-item">
    <span>Load a <span class="import-highlight">local piskel</span> saved in this Browser</span>
    <div class="import-section">
      <button type="button" class="button  button-primary browse-local-button">Browse local saves</button>
    </div>
  </div>
  <div class="settings-title">
    Load .piskel file
  </div>
  <div class="settings-item">
    <span>Load a <span class="import-highlight">.piskel</span> file from your computer</span>

    <div class="import-section">
      <button type="button" class="button  button-primary open-piskel-button">Browse .piskel files</button>
      <span class="file-input-open-piskel-status"></span>
      <input style="display:none"
        type="file" name="open-piskel-input"
        value="file" accept=".piskel"/>
    </div>
  </div>
  <div class="settings-title">
    Import From Picture
  </div>
  <div class="settings-item">
    <div style="margin-top:5px;margin-bottom:5px;">Supports <span class="import-highlight">PNG, JPG, BMP, Animated GIF</span></div>
    <div class="import-section">
      <button type="button" class="button  button-primary file-input-button">Browse images</button>
      <input style="display:none"
        type="file" name="file-upload-input"
        value="file" accept="image/*"/>
    </div>
  </div>
  <div class="settings-title">
    Recover recent sessions
  </div>
  <div class="settings-item previous-session">
  </div>
</div>
</script>

<script type="text/template" id="previous-session-info-template">
<div>
  Restore a backup of <span class="highlight">{{name}}</span>, saved at <span style="color:white">{{date}}</span> ?
  <div style="margin-top:10px;">
    <button type="button" class="button  button-primary restore-session-button">Restore</button>
  </div>
</div>
</script>
<script type="text/html" id="templates/settings/export.html">
<div class="settings-section settings-section-export">
  <div class="settings-title">Export</div>
  <div class="settings-item export-scale" title="Scale the animation for export"
      rel="tooltip"
      data-placement="top">
    <label for="scale-input">Scale</label>
    <input type="range" class="scale-input" name="scale-input" min="1"  max="32" step="1"/>
    <span class="scale-text"></span>
  </div>
  <div class="settings-item export-resize">
    <span class="resize-label">Resolution</span>
    <input type="text" class="textfield  resize-field  resize-width" autocomplete="off" name="resize-width"/>
    <div class="resize-label">x</div>
    <input type="text" class="textfield  resize-field  resize-height" autocomplete="off" name="resize-height"/>
  </div>
  <div class="export-tabs">
    <div class="export-tab" data-tab-id="gif">GIF</div>
    <div class="export-tab" data-tab-id="png">PNG</div>
    <div class="export-tab" data-tab-id="zip">Zip</div>
    <div class="export-tab" data-tab-id="misc">Others</div>
  </div>
  <div class="export-panel"></div>
</div>
</script>

<script type="text/html" id="templates/settings/export/png.html">
<div class="export-panel-png">
  <div class="export-panel-header export-info">Export your animation as a PNG spritesheet containing all frames.</div>
  <div class="export-panel-section  png-export-layout-section">
    <div class="highlight" style="padding-bottom: 5px;">Spritesheet layout options:</div>
    <div style="display: flex; line-height: 20px;">
      <div style="flex: 1;">
        <span>Columns</span>
        <input type="number" min="1" class="textfield" id="png-export-columns" name="png-export-columns">
      </div>
      <div style="flex: 1;">
        <span>Rows</span>
        <input readonly="true" class="textfield" id="png-export-rows" name="png-export-rows">
      </div>
    </div>
  </div>
  <div class="export-panel-section export-panel-row">
    <button type="button" class="button button-primary png-download-button">Download</button>
    <span class="png-export-dimension-info export-info"></span>
  </div>
  <div class="export-panel-section export-panel-row png-export-datauri-section">
    <button type="button" style="white-space: nowrap;" class="button button-primary datauri-open-button">To data-uri</button>
    <span class="png-export-datauri-info export-info">Open the PNG export in your browser as a data-uri</span>
  </div>

  <div class="export-panel-section">
    <div style="padding-bottom: 5px">
      <span class="highlight export-panel-row">Export for PixiJS Movie: </span>
    </div>
    <div class="export-panel-row">
      <button type="button" class="button button-primary png-pixi-download-button"/>Download</button>
      <span class="png-export-dimension-info export-info">Spritesheet with JSON metadata</span>
    </div>

  </div>

</div>
</script>

<script type="text/html" id="templates/settings/export/gif.html">
<div class="export-panel-gif">
  <div class="export-panel-header export-info">
    Convert your sprite to an animated GIF. Opacity will not be preserved. Colors might be resampled.
  </div>
  <div class="export-panel-section export-panel-row">
    <button type="button" class="button button-primary gif-download-button">Download</button>
    <div class="export-info">Download as an animated GIF.</div>
  </div>
  <div class="export-panel-section export-panel-row">
    <button type="button" class="button button-primary gif-upload-button">Upload</button>
    <div class="export-info">Upload as an animated GIF to a public URL.</div>
  </div>
  <div class="gif-upload">
    <div class="gif-export-preview"></div>
    <div class="gif-upload-status"></div>
  </div>
</div>
</script>
<script type="text/html" id="templates/settings/export/zip.html">
<div class="export-panel-zip">
  <div class="export-panel-header export-info">ZIP archive containing one PNG for each frame. File names will start with the prefix below.</div>
  <div class="export-panel-section">
    <div style="display: flex; line-height: 23px;">
      <label style="flex-shrink: 0; padding-right:5px;">Prefix</label>
      <input type="text" style="flex: 1;" class="zip-prefix-name textfield"
             autocomplete="off" placeholder="PNG file prefix ...">
    </div>
    <div style="margin: 5px 0;">
      <input id="zip-split-layers" class="zip-split-layers-checkbox checkbox-fix" type="checkbox" />
      <label for="zip-split-layers">Split by layers</label>
    </div>
    <button type="button" class="button button-primary zip-generate-button"/>Download ZIP</button>
  </div>
</div>
</script>
<script type="text/html" id="templates/settings/export/misc.html">
<div class="export-panel-misc">
  <div class="export-panel-header export-info">
    Less usual export formats. Feedback and improvements welcome.
  </div>
  <div class="export-panel-section">
    <div style="padding-bottom: 5px">
      <span class="highlight">Export as C File: </span>
      <span class="export-info">
        C file with frame rendered as array.
      </span>
    </div>
    <button type="button" class="button button-primary c-download-button">Download C file</button>
  </div>
  <div class="export-panel-section">
    <div style="padding-bottom: 5px">
      <span class="highlight">Export selected frame as PNG File: </span>
      <span class="export-info">
        PNG export of the currently selected frame.
      </span>
    </div>
    <button type="button" class="button button-primary selected-frame-download-button">Download</button>
  </div>
</div>
</script>

<script type="text/javascript">
  (function () {

/**
 * See @Gruntfile.js => after build, -2017-05-05-03-16 is replaced by the build version
 */
var version = '-2017-05-05-03-16';
var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
if (versionHasNotBeenReplaced)  {
  version = '';
}

if (!window.piskelReadyCallbacks) {
  window.piskelReadyCallbacks = [];
}

window._onPiskelReady = function () {
  var loadingMask = document.getElementById('loading-mask');
  loadingMask.style.opacity = 0;
  window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600);
  pskl.app.init();
  // cleanup
  delete window.pskl_exports;
  delete window.loadDebugScripts;
  delete window.done;

  // Run Piskel ready callbacks
  for (var i = 0; i < window.piskelReadyCallbacks.length; i++) {
    window.piskelReadyCallbacks[i]();
  }
};

var prefixPath = function (path) {
  if (window.pskl && window.pskl.appEngineToken_) {
    return '../' + path;
  } else {
    return path;
  }
};

var loadScript = function (src, callback) {
  src = prefixPath(src);
  var script = window.document.createElement('script');
  script.setAttribute('src',src);
  script.setAttribute('onload',callback);
  window.document.body.appendChild(script);
};

var loadStyle = function (src) {
  src = prefixPath(src);
  var link = document.createElement('link');
  link.setAttribute('href', src);
  link.setAttribute('rel', 'stylesheet');
  link.setAttribute('type', 'text/css');
  document.head.appendChild(link);
};

if (window.location.href.indexOf('debug') != -1) {
  window.pskl_exports = {};
  var scriptIndex = 0;
  window.loadNextScript = function () {
    if (scriptIndex == window.pskl_exports.scripts.length) {
      window._onPiskelReady();
    } else {
      loadScript(window.pskl_exports.scripts[scriptIndex], 'loadNextScript()');
      scriptIndex ++;
    }
  };
  loadScript('piskel-script-list.js', 'loadNextScript()');

  window.loadStyles = function () {
    var styles = window.pskl_exports.styles;
    for (var i = 0 ; i < styles.length ; i++) {
      loadStyle(styles[i]);
    }
  };
  loadScript('piskel-style-list.js', 'loadStyles()');
} else {
  var script;
  if (window.location.href.indexOf('pack') != -1) {
    script = 'js/piskel-packaged' + version + '.js';
  } else {
    script = 'js/piskel-packaged-min' + version + '.js';
  }

  loadStyle('css/piskel-style-packaged' + version + '.css');
  loadScript(script, '_onPiskelReady()');
}
})();
</script>
{% endraw %}