simpkey/src/views/_components.pug

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)
        a(href="/" + getAcct(note.user))
            span.name= getUserName(note.user)
            spamn  
            span.acct(style="color:gray;")= getAcct(note.user)
        if note.user.isAdmin
            span.bot  [ADMIN]
        else if note.user.isModerator
            span.bot  [MOD]
        if note.user.isBot
            span.bot  [BOT]
        if note.user.isCat
            span.bot  [CAT]

mixin sub-note(note)
    .sub-note
        +avatar(note.user)                  
        +note-header(note)
        p
            if note.cw
                details
                    summary #{note.cw} (#{note.text.length}文字)
                    != mfmToHtml(note.text)
            else
                != mfmToHtml(note.text)
        aside
            span.visibility= getVisibility(note)
            a.date(href="/notes/" + note.id)= new Date(note.createdAt).toLocaleString()

mixin note(note)
    if note.reply
        +sub-note(note.reply)(style="opacity:0.5;")
    if note.renote && !note.text
        p
            b 🔁 #{getUserName(note.user)}
            span  renoted
        +note(note.renote)
    else
        .note&attributes(attributes)
            +avatar(note.user)
            +note-header(note)
            p
                if note.reply
                    | ↩
                if note.cw
                    details
                        summary #{note.cw} (#{note.text.length}文字)
                        != mfmToHtml(note.text)
                else
                    != mfmToHtml(note.text)
            if note.renote
                p RN:
                +sub-note(note.renote)
            aside
                span.visibility= getVisibility(note)
                a.date(href="/notes/" + note.id)= 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/" + note.id) #{note.repliesCount} Replies
                |] 
                if canRenote && canRenote(note)
                    |[
                    a(href="/renote/" + note.id) #{note.renoteCount} Renotes
                    |] 
                if canReact && canReact(note)
                    if !note.myReaction
                        | [
                        a(href="/react/" + note.id) React
                        | ]
                    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")
        div: label
            input(type="checkbox", name="useCw")
            span  CW
        input(type="text", name="cw" placeholder="Title/Warning (optional)" style="max-width:100%; min-width:100%;")
        textarea(name="text", placeholder=placeholder style="max-width:100%; min-width:100%; height:6em; margin-bottom:8px;")

        div: label Privacy: 
            select(name="visibility")
                option(value="public") Public
                option(value="home") Home
                option(value="followers") Followers
                option(value="direct") Direct
        button(type="submit")= buttonText
        block

mixin nav()
    div
        |[
        a(href="/") Home
        |] [
        a(href="/ltl") Local
        |] [
        a(href="/stl") Social
        |] [
        a(href="/gtl") Global
        |] [
        a(href="/notifications") Notifications
        |] [
        a(href="/settings") Settings
        |]

mixin user-header(user, detail = false)
    if detail
        if user.host
            .remote-caution ⚠️ Information may not be accurate for remote accounts. 
                a(href=user.url || user.uri, target="_blank", rel="noopener noreferrer") Open on remote instance
        if user.isSuspended
            .suspended ⚠️ This account has been suspended.
        if user.isSilenced
            .silenced ⚠️ This account has been silenced.
    +avatar(user)
    .name: b=getUserName(user)
        |  
        span(style="color: gray")= getAcct(user)
        if user.isFollowed
            span.is-followed フォローされています
        if user.isLocked
            span.lock
        if user.isAdmin
            span.bot  [ADMIN]
        else if user.isModerator
            span.bot  [MOD]
        if user.isBot
            span.bot  [BOT]
        if user.isCat
            span.bot  [CAT]
    if detail
        if user.description
            .description !{mfmToHtml(user.description)}
        if user.birthday
            .birthday 🎂 #{user.birthday}
        if user.location
            .birthday 📍#{user.location}
        if user.sex
            .sex Gender: #{user.sex}
        dl
            each field in user.fields
                dt !{mfmToHtml(field.name)}
                dd !{mfmToHtml(field.value)}
                
    .count
        |[
        a.notes(href="/" + getAcct(user)) #{user.notesCount} Notes
        |]  
        //- a.following(href="/" + getAcct(user) + "/following") 
        | [#{user.followingCount} Following]
        |  
        //- a.followers(href="/" + getAcct(user) + "/followers")
        | [#{user.followersCount} Followers]

mixin timeline(notes)
    each note in notes
        hr
        +note(note)