(text "{% extends \"root.lisp\" %} {% block head %}")
(title
    (text "Pins in {{ components::chat_name(chat=chat, members=members) }} — {{ config.name }}"))
(text "{% endblock %} {% block body %}")
(div
    ("class" "flex w_full gap_2 justify_between items_center")
    (div
        ("class" "tabs short bar flex")
        (a
            ("class" "button tab camo")
            ("href" "/chats")
            (text "{{ icon \"castle\" }} chats"))
        (a
            ("class" "button tab camo")
            ("href" "/chats/{{ chat.id }}")
            (text "{{ components::chat_name(chat=chat, members=members, advanced=true, avatar_size=\"18px\") }}"))
        (a
            ("class" "button tab")
            ("href" "/chats/{{ chat.id }}/manage")
            (text "{{ icon \"settings-2\" }} manage"))))
(div
    ("class" "flex flex_col gap_4 card")
    ("style" "flex: 1 0 auto")
    (p (text "Using ") (b (text "{{ messages|length }} ")) (text "of ") (b (text "12 ")) (text "pins."))
    (text "{% for message in messages -%}")
    (hr)
    (button
        ("class" "button surface red")
        ("onclick" "unpin_message('{{ message.id }}')")
        (text "unpin"))
    (text "{{ components::message(message=message) }}")
    (text "{%- endfor %}"))

(script ("src" "/public/messages.js"))
(script (text "STATE.chat_id = '{{ chat.id }}';"))
(text "{% endblock %}")