extends layout.pug

block append scripts
    script(src="/JS/polyfill.app.js" defer)
    script(src="/JS/questionnaire.app.js" defer)

block append css
    link(rel="stylesheet" href="/themes/wikilerni/css/quiz.css" media="screen and (min-width: 871px)")
    link(rel="stylesheet" href="/themes/wikilerni/css/quiz-mobile.css" media="screen and (max-width: 870px)")
    
block content

        div(id="tags" class="cardboard")
            ul
                li
                    a(href="/") #{config.siteName}
                for tag in questionnaire.Tags
                    li
                        a(href="/quizs/"+tag.slug+".html") #{tag.name}

        -
            const imgAttributes = { alt: txtIllustration.defaultAlt, style: "opacity: 0.0;" };
            if(questionnaire.Illustrations!=undefined && questionnaire.Illustrations.length!==0)
            {
                if (tool.isEmpty(questionnaire.Illustrations[0].alt)===false)
                    imgAttributes.alt=questionnaire.Illustrations[0].alt;
                if(tool.isEmpty(questionnaire.Illustrations[0].title)===false)
                    imgAttributes.title=questionnaire.Illustrations[0].title;
            }
            const publishedAtTxt=tool.dateFormat(questionnaire.Questionnaire.publishingAt, questionnaire.Questionnaire.language);
            const updatedAtTxt=tool.dateFormat(questionnaire.Questionnaire.updatedAt, questionnaire.Questionnaire.language);

        if(questionnaire.Illustrations!=undefined && questionnaire.Illustrations.length!==0)
            div(id="content-picture" class="cardboard")
                div(style="background-image: url('/img/quizs/"+questionnaire.Illustrations[0].url+"');")
                    img(src="/img/quizs/"+questionnaire.Illustrations[0].url)&attributes(imgAttributes)
                //- Important : ici, on garde volontairement le html saisi car lien possible vers auteur de l'illustration :
                if(questionnaire.Illustrations[0].caption)
                    p !{questionnaire.Illustrations[0].caption}
            
        div(id="content-side")
            div(id="content-top-decoration" class="cardboard") #{txtQuestionnaire.estimatedTime} #{txtQuestionnaire.estimatedTimeOption[questionnaire.Questionnaire.estimatedTime]}.
            div(id="content-title")
                h1(class="cardboard")
                    img(id="required-time-icon" src="/themes/wikilerni/img/time-required-"+questionnaire.Questionnaire.estimatedTime+".png" title=txtQuestionnaire.estimatedTime+" "+txtQuestionnaire.estimatedTimeOption[questionnaire.Questionnaire.estimatedTime])
                    span #{questionnaire.Questionnaire.title}
                div(id="content-title-corner")
            div(id="content" class="cardboard")     
                p(id="author-date") #{txtQuestionnaire.publishedBy} #{author}#{txtQuestionnaire.publishedAt} #{publishedAtTxt}. #{txtQuestionnaire.lastUpdated}#{updatedAtTxt}.
                //- Important : ici, on garde volontairement le html, car cela est accepté pour l'introduction
                if(questionnaire.Questionnaire.introduction)
                    div !{questionnaire.Questionnaire.introduction}
                div#links
                    for link in questionnaire.Links
                        p
                            a(href=link.url class="button cardboard" target="_blank" rel="noopener" title=link.anchor+" ("+txtGeneral.alertNewWindow+")") #{link.anchor}
                div#show
                    a(class="button  cardboard" href="#questionnaire" id="showQuestionnaire" title=txtQuestionnaire.btnShowQuestionnaire) #{txtQuestionnaire.btnShowQuestionnaire}

                noscript
                    div
                        strong #{configTpl.noJSNotification}
                        
                form(id="questionnaire" method="POST" class="needJS")
                    h2 #{questionnaire.Questionnaire.title}
                    div#response
                    div(class="subcribeBtns")
                        p
                            a(class="button cardboard" href="/inscription.html") #{txtQuestionnaire.btnProposeSubscribe}
                        p
                            a(class="button cardboard" href="/connexion.html") #{txtQuestionnaire.btnProposeConnection}
                    for question in questionnaire.Questions
                        p(id="question_"+question.Question.id) #{question.Question.text}
                        if(question.Question.explanation)
                            blockquote(class="help" id="help_"+question.Question.id cite=questionnaire.Links[0].url) #{txtQuestionnaire.explanationBeforeTxt} #{question.Question.explanation}
                        ul(class="checkbox_list")
                            for reponse in question.Choices
                                li(class="checkbox_li")
                                    label(class="check" for="response_"+reponse.id)
                                        input(type="checkbox" name="response_"+reponse.id id="response_"+reponse.id)
                                        div(class="checkbox_override")
                                        span(class="wrongResponse")
                                            img(src="/themes/wikilerni/img/wrong-min.png" title=txtQuestionnaire.wrongAnswerTxt)
                                        span(class="rightResponse")
                                            img(src="/themes/wikilerni/img/correct-min.png" title=txtQuestionnaire.correctAnswerTxt)
                                        em #{reponse.text}
                                    input(type="hidden" name="isCorrect_response_"+reponse.id id="isCorrect_response_"+reponse.id value=""+reponse.isCorrect)
                                    input(type="hidden" name="question_id_response_"+reponse.id id="question_id_response_"+reponse.id value=question.Question.id)
                    input(name="questionnaireId" id="questionnaireId" value=questionnaire.Questionnaire.id type="hidden")
                    p
                        span(class="input_wrapper")
                            input(id="checkResponses" type="submit" value=txtQuestionnaire.btnSendResponse class="cardboard" title=txtQuestionnaire.btnSendResponse)

                div#zerozozio
                    a(href="http://sharetodiaspora.github.io/?url="+linkCanonical+"&title="+questionnaire.Questionnaire.title rel="nofollow noopener" title=txtQuestionnaire.btnShareQuizTxt+" diaspora* ("+txtGeneral.alertNewWindow+")" target="_blank")
                        img(src="/themes/wikilerni/img/diaspora.png" alt=txtQuestionnaire.btnShareQuizTxt+" diaspora*")
                    a(href="https://www.facebook.com/sharer.php?u="+linkCanonical rel="nofollow noopener" title=txtQuestionnaire.btnShareQuizTxt+" facebook ("+txtGeneral.alertNewWindow+")" target="_blank")
                        img(src="/themes/wikilerni/img/facebook.png" alt=txtQuestionnaire.btnShareQuizTxt+" facebook")
                    a(href="https://twitter.com/intent/tweet?url="+linkCanonical+"&text="+questionnaire.Questionnaire.title rel="nofollow noopener" title=txtQuestionnaire.btnShareQuizTxt+" twitter ("+txtGeneral.alertNewWindow+")")
                        img(src="/themes/wikilerni/img/twitter.png" alt=txtQuestionnaire.btnShareQuizTxt+" twitter")
             
                div#explanations(class="engraved framed")
                    h3#explanationsTitle #{configTpl.explanationTitle}
                    div#explanationsContent
                        p !{configTpl.explanationTxt}