<form id="color-settings" class="dialog-v2" autocomplete="off">
  <div class="content">
    <div class="row">
      {{!-- Select created --}}
      <span>{{localize "dc20rpg.dialog.settings.colorPalette"}}</span>
      <select class="selectable item-type">
        {{selectOptions choices selected=selectedKey}}
      </select>
    </div>
    <button class="close save margin-top-10">{{localize "dc20rpg.dialog.settings.usePalette"}}</button>
  </div>

  {{#if userIsGM}}
  <div class="content">
    {{!-- Create New --}}
    <div class="row margin-top-5 ignore-symetry">
      <span>{{localize "dc20rpg.dialog.settings.addNew"}}</span>
      <div class="right-part-row">
        <input class="new-color-selector"/>
        <a class="add-new fa-lg fa-solid fa-square-plus margin-left-5" title="{{localize "dc20rpg.dialog.settings.addNewTitle"}}"></a>
        {{#ifCond selectedKey '!==' "default"}}
        <a class="export fa-solid fa-file-export margin-left-5" title="{{localize "dc20rpg.dialog.settings.exportSetting"}}"></a>
        <a class="import fa-solid fa-file-import margin-left-5" title="{{localize "dc20rpg.dialog.settings.importSetting"}}"></a>
        {{/ifCond}}
        <a class="live-refresh {{#if liveRefresh}}refresh-on{{/if}} fa-solid fa-rotate-right margin-left-5" title="{{localize "dc20rpg.dialog.settings.liveRefresh"}}"></a>
      </div>
    </div>

    {{!-- Currently editing --}}
    <div class="row margin-top-10 margin-bottom-3 ignore-symetry">
      <span class="big">{{localize "dc20rpg.dialog.settings.currentlyEditing"}}: </span>
      <div class="right-part-row">
        <span class="big">{{selectedKey}}</span>
        {{!-- Button to remove/import/export --}}
        {{#ifCond selectedKey '!==' "default"}}
          <a class="remove-selected fa-lg fa-solid fa-square-minus margin-left-5" data-key="{{selectedKey}}" title="{{localize "dc20rpg.dialog.settings.removeSelected"}}"></a>
        {{/ifCond}}
      </div>
    </div>

    {{!-- Navigation --}}
    <nav class="navigation tabs" data-group="primary">
      <a class="item" data-tab="core">{{localize "dc20rpg.dialog.settings.nav.core"}}</a>
      <a class="item" data-tab="pc">{{localize "dc20rpg.dialog.settings.nav.pc"}}</a>
      <a class="item" data-tab="npc">{{localize "dc20rpg.dialog.settings.nav.npc"}}</a>
      <a class="item" data-tab="other">{{localize "dc20rpg.dialog.settings.nav.other"}}</a>
    </nav>

    {{!-- Creation Here --}} 
    <section class="body">

      <div class="tab" data-group="primary" data-tab="core">
        {{#each selected.core as |color key|}} 
        <div class="row margin-top-3">
          <span>{{key}}</span>
          <color-picker class="update-color-value" {{#ifCond @root.selectedKey '===' "default"}}disabled{{/ifCond}} data-key="{{key}}" value="{{color}}" placeholder="#ffffff"></color-picker>
        </div>
        {{/each}}
      </div>

      <div class="tab" data-group="primary" data-tab="pc">
        {{#each selected.pc as |color key|}} 
        <div class="row margin-top-3">
          <span>{{key}}</span>
          <color-picker class="update-color-value" {{#ifCond @root.selectedKey '===' "default"}}disabled{{/ifCond}} data-key="{{key}}" value="{{color}}" placeholder="#ffffff"></color-picker>
        </div>
        {{/each}}
      </div>

      <div class="tab" data-group="primary" data-tab="npc">
        {{#each selected.npc as |color key|}} 
        <div class="row margin-top-3">
          <span>{{key}}</span>
          <color-picker class="update-color-value" {{#ifCond @root.selectedKey '===' "default"}}disabled{{/ifCond}} data-key="{{key}}" value="{{color}}" placeholder="#ffffff"></color-picker>
        </div>
        {{/each}}
      </div>

      <div class="tab" data-group="primary" data-tab="other">
        {{#each selected.other as |color key|}} 
        <div class="row margin-top-3">
          <span>{{key}}</span>
          <color-picker class="update-color-value" {{#ifCond @root.selectedKey '===' "default"}}disabled{{/ifCond}} data-key="{{key}}" value="{{color}}" placeholder="#ffffff"></color-picker>
        </div>
        {{/each}}
      </div>

    </div>

    <button class="close update margin-top-10 margin-bottom-10">{{localize "dc20rpg.dialog.settings.updatePalette"}}</button>
  </section>
  {{/if}}

</form>