<div class="color-scheme show-current-style">
  <div class="admin-container">
    <h1>{{#if model.theme_id}}{{model.name}}{{else}}{{text-field class="style-name" value=model.name}}{{/if}}</h1>
    <div class="controls">
      {{#unless model.theme_id}}
        {{d-button
          class="btn-primary"
          action=(action "save")
          disabled=model.disableSave
          label="admin.customize.save"
        }}
      {{/unless}}
      {{d-button
        class="btn-default"
        action=(action "copy" model)
        icon="copy"
        label="admin.customize.copy"
      }}
      {{d-button
        class="btn-default"
        action=(action "copyToClipboard" model)
        icon="far-clipboard"
        label="admin.customize.copy_to_clipboard"
      }}
      <span class="saving {{unless model.savingStatus "hidden"}}">{{model.savingStatus}}</span>
      {{#if model.theme_id}}
        <span class="not-editable">
          {{i18n "admin.customize.theme_owner"}}
          {{#link-to "adminCustomizeThemes.show" model.theme_id}}{{model.theme_name}}{{/link-to}}
        </span>
      {{else}}
        {{d-button
          action=(action "destroy")
          class="btn-danger"
          icon="far-trash-alt"
          label="admin.customize.delete"
        }}
      {{/if}}
    </div>

    <br>

    <div class="admin-controls">
      {{#unless model.theme_id}}
        <div class="pull-right">
          <label>
            {{input type="checkbox" checked=onlyOverridden}}
            {{i18n "admin.settings.show_overriden"}}
          </label>
        </div>
      {{/unless}}

      <div>
        {{#if model.theme_id}}
          {{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.color_scheme_user_selectable" checked=model.user_selectable modelId=model.id}}
        {{else}}
          <label>
            {{input type="checkbox" checked=model.user_selectable}}
            {{i18n "admin.customize.theme.color_scheme_user_selectable"}}
          </label>
        {{/if}}
      </div>
    </div>

    {{#if colors.length}}
      <table class="table colors">
        <thead>
          <tr>
            <th></th>
            <th class="hex">{{i18n "admin.customize.color"}}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {{#each colors as |c|}}
            <tr class="{{if c.changed "changed"}} {{if c.valid "valid" "invalid"}}">
              <td class="name" title={{c.name}}>
                <h3>{{c.translatedName}}</h3>
                <p class="description">{{c.description}}</p>
              </td>
              <td class="hex">{{color-input hexValue=c.hex brightnessValue=c.brightness valid=c.valid}}</td>
              <td class="actions">
                {{#unless model.theme_id}}
                  {{d-button
                    class=(concat "btn-default revert " (unless c.savedIsOverriden "invisible"))
                    action=(action "revert" c)
                    title="admin.customize.colors.revert_title"
                    label="revert"}}
                  {{d-button
                    class=(concat "btn-default undo " (unless c.changed "invisible"))
                    action=(action "undo" c)
                    title="admin.customize.colors.undo_title"
                    label="undo"}}
                {{/unless}}
              </td>
            </tr>
          {{/each}}
        </tbody>
      </table>
    {{else}}
      <p>{{i18n "search.no_results"}}</p>
    {{/if}}
  </div>
</div>
