(text "{% macro avatar(id, size=\"24px\") -%}")
(img
    ("title" "User avatar")
    ("src" "{{ config.service_hosts.buckets }}/avatars/{{ id }}")
    ("alt" "User avatar")
    ("class" "avatar shadow")
    ("loading" "lazy")
    ("style" "--size: {{ size }}"))
(text "{%- endmacro %}")

(text "{% macro username(user) -%}")
(b
    (text "{% if user.settings.display_name|length > 0 -%}")
    (text "{{ user.settings.display_name }}")
    (text "{%- else -%}")
    (text "{{ user.username }}")
    (text "{%- endif %}"))
(text "{%- endmacro %}")

(text "{% macro chat_name(chat, members, advanced=false, avatar_size=\"24px\") -%}")
(text "{% if advanced -%}")
; advanced
(text "{% if chat.style == \"Direct\" -%} {% for member in members -%} {% if member.id != user.id -%}")
; direct message; user that ISN'T the current user
(text "{{ self::avatar(id=member.id, size=avatar_size) }}")
(text "{{ self::username(user=member) }}")
(text "{%- endif %} {%- endfor %} {%- else -%}")
; group chat
(text "{% for member in members -%} {{ self::avatar(id=member.id, size=avatar_size) }} {%- endfor %}")
(b (text "{{ chat.style.Group.name }}"))
(text "{%- endif %}")
(text "{%- else -%}")
; NOT advanced
(text "{% if chat.style == \"Direct\" -%} {% for member in members -%} {% if member.id != user.id -%}")
; direct message; user that ISN'T the current user
(text "{{ member.username }}")
(text "{%- endif %} {%- endfor %} {%- else -%}")
; group chat
(text "{{ chat.style.Group.name }}")
(text "{%- endif %}")
(text "{%- endif %}")
(text "{%- endmacro %}")

(text "{% macro message(message, replying_to=false, is_pinned=false, hide_actions=false) -%}")
(div
    ("class" "flex w_full gap_ch message {%- if user.id == message.owner %} justify_right mine {%- endif %}")
    ("id" "{% if not hide_actions -%} message_{{ message.id }} {%- endif %}")
    (text "{% if not hide_actions -%}")
    (div
        ("class" "dropdown hidden")
        (button
            ("onclick" "open_dropdown(event)")
            ("exclude" "dropdown")
            ("class" "button icon_only big_icon")
            (text "{{ icon \"ellipsis\" }}"))
        (div
            ("class" "inner surface")
            (text "{% if not is_pinned -%}")
            (button
                ("class" "button surface")
                ("onclick" "pin_message(event, '{{ message.id }}')")
                (text "pin"))
            (text "{%- endif %}")

            (button
                ("class" "button surface")
                ("onclick" "reply_to_message('{{ message.id }}')")
                (text "reply"))

            (text "{% if message.owner == user.id -%}")
            (button
                ("class" "button surface")
                ("onclick" "edit_message_ui('{{ message.id }}')")
                (text "edit"))
            (button
                ("class" "button surface red")
                ("onclick" "delete_message('{{ message.id }}')")
                (text "delete"))
            (text "{%- endif %}")))
    (text "{%- endif %}")

    (div
        ("class" "body no_p_margin")
        ("id" "{{ message.id }}_body")
        (text "{{ message.content|markdown|safe }}")
        (div
            ("class" "flex flex_col gap_1 {% if message.uploads|length == 0 -%} hidden {%- endif %}")
            (text "{% for upload in message.uploads -%}")
            (a
                ("href" "{{ config.service_hosts.buckets }}/message_media/{{ upload }}")
                ("target" "_blank")
                (img ("class" "upload") ("src" "{{ config.service_hosts.buckets }}/message_media/{{ upload }}") ("alt" "Media upload")))
            (text "{%- endfor %}")))
    (form
        ("class" "body hidden flex flex_row gap_ch")
        ("id" "{{ message.id }}_edit_area")
        ("onsubmit" "edit_message('{{ message.id }}', event)")
        (textarea
            ("name" "content")
            ("required")
            (text "{{ message.content|safe }}"))
        (button
            ("title" "Save")
            ("class" "button")
            (text "{{ icon \"check\" }}")))

    (a
        ("href" "/@{{ message.owner }}?redirect=true")
        ("target" "_blank")
        (text "{{ self::avatar(id=message.owner) }}")))

(text "{% if replying_to -%}")
(div
    ("class" "message_reply_wrapper")
    (text "{{ self::message(message=replying_to, hide_actions=true) }}"))
(text "{%- endif %}")
(text "{%- endmacro %}")

(text "{% macro theme(user, theme_preference) -%} {% if user %} {% if user.settings.theme_hue -%}")
(style
    (text ":root, * {
        --hue: {{ user.settings.theme_hue }} !important;
    }"))

(text "{%- endif %} {% if user.settings.theme_sat -%}")
(style
    (text ":root, * {
        --sat: {{ user.settings.theme_sat }} !important;
    }"))

(text "{%- endif %} {% if user.settings.theme_lit -%}")
(style
    (text ":root, * {
        --lit: {{ user.settings.theme_lit }} !important;
    }"))
(text "{%- endif %}")
(div
    ("style" "display: none;")
    (text "{{ self::theme_color(color=user.settings.theme_color_surface, css=\"color-surface\") }} {{ self::theme_color(color=user.settings.theme_color_text, css=\"color-text\") }} {{ self::theme_color(color=user.settings.theme_color_text_link, css=\"color-link\") }}  {{ self::theme_color(color=user.settings.theme_color_lowered, css=\"color-lowered\") }} {{ self::theme_color(color=user.settings.theme_color_text_lowered, css=\"color-text-lowered\") }} {{ self::theme_color(color=user.settings.theme_color_super_lowered, css=\"color-super-lowered\") }}  {{ self::theme_color(color=user.settings.theme_color_raised, css=\"color-raised\") }} {{ self::theme_color(color=user.settings.theme_color_text_raised, css=\"color-text-raised\") }} {{ self::theme_color(color=user.settings.theme_color_super_raised, css=\"color-super-raised\") }}  {{ self::theme_color(color=user.settings.theme_color_primary, css=\"color-primary\") }} {{ self::theme_color(color=user.settings.theme_color_text_primary, css=\"color-text-primary\") }} {{ self::theme_color(color=user.settings.theme_color_primary_lowered, css=\"color-primary-lowered\") }}  {{ self::theme_color(color=user.settings.theme_color_secondary, css=\"color-secondary\") }} {{ self::theme_color(color=user.settings.theme_color_text_secondary, css=\"color-text-secondary\") }} {{ self::theme_color(color=user.settings.theme_color_secondary_lowered, css=\"color-secondary-lowered\") }} {% if user.permissions|has_supporter -%}")
    (style
        (text "{{ user.settings.theme_custom_css|remove_script_tags|safe }}"))
    (text "{%- endif %}"))
(text "{%- endif %} {%- endmacro %} {% macro theme_color(color, css) -%} {% if color -%}")
(style
    (text ":root,
    * {
        --{{ css }}: {{ color|color }} !important;
    }"))
(text "{%- endif %} {%- endmacro %}")