<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="/"><img src="/assets/logo.png" style="height: 50px; width: 50px;"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  
    <div class="collapse navbar-collapse" id="navbarColor02">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/bots">Bots</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/about">About</a>
        </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="nav-item">
                <a href="/bots/add" class="nav-link">Add Bot</a>
            </li>
            <li class="nav-item dropdown mr-2">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Themes</a>
                <div class="dropdown-menu">
                    <center class="btn-group-vertical" style="width: calc(100% - 20px); margin: 0 10px;">
                        <button type="button" onclick="toggleTheme('white')" class="btn btn-primary" style="background-color: white; color: black; border: 1px solid white;">White</button>
                        <button type="button" onclick="toggleTheme('dark')" class="btn btn-secondary">Dark</button>
                        <button type="button" onclick="toggleTheme('ocean')" class="btn btn-primary">Ocean</button>
                    </center>
                </div>
            </li>
            <% if (user) { %>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle btn btn-primary pl-3 pr-3 mr-3" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" style="color: white !important;"><%= user.username %>#<%= user.discriminator %></a>
                        <div class="dropdown-menu">
                        <a class="dropdown-item" href="/me">Profile</a>
                        <a class="dropdown-item" href="/logout">Logout</a>
                        <% if (user.staff) { %>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="/queue">Queue</a>
                        <% } %>
                    </div>
                </li>
            <% } else { %>
                <li class="nav-item">
                    <a href="/login" class="btn btn-primary pl-3 pr-3 mr-3">Login</a>
                </li>
            <% } %>
        </ul>
        <div class="form-inline my-2 my-lg-0">
            <input id="search-box" class="form-control" type="text" placeholder="Search" autocomplete="off">
            <button id="search-btn" class="btn btn-light my-2 my-sm-0" type="button">Search</button>
        </div>
    </div>
</nav>

<script>
$(function (params) {
    const searchBtn = $("#search-btn");
    searchBtn.click(function (event) {
        event.preventDefault();
        const searchBox = $("#search-box");
        const searchTerm = searchBox.val();
        if(searchTerm) {
            searchBtn.addClass("disabled");
            location.replace(`/search?q=${searchTerm}`);
        }
    });
});

function toggleTheme(theme) {
    localStorage.setItem("theme", theme);
    location.reload();
}
</script>