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}/tracker/trail`) audit trail

            .divider

            table.highlight
                thead
                    tr
                        th
                            p 
                                label
                                    input#overview-checkbox(type="checkbox")
                                    span 
                        th Name
                        th
                            a.dropdown-trigger language ▼
                        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}/tracker?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}/tracker?translatorId=${translationChapterTranslator.translatorId}`)
                                        -
                                            const translatorDisplayName = translationChapterTranslator.translator.entityEmail == null ? translationChapterTranslator.translator.name : translationChapterTranslator.translator.entityEmail.email.address
                                            const stringToColour = function(str) {
                                                var hash = 0;
                                                for (var i = 0; i < str.length; i++) {
                                                    hash = str.charCodeAt(i) + ((hash << 5) - hash);
                                                }
                                                var colour = '#';
                                                for (var i = 0; i < 3; i++) {
                                                    var value = (hash >> (i * 8)) & 0xFF;
                                                    colour += ('00' + value.toString(16)).substr(-2);
                                                }
                                                return colour;
                                            }

                                        span.initial-icon(style=`background: ${stringToColour(translationChapterTranslator.translatorId)};`, title=translatorDisplayName)= translatorDisplayName.split(" ").map(l => l.at(0)).join("")
                            td(onclick=onclickResponse) 
                            td(onclick=onclickResponse)