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") &times;
                <strong>Error</strong> : this id is already used !

block content
    form.form-signin(method="POST", action='/identification')
        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='-20') Less than 20
                option(value='20-25') Between 20 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

        label(for='3dgames', style={'margin-right':'10px'}) Rate your 3D game skills
        span.glyphicon.glyphicon-question-sign(type='button', data-toggle='tooltip', data-placement='top', title='1 star if you never played any 3D games, 5 stars if you are used to 3D video games.')

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

        .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




        button.btn.btn-lg.btn-primary.btn-block(type='submit') Sign in
