mixin avatar(user)
    img.avatar(src=user.avatarUrl, alt="avatar for " + user.username style="width: 64px; height: 64px; border-radius: 50%")&attributes(attributes)

mixin note-header(note)
    header&attributes(attributes)
        span.name= getUserName(note.user)
        span.acct(style="color: gray")= getAcct(note.user)  

mixin sub-note(note)
    .sub-note
        +avatar(note.user)                  
        +note-header(note)
        p= note.text

mixin note(note)
    if (note.reply)
        +sub-note(note.reply)(style="opacity: 0.5")
    if (note.renote && !note.text)
        p: b 🔁 !{getUserName(note.user)} がRenote
        +note(note.renote)
    else
        .note&attributes(attributes)
            +avatar(note.user)
            +note-header(note)
            p
                if (note.reply)
                    | ↩
                != note.text
            if (note.renote)
                p RN:
                +sub-note(note.renote)
            aside
                span.visibility= getVisibility(note)
                span.date= new Date(note.createdAt).toLocaleString()
            .reactions
                each val, key in note.reactions
                    span(class=(key === note.myReaction ? 'my reaction' : 'reaction'))=`${key} ${val}`
            footer
                |[
                a(href="/reply?noteId=" + note.id) ﾘﾌﾟﾗｲ
                |] [
                a(href="/renote?noteId=" + note.id) ﾘﾉｰﾄ
                |] 
                if !note.myReaction
                    | [
                    a(href="/react?noteId=" + note.id) ﾘｱｸｼｮﾝ
                    | ]
                else
                    form(action="action/unreact", method="post" style="display: inline")
                        input(type="hidden", name="noteId", value=note.id)
                        button(type="submit") リアクション解除

mixin post-form(url, placeholder, buttonText)
    form(action=url, method="post")
        textarea(name="text", placeholder=placeholder style="max-width: 100%; min-width: 100%; height: 6em; margin-bottom: 8px")
        button(type="submit")= buttonText
        block
            
        

html
    head
        meta(charset="UTF-8")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        block meta
        title= title
    body
        header
            h1: a(href="/") Simpkey
            block header
        main
            block content

        footer
            hr
            div
                a(href="/privacy-policy") プライバシーポリシー
                | ・
                a(href="/terms") 利用規約
            p (C)2020 Xeltica - 
                a(href="/about") version !{version}
            block footer