{% import "macros/buttons.html" as buttons %} {% import "macros/forms.html" as forms %} {% import "macros/icons.html" as icons %} {% macro preview() %}
{{ page_preview_form.page( class="form-select w-1/4 mb-2", script=" on change call htmx.ajax( 'POST', `?preview=${event.target.value}`, {source: '#theme-form', target: '#preview'} ) end " ) }}
{% endmacro %} {% if hx_target == "preview" %} {{ preview () }} {% endif %} {% extends layout %} {% block head_title_content %}{{ theme.name }} · Themes · {{ super() }}{% endblock %} {% block main %}

Edit {{ theme.name }} theme

{{ icons.arrow_left('w-4 h-4') }} {% call buttons.submit('btn') %} {{ icons.check('w-4 h-4') }} {% endcall %}
{% set htmx_kwargs = { "script": " on change debounced at 1s call htmx.ajax( 'POST', `?preview=${#page.value}`, {source: '#theme-form', target: '#preview'} ) end " } %} {{ forms.form_field(form.name) }} {{ forms.form_field(form.primary_color, **htmx_kwargs) }} {{ forms.form_field(form.primary_color_hover, **htmx_kwargs) }} {{ forms.form_field(form.primary_color_light, **htmx_kwargs) }} {{ forms.form_field(form.input_color, **htmx_kwargs) }} {{ forms.form_field(form.input_color_background, **htmx_kwargs) }} {{ forms.form_field(form.light_color, **htmx_kwargs) }} {{ forms.form_field(form.light_color_hover, **htmx_kwargs) }} {{ forms.form_field(form.text_color, **htmx_kwargs) }} {{ forms.form_field(form.accent_color, **htmx_kwargs) }} {{ forms.form_field(form.background_color, **htmx_kwargs) }} {{ forms.form_field(form.font_size, **htmx_kwargs) }} {{ forms.form_field(form.font_family, **htmx_kwargs) }} {{ forms.form_field(form.font_css_url, **htmx_kwargs) }} {{ forms.form_csrf_token(form) }}
{{ preview() }}
{% endblock %}