extends layout.pug

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

block content
    section#main-content

        div(class="pure-menu pure-menu-horizontal")
            a(href="/" class="pure-menu-heading pure-menu-link") #{config.siteName}
            ul(id="classement" class="pure-menu-list")
                for tag in questionnaire.Tags
                    li(class="pure-menu-item")
                        a(href="/quizs/"+tag.slug+".html" class="pure-menu-link") #{tag.name}

        -
            const imgAttributes = { alt: txtIllustration.defaultAlt, class:"pure-img-responsive" };
            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;
            }
            console.log(questionnaire.Questionnaire.language);
            console.log(questionnaire.Questionnaire.publishingAt);
            const publishedAtTxt=tool.dateFormat(questionnaire.Questionnaire.publishingAt, questionnaire.Questionnaire.language);
            const updatedAtTxt=tool.dateFormat(questionnaire.Questionnaire.updatedAt, questionnaire.Questionnaire.language);
    
        header(class="questionnaire-intro l-box-lrg pure-g")
            div(class="l-box-lrg is-center pure-u-1 pure-u-md-1-2 pure-u-lg-2-5")
                if(questionnaire.Illustrations!=undefined && questionnaire.Illustrations.length!==0)
                    if(questionnaire.Illustrations[0].caption)
                        figure
                            img(src="/img/quizs/"+questionnaire.Illustrations[0].url)&attributes(imgAttributes)
                            //- Important : ici, on garde volontairement le html saisi car lien possible vers auteur
                            figCaption !{questionnaire.Illustrations[0].caption}
                    else
                        img(src="/img/quizs/"+questionnaire.Illustrations[0].url)&attributes(imgAttributes)
            div(class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5")
                h1(class="content-head content-head-questionnaire") #{questionnaire.Questionnaire.title}
                //- Important : ici, on garde volontairement le html, car cela est accepté pour l'introduction
                if(questionnaire.Questionnaire.introduction)
                    div#intro !{questionnaire.Questionnaire.introduction}
                div#estimatedTime
                    p #{txtQuestionnaire.estimatedTime}
                        strong #{questionnaire.Questionnaire.estimatedTime}.     
                div#links
                    for link in questionnaire.Links
                        a(href=link.url class="pure-button pure-button-primary" target="_blank") #{link.anchor}

                noscript
                    strong #{configTpl.noJSNotification}

                div#show
                    a(class="pure-button pure-button-primary" href="#questionnaire" id="showQuestionnaire") #{txtQuestionnaire.btnShowQuestionnaire}
                
                div#publish_datas
                    p
                        em #{txtQuestionnaire.publishedBy} #{author}#{txtQuestionnaire.publishedAt} #{publishedAtTxt}. #{txtQuestionnaire.lastUpdated}#{updatedAtTxt}.


        form(class="pure-form pure-form-stacked quizs" id="questionnaire" method="POST")
            fieldset
                legend #{questionnaire.Questionnaire.title}
                for question in questionnaire.Questions
                    h4(id="question_"+question.Question.id) #{question.Question.text}
                    if(question.Question.explanation)
                        p(class="help" id="help_"+question.Question.id) #{question.Question.explanation}

                    for reponse in question.Choices
                        label(for="response_"+reponse.id class="pure-checkbox")
                            input(type="checkbox" name="response_"+reponse.id id="response_"+reponse.id)
                            span  #{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")
                input(class="pure-button" type="submit" value=txtQuestionnaire.btnSendResponse id="checkResponses")

        div#response
        ul(class="pure-g subcribeBtns")
            li(class="pure-u-1 pure-u-lg-1-4")
                a(class="pure-button pure-button-primary" href="/inscription.html") #{txtQuestionnaire.btnProposeSubscribe}
            li(class="pure-u-1 pure-u-lg-1-4")
                a(class="pure-button pure-button-primary" href="/connexion.html") #{txtQuestionnaire.btnProposeConnection}

        footer(id="explanations" class="pure-u-1")
            h3(id="explanationsTitle") #{configTpl.explanationTitle}
            div#explanationsContent
                p !{configTpl.explanationTxt}