extends layout.pug

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

block content
    section#main-content

        header(id="main-header")
            h1 #{config.siteName}
            p #{configTpl.slogan}
            p
                a(href="/inscription.html" class="pure-button pure-button-primary") Inscription

        article(class="content")
            div(class="pure-g")
                div(class="l-box pure-u-1")
                    h3(class="content-subhead")
                        em #{configTpl.homeTitle1}
                    p !{configTpl.homeP1}
                div(class="l-box pure-u-1")
                    h3(class="content-subhead")
                        em #{configTpl.homeTitle2}
                    p !{configTpl.homeP2}
                
            div(class="l-box pure-u-1")
                a(href="/a-propos.html" class="pure-button pure-button-primary") En savoir plus sur WikiLerni.
            div(class="l-box pure-u-1")
                a(href="/inscription.html" class="pure-button pure-button-primary") Tester WikiLerni gratuitement.

        -
            const imgAttributes = { alt: txtIllustration.defaultAlt };
            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 introduction=tool.shortenIfLongerThan(striptags(questionnaire.Questionnaire.introduction.replace("<br>", " ")), 300);

        div(class="questionnaire-listed 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")
                img(src="/img/quizs/"+questionnaire.Illustrations[0].url class="pure-img-responsive")&attributes(imgAttributes)
            div(class="pure-u-1 pure-u-md-1-2 pure-u-lg-3-5")
                h2(class="content-head content-head-questionnaire") #{questionnaire.Questionnaire.title}
                div(id="intro") #{introduction}
                a(href="/quiz/"+questionnaire.Questionnaire.slug+".html" class="pure-button pure-button-primary") Allez au quiz !