extend templates/layout.pug

block content
    .container
        .center
            h1 #{translationChapter.translationArtifactVersion.artifactVersion.artifact.dialect.name} to #{translationChapter.translationArtifactVersion.name}
            h2= translationChapter.translationArtifactVersion.artifactVersion.artifact.name

            p.flow-text 
                span.chip #{translationChapter.chapter.wordCount.toLocaleString()} words

            if translationChapter.translationChapterTranslators.length > 0
                p.flow-text Translators
                each translationChapterTranslator in translationChapter.translationChapterTranslators
                    span.chip= translatorDisplayName(translationChapterTranslator)
                        a(href=`/translate/${translationChapter.translationArtifactVersion.id}/chapter/${translationChapter.id}/translator/${translationChapterTranslator.id}`) 
                            i.remove.material-icons close
            p.flow-text Add translator

            
            form.row(action=`/translate/${translationChapter.translationArtifactVersion.id}/chapter/${translationChapter.id}/translator`, method="post") 
                .col.s12 
                    .row 
                        .input-field.col.s12
                            i.material-icons.prefix translate
                            input#translator-input.autocomplete(type="text", name="translator", required=true)
                            
                            label(for="translator-input") Enter translators email
                            //- TODO add other functionality... phone number or username  
            

block additionalScripts
    script 
        include js/init-translator-autocomplete.js