extends ../../../views/base.jade

block extrahead
    link(rel="stylesheet", href="/static/css/signin.css")
    link(rel="stylesheet", href="/static/css/star-rating.min.css")

block extrajs
    script(src="/static/js/star-rating.min.js")
    script.
        $('#3dgames').rating({
            showClear: false,
            showCaption: false,
            size: 'xs'
        });
        $('#3dgames').rating('update', 3);
    script $(function () { $('[data-toggle="tooltip"]').tooltip() })

block extrabody
    if identificationFailed
        .container
            .alert.alert-danger.alert-dismissible(role="alert", style={'margin-top':'20px'})
                button.close(type="button", data-dismiss="alert", aria-label="Close")
                    span(aria-hidden="true") ×
                <strong>Error</strong> : this id is already used !

block content
    script.
        function validateForm() {
            if (document.getElementById('sel1').selectedIndex === -1) {
                alert('Select a correct age please');
                return false;
            }
            if (document.getElementById('sel2').selectedIndex === -1) {
                alert('Select a correct date for the last time you played please');
                return false;
            }
        }
    form#form.form-signin(method="POST", action='/identification', onsubmit='return validateForm()')
        h2 Please sign in
        label(for='inputId').sr-only Id
        input#inputId.form-control(name="inputId", type="text", placeholder='Id', required, autofocus)

        .form-group
            label Gender
            .form-group
                label.radio-inline
                    input(type='radio', name='inputGender', value="male", checked)
                    | Male
                label.radio-inline
                    input(type='radio', name='inputGender', value="female")
                    | Female

        .form-group
            label(for='sel1') How old are you ?
            select.form-control#sel1(name="inputAge")
                option(value='-15') Less than 15
                option(value='15-20') Between 15 and 18
                option(value='18-25') Between 18 and 25
                option(value='25-30') Between 25 and 30
                option(value='30-35') Between 30 and 35
                option(value='35-40') Between 35 and 40
                option(value='40-45') Between 40 and 45
                option(value='45-50') Between 45 and 50
                option(value='50-55') Between 50 and 55
                option(value='55-60') Between 55 and 60
                option(value='60-') More than 60
                script.
                    document.getElementById('sel1').selectedIndex = -1;


        .form-group
            label(for='se21', style={'margin-right':'10px'}) When is the last time you played a 3D video game ?
            span.glyphicon.glyphicon-question-sign(type='button', data-toggle='tooltip', data-placement='top', title='Any game will count (PC or console, old or recent)')
            select.form-control#sel2(name="inputLastTime")
                option(value='3') This week
                option(value='2') This month
                option(value='1') This year
                option(value='0') I never played a 3D video game
                script.
                    document.getElementById('sel2').selectedIndex = -1;

        label(for='3dgames', style={'margin-right':'10px'}) Rate your 3D game skills

        ul
            li 1 star if you never play video games
            li 2 stars if you rarely play games
            li 3 stars if you are used to play console (PlayStation, Xbox, Nintendo, portable devices included)
            li 4 stars if you are used to play first-person-view games
            li 5 stars if you are good at first-person-view games

        input#3dgames(type='number', class='rating', min='0', max='5', step='1', default='3', name='input3dskills')

        button#submitButton.btn.btn-lg.btn-primary.btn-block(type='submit') Sign in
        script.
            document.getElementById('submitButton').onclick = function() {
                document.getElementById('submitButton').disabled = true;
                document.getElementById('form').submit();
            }