extend templates/layout.pug

block content
    .container
        .center
            h1 Translate into 
                a(href=`/translate/${translationChunk.translationChapter.translationArtifactVersion.id}`)  #{translationChunk.translationChapter.translationArtifactVersion.name}

        //- TODO: Show previous...
        form.row(action=`/translate/${translationChunk.translationChapter.translationArtifactVersion.id}/chapter/${translationChunk.translationChapter.id}/t/${translationChunk.index}`, method="post") 
            .col.s12.m6.input-field
                textarea#original-text.materialize-textarea(name="originalText", readonly)= translationChunk.text
                label(for="original-text") Original Text
            .col.s12.m6.input-field
                textarea#translated-text.materialize-textarea(name="translatedText", placeholder=translationChunk.text)= translationChunk.translation ? translationChunk.translation.text : null
                label(for="original-text") Translated Text
            .col.s12 
                .center
                    button.btn.black(type="submit") save
        
        //- TODO: Show next...
        .row
            .col.s12
                ul.tabs#adjacent-tabs
                    if previousTranslationChunk
                        li.tab.col.s6
                            a(href="#previous-translation") Previous Translation 
                    if nextTranslationChunk
                        li.tab.col.s6 
                            a(href="#next-translation") Next Translation  
            if previousTranslationChunk
                .col.s12#previous-translation
                    table

                                tbody 
                                    tr 
                                        td= previousTranslationChunk.text
                                        td
                                            if previousTranslationChunk.translated
                                                span= previousTranslationChunk.text
                                            else if previousTranslationChunk.translation
                                                span= previousTranslationChunk.translation.text 
                                            else 
                                                span.grey-text= previousTranslationChunk.text
                                        td
                                            if previousTranslationChunk.translated
                                                span nothing
                                            else if previousTranslationChunk.translation 
                                                a.btn.blue(href=`/translate/${previousTranslationChunk.translationChapter.translationArtifactVersion.id}/chapter/${previousTranslationChunk.translationChapter.id}/t/${previousTranslationChunk.index}`) edit 
                                            else 
                                                a.btn.black(href=`/translate/${previousTranslationChunk.translationChapter.translationArtifactVersion.id}/chapter/${previousTranslationChunk.translationChapter.id}/t/${previousTranslationChunk.index}`) previous translation

            if nextTranslationChunk        
                .col.s12#next-translation
                    table
                        //- thead
                            tr 
                                th #{translationChunk.translationChapter.artifact.dialect.name}
                                th #{translationChunk.translationChapter.artifact.translationArtifactVersions[0].name}
                                th 
                        tbody 
                            tr 
                                td= nextTranslationChunk.text
                                td
                                    if nextTranslationChunk.translated
                                        span= nextTranslationChunk.text
                                    else if nextTranslationChunk.translation
                                        span= nextTranslationChunk.translation.text 
                                    else 
                                        span.grey-text= nextTranslationChunk.text
                                td
                                    if nextTranslationChunk.translated
                                        span nothing
                                    else if nextTranslationChunk.translation 
                                        a.btn.blue(href=`/translate/${nextTranslationChunk.translationChapter.translationArtifactVersion.id}/chapter/${nextTranslationChunk.translationChapter.id}/t/${nextTranslationChunk.index}`) edit 
                                    else 
                                        a.btn.black(href=`/translate/${nextTranslationChunk.translationChapter.translationArtifactVersion.id}/chapter/${nextTranslationChunk.translationChapter.id}/t/${nextTranslationChunk.index}`) next translation


block additionalScripts
    script 
        include js/init-adjacent-tabs.js