<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>


