<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"-->
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name='HandheldFriendly' content='True'>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="format-detection" content="telephone=no">
        <!-- TODO: required by phonegap whitelistening
        meta http-equiv="Content-Security-Policy" content="frame-src *"-->
        <link rel="license" href="COPYING" />
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
        <link rel="icon" sizes="32x32" type="image/png" href="res/icon/icon-32.png" />
        <link rel="icon" sizes="48x48" type="image/png" href="res/icon/icon-48.png" />
        <link rel="icon" sizes="64x64" type="image/png" href="res/icon/icon-64.png" />
        <link rel="icon" sizes="96x96" type="image/png" href="res/icon/icon-96.png" />
        <link rel="icon" sizes="128x128" type="image/png" href="res/icon/icon-128.png" />
        <link rel="icon" sizes="256x256" type="image/png" href="res/icon/icon-256.png" />
        <link rel="apple-touch-icon" href="res/icon/icon-60.png" />
        <link rel="apple-touch-icon" sizes="76x76" href="res/icon/icon-76.png" />
        <link rel="apple-touch-icon" sizes="120x120" href="res/icon/icon-120.png" />
        <link rel="apple-touch-icon" sizes="152x152" href="res/icon/icon-152.png" />
        <link rel="apple-touch-icon" sizes="180x180" href="res/icon/icon-180.png" />
        <style>
            @-ms-viewport {
                width: device-width;
                height: device-height;
            }
            /* placeholder for run-time generated styles */
        </style>
        <!-- CodeMirror -->
        <link rel="stylesheet" href="css/codemirror/codemirror.css" type="text/css">
        <link rel="stylesheet" href="css/codemirror/show-hint.css" type="text/css">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-theme.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/ladda-themeless.css">
        <!-- KaTeX -->
        <link rel="stylesheet" href="css/katex-0.6.0.min.css">
        <style>
            .katex { font-size: 1.1em !important; }
        </style>
        <!-- App -->
        <link rel="stylesheet" href="css/codeq.css" type="text/css">
        <link rel="stylesheet" href="css/codeq/console.css" type="text/css">
        <link rel="stylesheet" href="css/codeq/hint.css" type="text/css">
        <title>CodeQ</title>
        <script>
            // remove any state marker from the URL before everything else loads
            (function(){
                var r = location.href.split('?'),
                        replaceHref = r.length > 1;
                r = r[0].split('#');
                replaceHref = replaceHref || (r.length > 1);
                if (replaceHref) location.href = r[0];
            })();
        </script>
    </head>
    <body>
        <!-- message box for alerts -->
        <div id="message" style="display: none;">
            <span class="close glyphicon glyphicon-remove-sign"></span>
            <span class="text"></span>
        </div>

        <!-- the status bar at the top of each page -->
        <div class="navbar navbar-inverse navbar-fixed-top" id="topbar">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="glyphicon glyphicon-menu-hamburger"></span>
                    </button>
                    <a id="navigation-home" tabindex="10" accesskey="1" href="#">
                        <img src="res/CodeQ_logo-sivi.png" alt="CodeQ">
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li style="display: none;" id="navigation-problem-list"><a href="" tabindex="20" accesskey="2" data-tkey="problem_list">Problems</a></li>
                        <li style="display: none;" id="navigation-python"><a href="" tabindex="30" accesskey="3" data-tkey="python">Python</a></li>
                        <li style="display: none;" id="navigation-prolog"><a href="" tabindex="30" accesskey="3" data-tkey="prolog">Prolog</a></li>
                        <li style="display: none;" id="navigation-robot"><a href="" tabindex="30" accesskey="3" data-tkey="robot">Robot</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right" style="display:none;">
                        <p class="navbar-text"><span data-tkey="signed_in_as">Signed in as</span> <span id="signed-in-title">Janez</span></p>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" tabindex="40" accesskey="9" data-toggle="dropdown" aria-expanded="false">
                                <span class="glyphicon glyphicon-user"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li id="navigation-logout"><a href="#" tabindex="41" data-tkey="logout">Logout</a></li>
                                <li id="navigation-profile"><a href="#" tabindex="42" data-tkey="profile">Profile</a></li>
                                <li class="saml-login-hide divider" role="separator"></li>
                                <li id="navigation-change-password" class="saml-login-hide"><a href="#" tabindex="43" data-tkey="change_pass">Change password</a></li>
                                <li class="divider" role="separator"></li>
                                <li id="navigation-about"><a href="#" tabindex="44" data-tkey="about">About</a></li>
                            </ul>
                        </li>
                        <li id="navigation-settings">
                            <a href="" tabindex="50" accesskey="0" title="Settings"><span class="glyphicon glyphicon-wrench"></span></a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <div id="content">
            <!-- login screen -->
            <div class="container" id="screen-login" style="display: none;">
                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="text-center" data-tkey="signin_header">Please sign in</h3>
                        </div>
                        <div class="panel-body">
                            <form id="login-form" class="form" role="form" method="post" action="login" accept-charset="UTF-8">
                                <div class="form-group">
                                    <label class="sr-only" for="username" data-tkey="username">Username</label>
                                    <input type="text" class="form-control" id="username"
                                           data-tkey-placeholder="username" placeholder="Username"
                                           required="required" />
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="password" data-tkey="password">Password</label>
                                    <input type="password" class="form-control" id="password"
                                           data-tkey-placeholder="password" placeholder="Password"
                                           required="required" />
                                </div>
                                <button type="submit" class="btn btn-primary btn-block" data-tkey="signin_button">Sign in</button>
                                <span class="error wrong-user-or-pw" data-tkey="wrong_username_or_password" style="display: none;">Wrong username or password.</span>
                                <span class="error connection-failed" data-tkey="connection_failed" style="display: none;">Could not connect to server.</span>
                                <span class="error login-failed" data-tkey="login_failed" style="display: none;">Login failed.</span>
                            </form>
                        </div>
                        <div class="panel-body">
                            <div class="text-center">
                                <span data-tkey="signin_via">Or you can login via</span><br />
                                <a href="" role="button" id="aai-login-button">
                                    <img src="res/gumb_aaiprijava.png" style="width: 49%">
                                </a>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <div class="text-center">
                                <span data-tkey="signin_footer">New here?</span> <a href="" role="button" id="signup-button"><b data-tkey="signin_footer_signup">Sign up!</b></a>
                            </div>
                            <br>
                            <div class="text-center small">
                                <a href="#" class="lang-select" role="button" data-lang="sl">Slovenščina</a> |
                                <a href="#" class="lang-select" role="button" data-lang="en">English</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- AAI login -->
            <div class="container-fluid" id="screen-aai-login" style="display: none;">
                <button type="button" class="pull-right" id="cancel-aai-login" style="position: absolute; top:10px; left:10px;" data-tkey="go_back">Go back</button>
                <iframe frameborder="0" scrolling="yes" allowtransparency="true" src="" id="aai-iframe"></iframe>
            </div>

            <!--Sign up screen-->
            <div class="container" id="screen-signup" style="display: none;">
                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="text-center" data-tkey="signup_header">Sign up</h3>
                        </div>
                        <div class="panel-body">
                            <form id="signup-form" class="form">
                                <div class="form-group">
                                    <label class="control-label small" data-tkey="username">Username</label>
                                    <input class="form-control" name="username" id="signup-username" type="text"
                                           data-tkey-placeholder="username_placeholder" placeholder="Desired username"
                                           data-tkey-title="username_title" title="Choose a alpha-numeric username of 5-15 characters."
                                           pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" required="required" />
                                    <span class="error username-exists" data-tkey="username_already_exists" style="display: none;">This username already exists.</span>
                                </div>
                                <div class="form-group">
                                    <label class="control-label small" data-tkey="name">Display name</label>
                                    <input class="form-control" name="name" id="signup-name" type="text"
                                           data-tkey-placeholder="name_placeholder" placeholder="Desired display name"
                                           data-tkey-title="name_title" title="Choose a display name." />
                                </div>
                                <div class="form-group">
                                    <label class="control-label small" data-tkey="email">E-mail</label>
                                    <input class="form-control" name="email" id="signup-email" type="email"
                                           data-tkey-placeholder="email" placeholder="E-mail"
                                           data-tkey-title="email_title" title="Enter a valid email address."
                                           required="required" />
                                </div>
                                <div class="form-group">
                                    <label class="control-label small" data-tkey="password">Password</label>
                                    <input class="form-control" name="password" id="signup-password" type="password"
                                           data-tkey-placeholder="password" placeholder="Password"
                                           data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                </div>
                                <div class="form-group">
                                    <label class="control-label small" data-tkey="password_verify">Verify (repeat password)</label>
                                    <input class="form-control" name="verify" id="signup-password-verify" type="password"
                                           data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again"
                                           data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                    <span class="error mismatch" data-tkey="passwords_do_not_match" style="display: none;">Passwords do not match.</span>
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-default" id="signup-cancel" data-tkey="cancel">Cancel</button>
                                    <button type="submit" class="btn btn-primary" data-tkey="signup_button">Sign up</button>
                                </div>
                                <div class="success" class="text-center">
                                    <span data-tkey="welcome">Welcome</span>, <span class="username"></span>!
                                </div>
                            </form>
                        </div>
                        <div class="panel-footer">
                            <div class="text-center small">
                                <a href="#" class="lang-select" role="button" data-lang="sl">Slovenščina</a> |
                                <a href="#" class="lang-select" role="button" data-lang="en">English</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- change password screen -->
            <div class="container" id="screen-change-password" style="display: none;">
                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="text-center" data-tkey="change_password_header">Change password</h3>
                        </div>
                        <div class="panel-body">
                            <form id="change-password-form" class="form">
                                <div class="form-group">
                                    <label class="control-label small" data-tkey="password_new">New Password</label>
                                    <input class="form-control" name="new" id="change-password-new" type="password"
                                           data-tkey-placeholder="password_new_placeholder" placeholder="Enter a new password"
                                           data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                </div>
                                <div class="form-group">
                                    <label class="control-label small" data-tkey="password_verify">Verify Password</label>
                                    <input class="form-control" name="verify" id="change-password-verify" type="password"
                                           data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again"
                                           data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                    <span class="error mismatch" data-tkey="passwords_do_not_match" style="display: none;">Passwords do not match.</span>
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-default" id="change-password-cancel" data-tkey="cancel">Cancel</button>
                                    <button type="submit" class="btn btn-primary" data-tkey="change_password_button">Change password</button>
                                </div>
                                <span class="error failed" data-tkey="password_change_failed" style="display: none;">Password change failed.</span>
                                <div class="success" data-tkey="password_changed" style="display: none;">Password changed.</div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- upgrade account to AAI screen -->
            <div class="container" id="screen-upgrade-to-aai" style="display: none;">
                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="text-center" data-tkey="upgrade_to_aai_header">Upgrade to AAI?</h3>
                        </div>
                        <div class="panel-body">
                            <form id="upgrade-to-aai-form" class="form">
                                <div data-tkey="upgrade_to_aai_body_text_1">
                                    <p>User with this email address already exists.</p>
                                    <p>Enter its password and select <span class="badge">Yes</span> to upgrade it to AAI.</p>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="password" data-tkey="password">Password</label>
                                    <input type="password" class="form-control" name="password" id="upgrade-to-aai-password"
                                           data-tkey-placeholder="password" placeholder="Password" />
                                    <span class="error wrong-password" data-tkey="wrong_password" style="display: none;">Wrong password.</span>
                                </div>
                                <div data-tkey="upgrade_to_aai_body_text_2">
                                    <p>Select <span class="badge">No</span> to do a separate account.</p>
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-default" id="upgrade-to-aai-cancel" data-tkey="upgrade_to_aai_no_button">No, make new</button>
                                    <button type="submit" class="btn btn-primary" data-tkey="upgrade_to_aai_yes_button">Yes, upgrade to AAI</button>
                                </div>
                            </form>
                        </div>
                        <div class="panel-footer text-center">
                            <div class="text-center small">
                                <a href="#" class="lang-select" role="button" data-lang="sl">Slovenščina</a> |
                                <a href="#" class="lang-select" role="button" data-lang="en">English</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- about screen -->
            <div class="container" id="screen-about" style="display: none;">
                <div class="col-md-12">
                    <h2 data-tkey="about">About</h2>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default" id="about-back" data-tkey="go_back">Go back</button>
                    </div>
                    <hr>
                    <div data-tkey="about_html">
                        <!-- loads html from about_html translations -->
                    </div>
                </div>
            </div>

            <!-- main screen: programming language selection, settings, etc. -->
            <div class="container" id="screen-language" style="text-align: center; display: none;">
                <div class="col-lg-4">
                    <a href="#" id="choose-prolog" style="display: block;" tabindex="100">
                        <img class="img-circle" src=res/prolog.png alt="Generic placeholder image" width="140" height="140">
                        <h2>Prolog</h2>
                    </a>
                </div>
                <div class="col-lg-4">
                    <a href="#" id="choose-python" style="display: block;" tabindex="101">
                        <img class="img-circle" src=res/python.png alt="Generic placeholder image" width="140" height="140">
                        <h2>Python</h2>
                    </a>
                </div>
                <div class="col-lg-4">
                    <a href="#" id="choose-robot" style="display: block;" tabindex="102">
                        <img class="img-circle" src=res/eve.png alt="Generic placeholder image" width="140" height="140">
                        <h2>Robot</h2>
                    </a>
                </div>
            </div>

            <!-- problem selection screen for a specific language: groups of problems, with descriptions -->
            <div class="container" id="screen-problem-list" style="display: none;"></div>

            <!-- screen to display all user solutions for a given langauge -->
            <div class="container" id="screen-solutions" style="display: none;">
                <div class="col-md-12">
                    <h2 data-tkey="your_solutions">Your solutions</h2>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btnGoBack" data-tkey="go_back">Go back</button>
                    </div>
                    <hr>
                    <div class="solutions"></div>
                </div>
            </div>

            <!-- problem screen: prolog -->
            <div class="container-fluid quadrants" id="screen-prolog" style="display: none;">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-12 block block-left">
                        <div class="description-container">
                            <h1 class="title" data-dict="prolog" data-tkey="name"></h1>
                            <div class="description" data-dict="prolog" data-tkey="description"></div>
                        </div>
                        <div class="hints"></div>
                    </div>
                    <div class="col-lg-8 col-md-8 col-sm-12 block block-right ">
                        <div class="col-lg-6 col-md-12 col-sm-12 block block-editor">
                            <div class="toolbar">
                                <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button>
                                <button type="button" class="btn btn-default ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button>
                            </div>
                            <div class="code-editor"></div>
                            <div class="statusbar"></div>
                            <div class="block-label" data-tkey="code">Code</div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 block block-console">
                            <div class="console"></div>
                            <div class="block-label" data-tkey="console">Console</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- problem screen: python -->
            <div class="container-fluid quadrants" id="screen-python" style="display: none;">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-12 block block-left">
                        <div class="description-container">
                            <h1 class="title" data-dict="python" data-tkey="name"></h1>
                            <div class="description" data-dict="python" data-tkey="description"></div>
                        </div>
                        <div class="hints"></div>
                    </div>
                    <div class="col-lg-8 col-md-8 col-sm-12 block block-right ">
                        <div class="col-lg-6 col-md-12 col-sm-12 block block-editor">
                            <div class="toolbar">
                                <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button>
                                <button type="button" class="btn btn-default ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button>
                                <button type="button" class="btn btn-default btn-run" data-tkey="btn_run">Run</button>
                                <button type="button" class="btn btn-default btn-stop" data-tkey="btn_stop">Stop</button>
                            </div>
                            <div class="code-editor"></div>
                            <div class="statusbar"></div>
                            <div class="block-label" data-tkey="code">Code</div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 block block-console">
                            <div class="console"></div>
                            <div class="block-label" data-tkey="console">Console</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- problem screen: robot -->
            <div class="container-fluid quadrants" id="screen-robot" style="display: none;">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-12 block block-left">
                        <div class="description-container">
                            <h1 class="title" data-dict="robot" data-tkey="name"></h1>
                            <div class="description" data-dict="robot" data-tkey="description"></div>
                        </div>
                        <div class="hints"></div>
                    </div>
                    <div class="col-lg-8 col-md-8 col-sm-12 block block-right ">
                        <div class="col-lg-6 col-md-12 col-sm-12 block block-editor">
                            <div class="toolbar">
                                <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button>
                                <button type="button" class="btn btn-default ladda-button btn-hint" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_hint">Hint</span></button>
                                <button type="button" class="btn btn-default btn-run" data-tkey="btn_run">Run</button>
                                <button type="button" class="btn btn-default btn-stop" data-tkey="btn_stop">Stop</button>
                            </div>
                            <div class="code-editor"></div>
                            <div class="statusbar"></div>
                            <div class="block-label" data-tkey="code">Code</div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 block block-console">
                            <div class="console"></div>
                            <div class="status"></div>
                            <div class="block-label" data-tkey="console">Console</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- profile screen -->
            <div class="container" id="screen-profile" style="display: none;">
                <h2 data-tkey="profile">Profile</h2>
                <div class="btn-group">
                    <button type="button" id="profile-change-password" class="btn btn-default saml-login-hide" data-tkey="change_pass">Change Password</button>
                    <button type="button" id="profile-back" class="btn btn-default" data-tkey="go_back">Go back</button>
                </div>
                <hr />
                <div class="col-lg-12 col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Overview
                        </div>
                        <ul class="list-group small">
                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="username">Username</strong></span><span id="profile-username">janezk</span></li>
                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="name">Display name</strong></span><span id="profile-name">Janez Kranjski</span></li>
                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="email">E-email</strong></span><span id="profile-email">janez.kranjski@dezela_kranjska.si</span></li>
                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="joined">Joined</strong></span><span id="profile-joined">Sep 29, 2015</span></li>
                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="last_login">Last seen</strong></span><span id="profile-last-login">1 hour ago</span></li>
                        </ul>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading" data-tkey="statistics">Statistics</div>
                        <table id="profile-stats" class="table table-bordered table-striped small"></table>
                    </div>
                </div>
            </div>

            <!-- Settings screen -->
            <div class="container" id="screen-settings" style="display: none;">
                <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="text-center" data-tkey="settings">Settings</h3>
                        </div>
                        <div class="panel-body">
                            <form class="form" id="settings-form">
                                <div class="form-group">
                                    <span class="small" data-tkey="language">Language</span>
                                    <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="ui_language_title" data-content="Select the UI language." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
                                    <select class="form-control" id="settings-gui-lang">
                                        <option value="sl">Slovensko</option>
                                        <option value="en">English</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <span class="small" data-tkey="robot_address">Robot’s address</span>
                                    <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="robot_address_title" data-content="Set the robot's IPv4 or IPv6 address." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
                                    <input type="text" class="form-control" id="settings-robot-address"
                                           data-tkey-placeholder="robot_address_placeholder" placeholder="IP address"
                                           data-tkey-title="robot_address_title" title="Set the robot's IPv4 or IPv6 address."
                                           pattern="^(([0-9a-f]{0,4}:){1,7}[0-9a-f]{1,4}|([0-9]{1,3}\.){3}[0-9]{1,3})$" />
                                </div>
                                <div class="form-group" id="settings-layout-group">
                                    <span class="small" data-tkey="layout_select">Layout</span>
                                    <select class="form-control" id="settings-layout">
                                        <option value="line-layout" data-tkey="line_layout">Line</option>
                                        <option value="square-layout" data-tkey="square_layout">Square</option>
                                    </select>
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-default" id="settings-cancel" data-tkey="settings_cancel_btn">Close</button>
                                    <button type="submit" class="btn btn-primary" data-tkey="save">Save</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Covers the whole screen with a semi-transparent block, so no input events can be triggered below.
             Used as a wait screen; must be the last element in the DOM.
             It is active after load, javascript turns it off after initialization. -->
        <div id="disabled"></div>

        <!-- jQuery stuff -->
        <script src="js/jquery/jquery-1.11.3.js"></script>
        <script src="js/engine.io.js"></script>
        <script src="js/jquery/jquery.history.js"></script>
        <!-- Q promise library -->
        <script src="js/q.js"></script>
        <!-- Bootstrap -->
        <script src="js/bootstrap/bootstrap.min.js"></script>
        <script src="js/ladda/spin.js"></script>
        <script src="js/ladda/ladda.js"></script>
        <script src="js/ladda/ladda.jquery.js"></script>
        <!-- math rendering -->
        <script src="js/katex/katex-0.6.0.min.js"></script>
        <!-- CodeMirror stuff -->
        <script src="js/codemirror/codemirror.js"></script>
        <script src="js/codemirror/matchbrackets.js"></script>
        <script src="js/codemirror/prolog.js"></script>
        <script src="js/codemirror/python.js"></script>
        <script src="js/codemirror/show-hint.js"></script>
        <!-- codeq app -->
        <script src="js/codeq/core.js"></script>
        <!-- Cordova/PhoneGap -->
        <script type="text/javascript" src="cordova.js"></script>
        <!-- codeq app cont. -->
        <script src="js/codeq/init.js"></script>
        <script src="js/codeq/misc.js"></script>
        <script src="js/codeq/template.js"></script>
        <script src="js/codeq/translation.js"></script>
        <script src="js/codeq/navigation.js"></script>
        <script src="js/codeq/comms.js"></script>
        <script src="js/codeq/console.js"></script>
        <script src="js/codeq/editor.js"></script>
        <script src="js/codeq/hint.js"></script>
        <script src="js/codeq/prolog.js"></script>
        <script src="js/codeq/python.js"></script>
        <script src="js/codeq/robot.js"></script>
        <script src="js/codeq/solutions.js"></script>
        <script src="js/codeq/signup.js"></script>
        <script src="js/codeq/login.js"></script>
        <script src="js/codeq/aaiLogin.js"></script>
        <script src="js/codeq/upgrade_to_aai.js"></script>
        <script src="js/codeq/change_password.js"></script>
        <script src="js/codeq/profile.js"></script>
        <script src="js/codeq/about.js"></script>
        <script src="js/codeq/language.js"></script>
        <script src="js/codeq/problem_list.js"></script>
        <script src="js/codeq/settings.js"></script>
    </body>
</html>