<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<nav th:fragment="nav-top" class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
    <div class="container-fluid">
        <div class="navbar-brand">
            <img th:src="@{/images/too-easy-trade.png}" class="img-fluid" style="max-width: 100px;">
        </div>
        <button sec:authorize="isAuthenticated()" class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#mobileMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>

<nav th:fragment="nav-mobileMenu" class="col-md-2 bg-dark sidebar collapse d-md-block" id="mobileMenu">
    <a th:href="@{/}">🏠 Início</a>

    <a class="dropdown-toggle d-block text-white" data-bs-toggle="collapse" href="#cpr-submenu"
       role="button" aria-expanded="false" aria-controls="cpr-submenu">
        📝️ CPR
    </a>
    <div class="collapse ms-2" id="cpr-submenu">
        <a th:href="@{/cpr/contract/all}" class="d-block text-white">📝️ Contrato</a>
        <a th:href="@{/cpr/emission/all}" class="d-block text-white">📝️ Emissão</a>
        <a th:href="@{/cpr/register/all}" class="d-block text-white">📝️ Registro</a>
    </div>

    <a class="dropdown-toggle d-block text-white" data-bs-toggle="collapse" href="#commodities-submenu"
       role="button" aria-expanded="false" aria-controls="commodities-submenu">
        🛢️ Commodities
    </a>
    <div class="collapse ms-2" id="commodities-submenu">
        <a th:href="@{/commodity}" class="d-block text-white">➕ Cadastrar</a>
        <a th:href="@{/commodity/all}" class="d-block text-white">📋 Listar</a>
        <a th:href="@{/commodity/all}" class="d-block text-white">🪙 Tokens</a>
    </div>

    <a th:href="@{/}">🏦 Bank</a>

    <a class="dropdown-toggle d-block text-white" data-bs-toggle="collapse" href="#operacoes-submenu"
       role="button" aria-expanded="false" aria-controls="operacoes-submenu">
        📈 Operação
    </a>
    <div class="collapse ms-2" id="operacoes-submenu">
        <a th:href="@{/}" class="d-block text-white">🏷️ Compra</a>
        <a th:href="@{/}" class="d-block text-white">📦 Venda</a>
        <a th:href="@{/}" class="d-block text-white">🤝 Escambo</a>
    </div>

    <a th:href="@{/}">🛍️ Marketplace</a>

    <a class="dropdown-toggle d-block text-white" data-bs-toggle="collapse" href="#relatoriosSubmenu"
       role="button" aria-expanded="false" aria-controls="relatoriosSubmenu">
        📊 Relatórios
    </a>
    <div class="collapse ms-2" id="relatoriosSubmenu">
        <a href="#" class="d-block text-white">➤ Compras</a>
        <a href="#" class="d-block text-white">➤ Vendas</a>
    </div>

    <a th:href="@{/user/listar}" sec:authorize="hasRole('ADMIN')">👥 Usuários</a>

    <a class="dropdown-toggle d-block text-white" data-bs-toggle="collapse" href="#config-subMenu"
       role="button" aria-expanded="false" aria-controls="config-subMenu" sec:authorize="hasRole('ADMIN')">
        ⚙️ Configurações
    </a>
    <div class="collapse ms-2" id="config-subMenu" sec:authorize="hasRole('ADMIN')">
        <a th:href="@{/banco}" target="_blank" class="d-block text-white">🗄️ Banco de Dados H2</a>
    </div>


    <a th:href="@{/logout}">🚪 Sair</a>
</nav>
</body>
</html>