(text "{% extends \"root.lisp\" %} {% block head %}")
(title
    (text "{{ profile.username }} — {{ config.name }}"))

(meta
    ("name" "og:title")
    ("content" "{{ profile.username }}"))

(meta
    ("name" "description")
    ("content" "Message @{{ profile.username }} on {{ config.name }}!"))

(meta
    ("name" "og:description")
    ("content" "Message @{{ profile.username }} on {{ config.name }}!"))

(meta
    ("property" "og:type")
    ("content" "profile"))

(meta
    ("property" "profile:username")
    ("content" "{{ profile.username }}"))

(meta
    ("name" "og:image")
    ("content" "{{ config.service_hosts.buckets|safe }}/avatars/{{ profile.id }}"))

(meta
    ("name" "twitter:image")
    ("content" "{{ config.service_hosts.buckets|safe }}/avatars/{{ profile.id }}"))

(meta
    ("name" "twitter:card")
    ("content" "summary"))

(meta
    ("name" "twitter:title")
    ("content" "{{ profile.username }}"))

(meta
    ("name" "twitter:description")
    ("content" "Message @{{ profile.username }} on {{ config.name }}!"))
(text "{% endblock %} {% block body %}")
(text "{% if not use_user_theme -%} {{ components::theme(user=profile, theme_preference=profile.settings.profile_theme) }} {%- endif %}")

(text "{% if profile.settings.profile_theme -%}")
(script
    (text "setTimeout(() => {
        temporary_set_theme(\"{{ profile.settings.profile_theme }}\");
    }, 150);"))
(text "{%- endif %}")

(div
    ("class" "flex flex_col gap_ch justify_center items_center profile")
    ("style" "height: calc(100dvh - var(--nav-height))")
    (div
        ("class" "card_nest w_full")
        ("style" "max-width: 25rem")
        (div
            ("class" "card banner"))
        (div
            ("class" "card flex flex_col gap_ch")
            (text "{{ components::avatar(id=profile.id, size=\"160px\") }}")
            (div
                ("class" "w_full flex items_center justify_between gap_2")
                (h2 (text "{{ components::username(user=profile) }}"))
                (button
                    ("onclick" "document.getElementById('user_info').showModal()")
                    ("class" "button icon_only big_icon")
                    ("title" "User info")
                    (text "{{ icon \"info\" }}")))

            (div (text "{{ profile.settings.biography|markdown|safe }}"))

            ; user links
            (div
                ("class" "flex flex_col gap_2")
                ("style" "margin-top: 20px")
                (text "{% for link in profile.settings.links -%}")
                (a
                    ("class" "button big surface justify_start")
                    ("href" "{{ link[1] }}")
                    (text "{{ icon \"link\" }} {{ link[0] }}"))
                (text "{%- endfor %}"))

            ; big action links
            (div
                ("class" "flex flex_row gap_2")
                (a
                    ("class" "button big surface")
                    ("href" "{{ config.service_hosts.tetratto }}/@{{ profile.username }}")
                    (text "{{ icon \"external-link\" }} Full profile"))

                (text "{% if user -%} {% if profile.id != user.id -%}")
                (button
                    ("class" "button big surface")
                    ("onclick" "create_direct_chat_with_user('{{ profile.username }}')")
                    (text "{{ icon \"message-circle\" }} Message"))
                (text "{%- endif %} {% else %}")
                (a
                    ("class" "button big surface")
                    ("href" "/login?redirect=/@{{ profile.username }}/confirm_dm")
                    (text "{{ icon \"message-circle\" }} Message"))
                (text "{%- endif %}")))))

(dialog
    ("id" "user_info")
    (div
        ("class" "inner")
        (h2
            ("class" "text_center w_full")
            (text "User info"))

        (ul
            (li (b (text "Username: ")) (text "{{ profile.username }}"))
            (li (b (text "Joined: ")) (text "{{ profile.created / 1000|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC"))
            (li (b (text "Followers: ")) (a ("href" "{{ config.service_hosts.tetratto }}/@{{ profile.username }}/followers") (text "{{ profile.follower_count }}")))
            (li (b (text "Following: ")) (a ("href" "{{ config.service_hosts.tetratto }}/@{{ profile.username }}/following") (text "{{ profile.following_count }}")))
            (li (b (text "Posts: ")) (a ("href" "{{ config.service_hosts.tetratto }}/@{{ profile.username }}") (text "{{ profile.post_count }}"))))

        (hr ("class" "margin"))
        (div
            ("class" "flex gap_2 justify_right")
            (button
                ("onclick" "document.getElementById('user_info').close()")
                ("class" "button red")
                ("type" "button")
                (text "Close")))))

(style
    (text ".profile .avatar {
        margin: -120px auto 0;
    }

    .profile .banner {
        background-image: url(\"{{ config.service_hosts.buckets }}/banners/{{ profile.id }}\") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: cover !important;
        border-radius: var(--radius) var(--radius) 0 0;
        height: 225px;
    }

    .card_nest .card:nth-child(2) {
        border-radius: 0 0 var(--radius) var(--radius);
    }

    .profile h2 {
        margin: 0;
    }

    @media screen and (max-width: 900px) {
        .card_nest .card {
            border-radius: 0;
        }
    }"))
(script ("src" "/public/messages.js"))
(text "{% endblock %}")