extends ../../../templates/base.pug

block extracss
    style.
        .tab-content {
            margin-top: 10px;
        }


block content

    nav.nav.nav-tabs(role='tablist')
        if !calendar
            a#account-settings-tab.tab.nav-item.nav-link.active(data-toggle='tab', href='#account-settings', role='tab', aria-controls='account-settings', aria-expanded='true') Account settings
            a#calendar-settings-tab.tab.nav-item.nav-link(data-toggle='tab', href='#calendar-settings', role='tab', aria-controls='calendar-settings') Calendar settings
        else
            a#account-settings-tab.tab.nav-item.nav-link(data-toggle='tab', href='#account-settings', role='tab', aria-controls='account-settings') Account settings
            a#calendar-settings-tab.tab.nav-item.nav-link.active(data-toggle='tab', href='#calendar-settings', role='tab', aria-controls='calendar-settings', aria-expanded='true') Calendar settings

    .tab-content
        if settingsFailed !== undefined
            if settingsFailed === false
                .form-group.row
                    .col-2
                    .col-8
                        .alert.alert-success.alert-dismissible.fade.show Modifications saved !
                    .col-2

            else
                .form-group.row
                    .col-2
                    .col-8
                        .alert.alert-danger.alert-dismissible.fade.show #{settingsFailed}
                    .col-2

        .tab-content
            #account-settings.tab-pane.fade(class=!calendar ? 'active show' : '', role='tabpanel', aria-labelledby='account-settings-tab')
                form.content(method="POST", action=getUrl("accountSettingsTarget"))
                    .form-group.row
                        .col-2
                        label.col-2.col-form-label(for="username") Username
                        .col-6
                            input.form-control(type="text", value=session.user.username, name="username", id="username")
                        .col-2
                    .form-group.row
                        .col-2
                        label.col-2.col-form-label(for="email") Email
                        .col-6
                            input.form-control(type="email", value=session.user.email, name="email", id="email" disabled)
                        .col-2
                    .form-group.row
                        .col-2
                        label.col-2.col-form-label(for="oldpassword") Old password
                        .col-6
                            input#oldpassword.form-control(type='password', name='oldpassword')
                        .col2
                    .form-group.row
                        .col-2
                        label.col-2.col-form-label(for="pass1") New password
                        .col-6
                            input#pass1.form-control(type='password', name='newpassword')
                        .col2
                    .form-group.row
                        .col-2
                        label.col-2.col-form-label(for="psss2") Confirm
                        .col-6
                            input#pass2.form-control(type='password')
                        .col2
                    .form-group.row
                        .col-2
                        .col-8.form-text.text-muted.
                            Leave <em>new password</em> and <em>confirm</em> empty
                            if you do not wish to change your password
                        .col-2

                    .form-group.row
                        .col-2
                        .col-8
                            input.btn.btn-primary.form-control(type='submit', value='Submit changes')
                        .col-2


            #calendar-settings.tab-pane.fade(class=calendar ? 'active show' : '',role='tabpanel', aria-labelledby='calendar-settings-tab')
                form.content(method="POST", action=getUrl("calendarSettingsTarget"))
                    .form-group.row
                        .col-2
                        label.col-2.col-form-label(for="resources") Resources
                        .col-6
                            input.form-control(type="number", value=session.user.resources, name="resources", id="resources")
                        .col-2
                    .form-group.row
                        .col-2
                        label.col-2.col-form-label(for="projectId") Project id
                        .col-6
                            input.form-control(type="number", value=session.user.projectId, name="projectId", id="projectId")
                        .col-2

                    .form-group.row
                        .col-2
                        .col-8.form-text.text-muted.
                            If you don't know your resources and your project id, simply go
                            to your edt, click the export button, click on <em>Generate
                            url</em>, copy the url you get and paste it in the field below,
                            and click the <em>Set from url</em> button.
                        .col-2

                    .form-group.row
                        .col-2
                        label.col-2.col-from-label(for="url") Set from url
                        .col-4
                            input.form-control(type="text", id="url", placeholder="Url generated from edt")
                        .col-2
                            #urlButton.btn.btn-primary Set from url

                    .form-group.row
                        .col-4
                        .col-4
                            input.btn.btn-primary.form-control(type="submit", value="Submit changes")
                        .col-4

block extrajs
    script.
        $(function() {

            var tabs = document.getElementsByClassName('tab');
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].addEventListener('click', function() {
                    var alerts = document.getElementsByClassName('alert');
                    for (var j = 0; j < alerts.length; j++) {
                        $(alerts[j]).alert('close');
                    }
                });
            }

            var urlButton = document.getElementById('urlButton');
            var url = document.getElementById('url');
            var resources = document.getElementById('resources');
            var projectId = document.getElementById('projectId');

            urlButton.addEventListener('click', function() {
                var urlContent = url.value;
                var values = urlContent.split('?')[1].split('&');
                for (var i = 0; i < values.length; i++) {
                    var params = values[i].split('=');
                    var key = params[0];
                    if (key === 'resources') {
                        resources.value = parseInt(params[1], 10);
                    } else if (key === 'projectId') {
                        projectId.value = parseInt(params[1], 10);
                    }
                }
            });
        });