<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta http-equiv="Expires" CONTENT="-1"/>
    <meta http-equiv="Pragma" CONTENT="no-cache"/>
    <meta http-equiv="Cache-Control" CONTENT="no-cache"/>
    <meta http-equiv="Cache-Control" CONTENT="no-store"/>

    <!--  CSS -->
    <link rel="shortcut icon" th:href="@{/css/img/favicon.ico}" type="image/x-icon"/>

    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/font-awesome.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/animate.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/coderay.css}"/>
    <!--  end of CSS -->

    <!-- Require.js used to load js asynchronously -->
    <script src="js/libs/require.min.js" data-main="js/main"></script>
    <meta http-equiv="Content-Type" content="text/id; charset=UTF-8"/>
    <title>WebGoat</title>
</head>
<body>

<section id="container">
    <header id="header">
        <!--logo start-->
        <div class="brand">
            <a th:href="@{/welcome.mvc}" class="logo"><span>Web</span>Goat</a>
        </div>
        <!--logo end-->
        <div id="lesson-title-wrapper">

        </div><!--lesson title end-->
        <div style="position: absolute;width:600px; z-index:3; top:22px; right: -90px;">
            <input class="form-control" type="text" id="search" name="search" th:placeholder="#{searchmenu}"  style="width:200px;display:inline-block" />

            <!-- webwolf menu item -->
            <a th:href="@{/WebWolf}" target="_blank">
                <button type="button" id="webwolf-button" class="btn btn-default right_nav_button"
                        title="WebWolf">
                    <img th:src="@{/css/img/wolf.svg}"></img>
                </button>
            </a>
            <!-- user menu item -->
            <div class="btn-group">
            <div class="dropdown" style="display:inline">
                <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" id="user-menu">
                    <i class="fa fa-user"></i> <span class="caret"></span>
                </button>
                <ul class="dropdown-menu dropdown-menu-left">
                    <li role="presentation"><a role="menuitem" tabindex="-1" th:href="@{/logout}"
                                               th:text="#{logout}">Logout</a></li>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">User: <span sec:authentication="name"></span></a>
                    </li>
                    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Role:
                        <span sec:authorize="hasAuthority('WEBGOAT_USER')">User</span>
                        <span sec:authorize="hasAuthority('WEBGOAT_ADMIN')">Admin</span>
                    </a>
                    </li>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">
                        <span th:text="#{version}">Version:</span><span>: </span>
                        <span th:text="${@environment.getProperty('webgoat.build.version')}"></span></a>
                    </li>
                    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">
                        <span th:text="#{build}">Build:</span><span>: </span>
                        <span th:text="${@environment.getProperty('webgoat.build.number')}"></span></a>
                    </li>
                </ul>
            </div>
            </div>
            <!-- language select menu item -->
            <!-- free flag images from https://flagicons.lipis.dev -->
            <div class="btn-group">
            <div class="dropdown" style="display:inline">
                <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" id="lang-button">
                    <div th:switch="${#locale.language}">
                        <div th:case="'nl'">
                            <img th:src="@{${'/css/img/'}+${#locale.language}+${'lang.svg'}}"></img><span class="caret"></span>
                        </div>
                        <div th:case="'de'">
                            <img th:src="@{${'/css/img/'}+${#locale.language}+${'lang.svg'}}"></img><span class="caret"></span>
                        </div>
                        <div th:case="'fr'">
                            <img th:src="@{${'/css/img/'}+${#locale.language}+${'lang.svg'}}"></img><span class="caret"></span>
                        </div>
                        <div th:case="*">
                            <img th:src="@{${'/css/img/enlang.svg'}}"></img><span class="caret"></span>
                        </div>
                    </div>
                </button>
                <ul class="dropdown-menu dropdown-menu-left">
                    <li role="presentation">
                        <a role="menuitem" th:href="@{/start.mvc?lang=en#lesson/WebGoatIntroduction.lesson}">
                            <img th:src="@{${'/css/img/enlang.svg'}}" alt="English" height="20"></img> English
                        </a>
                    </li>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation">
                        <a role="menuitem" th:href="@{/start.mvc?lang=de#lesson/WebGoatIntroduction.lesson}">
                            <img th:src="@{${'/css/img/delang.svg'}}" alt="Deutsch" height="20"></img> Deutsch
                        </a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" th:href="@{/start.mvc?lang=fr#lesson/WebGoatIntroduction.lesson}">
                            <img th:src="@{${'/css/img/frlang.svg'}}" alt="Français" height="20"></img> Français
                        </a>
                    </li>
                    <li role="presentation">
                        <a role="menuitem" th:href="@{/start.mvc?lang=nl#lesson/WebGoatIntroduction.lesson}">
                            <img th:src="@{${'/css/img/nllang.svg'}}" alt="Nederlands" height="20"></img> Nederlands
                        </a>
                    </li>
                </ul>
            </div>
            </div>
            <!-- reportcard menu item -->
            <div style="display:inline" id="settings">
                <!--<button type="button" id="admin-button" class="btn btn-default right_nav_button" title="Administrator">-->
                <!--<i class="fa fa-cog"></i>-->
                <!--</button>-->
                <a href="#reportCard">
                    <button type="button" id="report-card-button" class="btn btn-default right_nav_button button-up"
                            th:title="#{report.card}">
                       <i class="fa fa-bar-chart-o"></i>
                    </button>
                </a>
                <!--<button type="button" id="user-management" class="btn btn-default right_nav_button"-->
                <!--title="User management">-->
                <!--<i class="fa fa-users"></i>-->
                <!--</button>-->
            </div>
            <!-- about menu item -->
            <button type="button" id="about-button" class="btn btn-default right_nav_button" th:title="#{about}"
                    data-toggle="modal" data-target="#about-modal">
                <i class="fa fa-info"></i>
            </button>
            <!-- GitHub menu item -->
            <a th:href="@{https://github.com/WebGoat/WebGoat}" target="_blank">
                <button type="button" class="btn btn-default right_nav_button" data-toggle="tooltip">
                    <i class="fa fa-github"></i>
                </button>
            </a>
        </div>
    </header>

    <aside class="sidebar">
        <div id="menu-container"></div>
    </aside>
    <!--sidebar left end-->

    <!--main content start-->
    <section class="main-content-wrapper">
        <section id="main-content">
            <div id="lesson-page" class="pages">
                <div class="row">
                    <div class="col-md-8">
                        <div class="col-md-12" align="left">
                            <div id="lesson-content-wrapper" class="panel">
                                <div class="" id="error-notification-container">
                                    <div class="" id="error-notification">
                                        <i class="fa fa-exclamation-circle"> There was an unexpected error. Please try
                                            again.</i>
                                    </div>
                                </div>
                                <div class="" id="help-controls">
                                    <button class="btn btn-primary btn-xs btn-danger help-button"
                                            id="show-hints-button" th:text="#{show.hints}">Show hints
                                    </button>

                                    <button class="btn btn-xs help-button" id="restart-lesson-button"
                                            th:text="#{reset.lesson}">Reset Lesson
                                    </button>
                                </div>

                                <div class="lesson-hint" id="lesson-hint-container">
                                    <!--<h4>Hints</h4>-->
                                    <div class="panel">
                                        <div id="message" class="info" th:utext="${message}"></div>
                                        <div class="panel-body" id="lesson-hint">
                                            <span class="glyphicon-class glyphicon glyphicon-circle-arrow-left"
                                                  id="show-prev-hint"></span>
                                            <span class="glyphicon-class glyphicon glyphicon-circle-arrow-right"
                                                  id="show-next-hint"></span>
                                            <br/>
                                            <span id="lesson-hint-content"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="lesson-hint" id="lesson-overview-container">
                                    <div class="panel">
                                        <div class="panel-body" id="lesson-overview"></div>
                                    </div>
                                </div>
                                <div id="lesson-page-controls">

                                </div>

                                <div class="lesson-content">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="report-card-page" class="pages" style="display: none;">
            </div>
        </section>
    </section>

</section>


<!-- About WebGoat Modal -->
<div class="modal" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" th:replace="~{about :: about}"></div>
    </div>
</div>
</body>


</html>
