{# field.value: "light" | "dark" | "system" (empty means system). size: "" | "compact". With `action`, it's its own form posting the choice. #}
{% props field: Field, size: String = "", label: String = "Appearance", action: String = "" %}
{%- let current = if field.value.is_empty() { "system" } else { field.value.as_str() } %}
{%- if !action.is_empty() %}<form method="post" action="{{ action }}" data-ui="appearance-picker">{{ csrf_field() }}{% end %}
{%- if size == "compact" %}
<fieldset class="ui-appearance" data-size="compact"><legend class="ui-sr-only">{{ label }}</legend>
<label title="Light"><input type="radio" name="{{ field.name }}" value="light" aria-label="Light"{% if current == "light" %} checked{% end %}><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg></label>
<label title="Dark"><input type="radio" name="{{ field.name }}" value="dark" aria-label="Dark"{% if current == "dark" %} checked{% end %}><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg></label>
<label title="System"><input type="radio" name="{{ field.name }}" value="system" aria-label="System"{% if current == "system" %} checked{% end %}><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><rect width="20" height="14" x="2" y="3" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg></label>
</fieldset>
{%- else %}
<fieldset class="ui-appearance"><legend class="ui-legend">{{ label }}</legend>
<label><input type="radio" name="{{ field.name }}" value="light"{% if current == "light" %} checked{% end %}><span class="ui-appearance-swatch"><svg viewBox="0 0 120 72" aria-hidden="true"><rect width="120" height="72" fill="#f5f5f5"/><rect x="10" y="10" width="28" height="52" rx="4" fill="#ffffff"/><rect x="46" y="10" width="64" height="20" rx="4" fill="#ffffff"/><rect x="46" y="38" width="64" height="24" rx="4" fill="#ffffff"/><rect x="52" y="17" width="30" height="6" rx="3" fill="#171717"/><rect x="16" y="18" width="16" height="4" rx="2" fill="#d4d4d4"/><rect x="16" y="28" width="12" height="4" rx="2" fill="#d4d4d4"/><rect x="52" y="45" width="40" height="4" rx="2" fill="#d4d4d4"/></svg></span><span class="ui-appearance-label"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>Light</span></label>
<label><input type="radio" name="{{ field.name }}" value="dark"{% if current == "dark" %} checked{% end %}><span class="ui-appearance-swatch"><svg viewBox="0 0 120 72" aria-hidden="true"><rect width="120" height="72" fill="#0a0a0a"/><rect x="10" y="10" width="28" height="52" rx="4" fill="#262626"/><rect x="46" y="10" width="64" height="20" rx="4" fill="#262626"/><rect x="46" y="38" width="64" height="24" rx="4" fill="#262626"/><rect x="52" y="17" width="30" height="6" rx="3" fill="#e5e5e5"/><rect x="16" y="18" width="16" height="4" rx="2" fill="#525252"/><rect x="16" y="28" width="12" height="4" rx="2" fill="#525252"/><rect x="52" y="45" width="40" height="4" rx="2" fill="#525252"/></svg></span><span class="ui-appearance-label"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>Dark</span></label>
<label><input type="radio" name="{{ field.name }}" value="system"{% if current == "system" %} checked{% end %}><span class="ui-appearance-swatch"><svg viewBox="0 0 120 72" aria-hidden="true"><defs><clipPath id="{{ field.id }}-half"><rect width="60" height="72"/></clipPath></defs><g><rect width="120" height="72" fill="#0a0a0a"/><rect x="10" y="10" width="28" height="52" rx="4" fill="#262626"/><rect x="46" y="10" width="64" height="20" rx="4" fill="#262626"/><rect x="46" y="38" width="64" height="24" rx="4" fill="#262626"/><rect x="52" y="17" width="30" height="6" rx="3" fill="#e5e5e5"/><rect x="16" y="18" width="16" height="4" rx="2" fill="#525252"/><rect x="16" y="28" width="12" height="4" rx="2" fill="#525252"/><rect x="52" y="45" width="40" height="4" rx="2" fill="#525252"/></g><g clip-path="url(#{{ field.id }}-half)"><rect width="120" height="72" fill="#f5f5f5"/><rect x="10" y="10" width="28" height="52" rx="4" fill="#ffffff"/><rect x="46" y="10" width="64" height="20" rx="4" fill="#ffffff"/><rect x="46" y="38" width="64" height="24" rx="4" fill="#ffffff"/><rect x="52" y="17" width="30" height="6" rx="3" fill="#171717"/><rect x="16" y="18" width="16" height="4" rx="2" fill="#d4d4d4"/><rect x="16" y="28" width="12" height="4" rx="2" fill="#d4d4d4"/><rect x="52" y="45" width="40" height="4" rx="2" fill="#d4d4d4"/></g></svg></span><span class="ui-appearance-label"><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><rect width="20" height="14" x="2" y="3" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>System</span></label>
</fieldset>
{%- end %}
{%- if !action.is_empty() %}</form>{% end %}