<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:fragment="head">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Home Connect Console</title>

    <!-- Bootstrap core CSS -->
    <link th:href="@{/homeconnect/asset/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="180x180" th:href="@{/homeconnect/asset/favicon/apple-touch-icon.png}">
    <link rel="icon" type="image/png" sizes="32x32" th:href="@{/homeconnect/asset/favicon/favicon-32x32.png}">
    <link rel="icon" type="image/png" sizes="16x16" th:href="@{/homeconnect/asset/favicon/favicon-16x16.png}">
    <link rel="manifest" th:href="@{/homeconnect/asset/favicon/site.webmanifest}">
    <link rel="mask-icon" th:href="@{/homeconnect/asset/favicon/safari-pinned-tab.svg}" color="#5bbad5">
    <link rel="shortcut icon" th:href="@{/homeconnect/asset/favicon/favicon.ico}">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-config" th:content="@{/homeconnect/asset/favicon/browserconfig.xml}" content="browserconfig.xml">
    <meta name="theme-color" content="#ffffff">

    <!-- Home Connect binding CSS -->
    <link th:href="@{/homeconnect/asset/css/homeconnect.css}" rel="stylesheet">
</head>

<body>
<nav th:fragment="topNav" class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Home Connect Console</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

<div class="container-fluid">
    <div class="row">
        <nav th:fragment="sidebarMenu (current)" th:assert="${!#strings.isEmpty(current)}" id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
            <div class="sidebar-sticky pt-3">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/homeconnect}" href="#"  th:classappend="${current == 'bridges' ? 'active' : ''}">
                            <span data-feather="link-2"></span>
                            Bridges
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/homeconnect/appliances}" href="#"  th:classappend="${current == 'appliances' ? 'active' : ''}">
                            <span data-feather="grid"></span>
                            Appliances
                        </a>
                    </li>
                </ul>

                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                    <span>Reports</span>
                </h6>
                <ul class="nav flex-column mb-2">
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/homeconnect/log/requests}" href="#"  th:classappend="${current == 'log-requests' ? 'active' : ''}">
                            <span data-feather="file-text"></span>
                            API Requests
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/homeconnect/log/events}" href="#"  th:classappend="${current == 'log-events' ? 'active' : ''}">
                            <span data-feather="file-text"></span>
                            Events (SSE)
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
        </main>
    </div>
</div>

<th:block th:fragment="js">
    <script th:src="@{/homeconnect/asset/js/jquery-3.5.1.min.js}"></script>
    <script th:src="@{/homeconnect/asset/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/homeconnect/asset/js/feather.min.js}"></script>
    <script th:src="@{/homeconnect/asset/js/homeconnect.js}"></script>
</th:block>

</body>
</html>
