extend templates/layout.pug

block content
    -
        const isOwnedByUser = project.owner.ownerEntities.some(ownerEntity => { 
            return ownerEntity.entity.entityUsers.some(entityUser => {
                return entityUser.userId == user?.id
            })
        })
    .container
        .center
            h1= project.name 

            p.flow-text= project.description

            p.flow-text 
                -
                    const wordCount = translationChapters.reduce((totalWordCount, translationChapter) => totalWordCount+translationChapter.chapter.wordCount, 0)
                span.chip #{wordCount.toLocaleString()} words
            if isOwnedByUser
                .row
                    .col.s12 
                        a.btn.black(href=`/projects/${project.id}/trail`) audit trail

            .row
                .col.s12 
                    form(action=urlEndpoint, method="get") 
                        input(type="hidden", name="sheets", value="true")
                        each val, key in query
                            if key != "sheets"
                                input(type="hidden", name=key, value=val)
                        button.btn.black(type="submit") 
                            i.material-icons.left file_download 
                            span export to spreadsheets
            
            .row
                .col.s12 
                    form(action=urlEndpoint, method="get") 
                        input(type="hidden", name="markdown", value="true")
                        each val, key in query
                            if key != "markdown"
                                input(type="hidden", name=key, value=val)
                        button.btn.black(type="submit") 
                            i.material-icons.left file_download 
                            span export translations to markdown

            .row
                .col.s12 
                    a.btn.black(href=`/projects/${project.id}/import`) 
                        i.material-icons.left file_upload 
                        span import spreadsheets

            .row
                .col.s12 
                    a.btn.black(href=`/projects/${project.id}/languages/add`) 
                        i.material-icons.left record_voice_over 
                        span add language          
            .divider

            table.highlight
                thead
                    tr
                        th
                            p 
                                label
                                    input#overview-checkbox(type="checkbox")
                                    span 
                        th Name
                        th
                            a.dropdown-trigger language (#{project.get("languageCount")}) ▼
                        th Artifact
                        th Chapter
                        th 
                            a.dropdown-trigger translator ▼
                        th 
                            a.dropdown-trigger proof reader ▼
                        th 
                            a.dropdown-trigger editor ▼
                tbody 
                    each translationChapter in translationChapters.sort((a, b) => a.index - b.index)
                        -
                            const onclickResponse = `window.location='/translate/${translationChapter.translationArtifactVersion.id}/chapter/${translationChapter.id}'` 
                        tr
                            //- TODO: link to the translationChapter...
                            td
                                p
                                    label
                                        //- TODO: Make this a issueId...
                                        input(name="selectedTranslationChapters", type="checkbox", value=translationChapter.id) 
                                        span
                            td(onclick=onclickResponse)
                                span.truncate(title=translationChapter.chapter.name)= translationChapter.chapter.name
                            td(onclick=onclickResponse)
                                a(href=`/projects/${project.id}?dialectId=${translationChapter.translationArtifactVersion.dialect.id}`)= translationChapter.translationArtifactVersion.dialect.name
                            -
                                const artifactName = `${translationChapter.translationArtifactVersion.artifactVersion.artifact.name} - ${translationChapter.translationArtifactVersion.artifactVersion.tag}`
                            td(onclick=onclickResponse)
                                span.truncate(title=artifactName)= artifactName
                            td(onclick=onclickResponse)= translationChapter.index
                            td(onclick=onclickResponse)
                                each translationChapterTranslator in translationChapter.translationChapterTranslators
                                    a(href=`/projects/${project.id}?translatorId=${translationChapterTranslator.translatorId}`)
                                        span.initial-icon(style=`background: ${stringToColour(translationChapterTranslator.translatorId)};`, title=translatorDisplayName(translationChapterTranslator))= translatorDisplayName(translationChapterTranslator).split(" ").map(l => l.at(0)).join("")
                            td(onclick=onclickResponse) 
                            td(onclick=onclickResponse)