{% load i18n cc_admin %}
{% if cc.palette %}
<dialog class="cc-dialog cc-palette" data-palette aria-label="{% translate 'Command palette' %}">
  <div class="cc-palette-box">
    <label class="cc-palette-input">{% icon "search" %}<input type="text" placeholder="{% translate 'Search models, records, actions…' %}" data-palette-input autocomplete="off" spellcheck="false"><kbd>esc</kbd></label>
    <div class="cc-palette-list" data-palette-list role="listbox"></div>
    <div class="cc-palette-foot">
      <span><kbd>↑</kbd><kbd>↓</kbd> {% translate 'move' %}</span>
      <span><kbd>↵</kbd> {% translate 'open' %}</span>
      <span><kbd data-mod>⌘</kbd><kbd>↵</kbd> {% translate 'new tab' %}</span>
      <span class="cc-palette-hint" data-palette-hint></span>
    </div>
  </div>
</dialog>
{% endif %}
{% if cc.switcher %}
<dialog class="cc-dialog cc-theme-panel" data-theme-panel aria-label="{% translate 'Theme' %}">
  <div class="cc-panel-head">
    <div><b>{% translate 'Appearance' %}</b><small>{% translate 'Saved in this browser.' %}</small></div>
    <button type="button" class="cc-icon-btn" data-close aria-label="{% translate 'Close' %}">{% icon "x" %}</button>
  </div>
  <div class="cc-panel-row">
    <span class="cc-panel-label">{% translate 'Mode' %}</span>
    <div class="cc-segment" data-pref="scheme">
      <button type="button" data-value="auto">{% icon "monitor" %}<span>{% translate 'Auto' %}</span></button>
      <button type="button" data-value="light">{% icon "sun" %}<span>{% translate 'Light' %}</span></button>
      <button type="button" data-value="dark">{% icon "moon" %}<span>{% translate 'Dark' %}</span></button>
    </div>
  </div>
  <div class="cc-panel-row">
    <span class="cc-panel-label">{% translate 'Density' %}</span>
    <div class="cc-segment" data-pref="density">
      <button type="button" data-value="compact">{% icon "rows-3" %}<span>{% translate 'Compact' %}</span></button>
      <button type="button" data-value="comfortable">{% icon "rows-3" %}<span>{% translate 'Default' %}</span></button>
      <button type="button" data-value="spacious">{% icon "rows-3" %}<span>{% translate 'Roomy' %}</span></button>
    </div>
  </div>
  {% if cc.appearance %}
  <div class="cc-appearance">
    {% if cc.appearance.accent %}
    <div class="cc-panel-row">
      <span class="cc-panel-label">{% translate 'Accent' %}</span>
      <div class="cc-swatches" data-pref="accent">
        <button type="button" data-value="" class="cc-swatch cc-swatch-auto" title="{% translate 'Theme default' %}">{% icon "sparkles" %}</button>
        {% for color in cc.appearance.accents %}<button type="button" data-value="{{ color }}" class="cc-swatch" style="--sw:{{ color }}" title="{{ color }}"></button>{% endfor %}
        <label class="cc-swatch cc-swatch-pick" title="{% translate 'Pick a colour' %}">{% icon "pipette" %}<input type="color" data-accent-pick></label>
      </div>
    </div>
    {% endif %}
    {% if cc.appearance.font %}
    <div class="cc-panel-row">
      <span class="cc-panel-label">{% translate 'Font' %}</span>
      <select class="cc-select-sm" data-pref-select="font">
        <option value="">{% translate 'Theme default' %}</option>
        {% for font in cc.appearance.fonts %}<option value="{{ font.key }}" style="font-family:{{ font.stack }}">{{ font.label }}</option>{% endfor %}
      </select>
    </div>
    {% endif %}
    {% if cc.appearance.font_size %}
    <div class="cc-panel-row">
      <span class="cc-panel-label">{% translate 'Text size' %}</span>
      <div class="cc-segment" data-pref="size">
        <button type="button" data-value="">{% translate 'Auto' %}</button>
        {% for size in cc.appearance.sizes %}<button type="button" data-value="{{ size }}">{{ size }}</button>{% endfor %}
      </div>
    </div>
    {% endif %}
    {% if cc.appearance.radius %}
    <div class="cc-panel-row">
      <span class="cc-panel-label">{% translate 'Corners' %}</span>
      <div class="cc-segment" data-pref="radius">
        <button type="button" data-value="">{% translate 'Auto' %}</button>
        <button type="button" data-value="sharp"><i class="cc-corner" style="--r:0"></i><span>{% translate 'Sharp' %}</span></button>
        <button type="button" data-value="soft"><i class="cc-corner" style="--r:3px"></i><span>{% translate 'Soft' %}</span></button>
        <button type="button" data-value="round"><i class="cc-corner" style="--r:7px"></i><span>{% translate 'Round' %}</span></button>
      </div>
    </div>
    {% endif %}
    <button type="button" class="cc-link-btn" data-appearance-reset>{% icon "rotate-ccw" %}<span>{% translate 'Reset to theme' %}</span></button>
  </div>
  {% endif %}
  <div class="cc-theme-grid" data-pref="theme">
    {% for theme in cc.themes %}
      <button type="button" class="cc-theme-card" data-value="{{ theme.key }}" style="--s0:{{ theme.swatch.0 }};--s1:{{ theme.swatch.1 }};--s2:{{ theme.swatch.2 }};--s3:{{ theme.swatch.3 }}">
        <span class="cc-theme-mini cc-mini-{{ theme.layout }}"><i></i><i></i><i></i><i></i></span>
        <span class="cc-theme-name"><b>{{ theme.label }}</b><small>{{ theme.note }}</small></span>
      </button>
    {% endfor %}
  </div>
</dialog>
{% endif %}
{% if cc.shortcuts %}
<dialog class="cc-dialog cc-keys" data-keys aria-label="{% translate 'Keyboard shortcuts' %}">
  <div class="cc-panel-head">
    <div><b>{% translate 'Keyboard shortcuts' %}</b><small data-keys-hint>{% translate 'Click a shortcut to change it. Saved in this browser.' %}</small></div>
    <button type="button" class="cc-btn cc-btn-sm" data-keys-reset hidden>{% icon "rotate-ccw" %}<span>{% translate 'Reset all' %}</span></button>
    <button type="button" class="cc-icon-btn" data-close aria-label="{% translate 'Close' %}">{% icon "x" %}</button>
  </div>
  <div class="cc-keys-grid" data-keys-body></div>
</dialog>
{% endif %}
{% if cc.notify.enabled and cc.notify.userSettings %}
<dialog class="cc-dialog cc-notify-settings" data-notify-settings aria-label="{% translate 'Notification settings' %}">
  <div class="cc-panel-head">
    <div><b>{% translate 'Notifications' %}</b><small>{% translate 'Saved in this browser.' %}</small></div>
    <button type="button" class="cc-icon-btn" data-close aria-label="{% translate 'Close' %}">{% icon "x" %}</button>
  </div>
  <div class="cc-ns">
    <label class="cc-ns-row"><span class="cc-ns-icon">{% icon "message-square" %}</span><span class="cc-ns-text"><b>{% translate 'Popups' %}</b><small>{% translate 'Show new notifications in the corner of the screen.' %}</small></span><input type="checkbox" class="cc-switch" data-ns="popup"></label>
    <label class="cc-ns-row"><span class="cc-ns-icon">{% icon "volume-2" %}</span><span class="cc-ns-text"><b>{% translate 'Sounds' %}</b><small>{% translate 'Play a short sound when something arrives.' %}</small></span><input type="checkbox" class="cc-switch" data-ns="sound"></label>
    <div class="cc-ns-sub" data-ns-sound-box>
      <div class="cc-ns-line">
        <span>{% translate 'Sound' %}</span>
        <select class="cc-select-sm" data-ns="tone">
          <option value="">{% translate 'Match the notification' %}</option>
          {% for s in "chime,pop,ping,bell,sparkle,cash,knock,blip,alert"|cc_split %}<option value="{{ s }}">{{ s|capfirst }}</option>{% endfor %}
        </select>
        <button type="button" class="cc-icon-btn" data-ns-preview aria-label="{% translate 'Play' %}" title="{% translate 'Play' %}">{% icon "play" %}</button>
      </div>
      <div class="cc-ns-line"><span>{% translate 'Volume' %}</span><input type="range" min="0" max="1" step="0.05" data-ns="volume" class="cc-ns-volume"></div>
    </div>
    <label class="cc-ns-row"><span class="cc-ns-icon">{% icon "monitor-smartphone" %}</span><span class="cc-ns-text"><b>{% translate 'Desktop notifications' %}</b><small data-ns-desktop-state>{% translate 'Shown by your browser when this tab is in the background.' %}</small></span><input type="checkbox" class="cc-switch" data-ns="desktop"></label>
    {% if cc.push.enabled %}
    <div class="cc-ns-row">
      <span class="cc-ns-icon">{% icon "smartphone" %}</span>
      <span class="cc-ns-text"><b>{% translate 'Push to this device' %}</b><small data-ns-push-state>{% translate 'Get notifications even when the admin is closed.' %}</small></span>
      <input type="checkbox" class="cc-switch" data-ns-push>
    </div>
    <div class="cc-ns-sub"><button type="button" class="cc-btn cc-btn-sm" data-ns-test>{% icon "send" %}<span>{% translate 'Send me a test' %}</span></button></div>
    {% endif %}
    <div class="cc-ns-row">
      <span class="cc-ns-icon">{% icon "moon-star" %}</span>
      <span class="cc-ns-text"><b>{% translate 'Do not disturb' %}</b><small data-ns-dnd-state>{% translate 'No popups, sounds or desktop notifications. The bell still counts.' %}</small></span>
    </div>
    <div class="cc-ns-sub">
      <div class="cc-segment" data-ns-dnd>
        <button type="button" data-value="0">{% translate 'Off' %}</button>
        <button type="button" data-value="60">{% translate '1 hour' %}</button>
        <button type="button" data-value="240">{% translate '4 hours' %}</button>
        <button type="button" data-value="tomorrow">{% translate 'Until tomorrow' %}</button>
      </div>
    </div>
    {% if cc.live.enabled %}
    <label class="cc-ns-row"><span class="cc-ns-icon">{% icon "radio" %}</span><span class="cc-ns-text"><b>{% translate 'Live updates' %}</b><small data-live-state>{% translate 'Lists, dashboards and badges refresh on their own.' %}</small></span><input type="checkbox" class="cc-switch" data-ns="live"></label>
    {% endif %}
  </div>
</dialog>
{% endif %}
<dialog class="cc-dialog cc-confirm" data-confirm-dialog>
  <form method="dialog">
    <div class="cc-confirm-icon">{% icon "triangle-exclamation-point" %}</div>
    <p data-confirm-text></p>
    <div class="cc-confirm-buttons">
      <button value="no" class="cc-btn">{% translate 'Cancel' %}</button>
      <button value="yes" class="cc-btn cc-btn-primary" data-confirm-yes>{% translate 'Continue' %}</button>
    </div>
  </form>
</dialog>