<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="monitoring/layout">

<head>
    <title th:text="#{cas.loggingdashboard.title}"></title>
    <script th:inline="javascript">
        /*<![CDATA[*/

        var logConfigFileLocation = /*[[${logConfigurationFile}]]*/;

        var urls = {
            getConfiguration: /*[[@{/status/logging/getConfiguration}]]*/,
            getAuditLog: /*[[@{/status/logging/getAuditLog}]]*/,
            updateLevel: /*[[@{/status/logging/updateLoggerLevel}]]*/,
            logOutput: /*[[@{/logoutput}]]*/
        };

        /*]]>*/
    </script>

    <script type="text/javascript" th:inline="javascript">

        function jqueryReady() {
            head.load(
                    /*[[@{/css/loggingDashboard.css}]]*/
            );
            head.load(
                    /*[[@{/js/sockjs.js}]]*/,
                    /*[[@{/js/stomp.js}]]*/,
                    /*[[@{/js/loggingDashboard.js}]]*/
            );
        }
    </script>
</head>

<body id="cas">
<div layout:fragment="content">

    <div id="loggingDashboard">
        <h1>Logging</h1>

        <div id="loadingMessage">
            <h3 th:text="#{cas.loggingdashboard.loading}"/>
        </div>


        <div id="errorLoadingData" class="alert alert-danger hidden">
            <h2 th:text="#{cas.loggingdashboard.loading.error}"/>
            <div>
                <input class="btn btn-success" type="button"
                       onclick="location.reload();" th:value="#{cas.ssosessions.button.refresh}"/>
            </div>
        </div>

        <div class="tabsContainer hidden row">
            <div id="alert-container"></div>
            <!-- Nav tabs -->
            <ul id="myTabs" class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#loggersTab" aria-controls="loggersTab" role="tab"
                                                          data-toggle="tab">Loggers</a></li>

                <!--
                <li role="presentation"><a href="#activeLoggers" aria-controls="activeLoggers" role="tab" data-toggle="tab">Active
                    Loggers</a></li>
                 -->
                <li role="presentation"><a href="#logOutput" aria-controls="logOutput" role="tab" data-toggle="tab">CAS Log</a></li>
                <li role="presentation"><a href="#auditLog" aria-controls="auditLog" role="tab" data-toggle="tab">Audit Log</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="loggersTab">
                    <table id="loggersTable" class="display table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th></th>
                            <th th:text="#{cas.loggingdashboard.logger}"/>
                            <th th:text="#{cas.loggingdashboard.additive}"/>
                            <th th:text="#{cas.loggingdashboard.state}"/>
                            <th th:text="#{cas.loggingdashboard.level}"/>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td></td>
                            <td>logger</td>
                            <td>level</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div role="tabpanel" class="tab-pane" id="activeLoggers">
                    <table id="activeLoggersTable" class="display table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th></th>
                            <th th:text="#{cas.loggingdashboard.logger}"/>
                            <th th:text="#{cas.loggingdashboard.additive}"/>
                            <th th:text="#{cas.loggingdashboard.state}"/>
                            <th th:text="#{cas.loggingdashboard.level}"/>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div role="tabpanel" class="tab-pane" id="auditLog">
                    <table id="auditLogTable" class="display table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>Who</th>
                            <th>What</th>
                            <th>Action</th>
                            <th>When</th>
                            <th>Client IP</th>
                            <th>Server IP</th>
                        </tr>
                        </thead>
                        <tbody />
                    </table>
                </div>
                <div role="tabpanel" class="tab-pane" id="logOutput">
                    <div id="websocketStatus" class="alert alert-info" style="visibility:hidden"/>
                </div>
                <textarea id="logoutputarea" rows="20" cols="20"></textarea>
            </div>
        </div>
        <div th:replace="fragments/footerButtons"/>
    </div>


</div>
</body>
</html>
