@if(session)
<!-- logged in -->
<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" href="/"><span class="f0ck" width="" height="">w0bm.com</span></a>
  <div class="nav-left-group">
    <div class="nav-user-dropdown">
      <button class="nav-user-btn" id="nav-user-toggle">
        {{ session.user }} ▾
      </button>
      <div class="nav-user-menu" id="nav-user-menu">
        <a href="/user/{{ session.user.toLowerCase() }}">profile</a>
        <a href="/user/{{ session.user.toLowerCase() }}/favs">favs</a>
        <a href="/upload">upload</a>
        @if(session.admin)
        <a href="/admin">Admin
          @if(typeof session.pending_count !== 'undefined' && session.pending_count > 0)
          <span class="notification-dot" title="{{ session.pending_count }} Pending"
            onclick="event.preventDefault(); window.location.href='/admin/approve';"></span>
          @endif
        </a>
        @endif
        <a href="/settings">settings</a>
        <a href="/about">about</a>
        <div class="nav-user-divider"></div>
        <a href="/logout">logout</a>
      </div>
    </div>
    <div class="nav-links">
      <a href="/tags">tags</a>
      @if(!/^\/\d$/.test(url.pathname))
      <a href="/random" id="nav-random" title="Random"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
          fill="currentColor" viewBox="0 0 16 16">
          <path fill-rule="evenodd"
            d="M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.624 9.624 0 0 0 7.556 8a9.624 9.624 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.595 10.595 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.624 9.624 0 0 0 6.444 8a9.624 9.624 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5z" />
          <path
            d="M13 5.466V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192zm0 9v-3.932a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192z" />
        </svg></a>
      @endif
      <a href="#" id="nav-search-btn" title="Search"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
          fill="currentColor" viewBox="0 0 16 16">
          <path
            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg></a>
    </div>
  </div>
  <!-- show pagination only for tags and main page -->
  @if(typeof hidePagination === 'undefined' || !hidePagination)
  <div class="collapse navbar-collapse show" id="navbarSupportedContent">
    <div class="pagination-container-fluid">
      <div class="pagination-wrapper">
        @include(snippets/pagination)
      </div>
    </div>
  </div>
  @endif
</nav>
@else
<!-- not logged in -->
<nav class="navbar navbar-expand-lg">
  <a class="navbar-brand" href="/"><span class="f0ck" width="" height="">w0bm.com</span></a>
  <div class="nav-left-group">
    <div class="nav-user-dropdown">
      <button class="nav-user-btn" id="nav-visitor-toggle">
        guest ▾
      </button>
      <div class="nav-user-menu" id="nav-visitor-menu">
        <a href="#" id="nav-login-btn">Login</a>
        <a href="#" id="nav-register-btn">Register</a>
        <div class="nav-user-divider"></div>
        <a href="/about">about</a>
      </div>
    </div>
    <div class="nav-links">
      <a href="/tags">tags</a>
      @if(!/^\/\d$/.test(url.pathname))
      <a href="/random" id="nav-random" title="Random"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
          fill="currentColor" viewBox="0 0 16 16">
          <path fill-rule="evenodd"
            d="M0 3.5A.5.5 0 0 1 .5 3H1c2.202 0 3.827 1.24 4.874 2.418.49.552.865 1.102 1.126 1.532.26-.43.636-.98 1.126-1.532C9.173 4.24 10.798 3 13 3v1c-1.798 0-3.173 1.01-4.126 2.082A9.624 9.624 0 0 0 7.556 8a9.624 9.624 0 0 0 1.317 1.918C9.828 10.99 11.204 12 13 12v1c-2.202 0-3.827-1.24-4.874-2.418A10.595 10.595 0 0 1 7 9.05c-.26.43-.636.98-1.126 1.532C4.827 11.76 3.202 13 1 13H.5a.5.5 0 0 1 0-1H1c1.798 0 3.173-1.01 4.126-2.082A9.624 9.624 0 0 0 6.444 8a9.624 9.624 0 0 0-1.317-1.918C4.172 5.01 2.796 4 1 4H.5a.5.5 0 0 1-.5-.5z" />
          <path
            d="M13 5.466V1.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192zm0 9v-3.932a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384l-2.36 1.966a.25.25 0 0 1-.41-.192z" />
        </svg></a>
      @endif
      <a href="#" id="nav-search-btn-guest" title="Search"><svg xmlns="http://www.w3.org/2000/svg" width="13"
          height="13" fill="currentColor" viewBox="0 0 16 16">
          <path
            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg></a>
    </div>
  </div>
  <!-- show pagination only for tags and main page -->
  @if(typeof hidePagination === 'undefined' || !hidePagination)
  <div class="collapse navbar-collapse show" id="navbarSupportedContent">
    <div class="pagination-container-fluid">
      <div class="pagination-wrapper">
        @include(snippets/pagination)
      </div>
    </div>
  </div>
  @endif
</nav>
@endif

<!-- Login Modal -->
<div id="login-modal" style="display: none;">
  <div class="login-modal-content">
    <button id="login-modal-close">&times;</button>
    <form class="login-form" method="post" action="/login">
      <img class="login-image" src="/s/img/w0bm_mosh_banner_by_marderchen.gif" alt="Login Banner">
      <input type="text" name="username" placeholder="Username" autocomplete="off" required />
      <input type="password" name="password" placeholder="Password" autocomplete="off" required />
      <p style="text-align: left; font-size: 0.9em; margin: 0;"><input type="checkbox" id="kmsi-modal" name="kmsi" />
        <label for="kmsi-modal">Stay signed in</label>
      </p>
      <button type="submit">Login</button>
    </form>
  </div>
</div>

<!-- Register Modal -->
<div id="register-modal" style="display: none;">
  <div class="login-modal-content">
    <button id="register-modal-close">&times;</button>
    <form class="login-form" method="post" action="/register">
      <h2 style="text-align: center; margin-bottom: 20px;">Register</h2>
      <input type="text" name="username" placeholder="username" autocomplete="off" required />
      <input type="password" name="password" placeholder="password" autocomplete="off" required minlength="20"
        title="Must be at least 20 characters long." />
      <input type="password" name="password_confirm" placeholder="confirm password" autocomplete="off" required />
      <input type="text" name="token" placeholder="invite token" autocomplete="off" required />
      <p style="text-align: left; font-size: 0.9em; margin: 0; color: #fff;">
        <input type="checkbox" id="tos-modal" name="tos" required />
        <label for="tos-modal">I have read and accept the <a href="/terms" target="_blank"
            style="color: var(--accent); text-decoration: underline;">Terms of Service</a> and I am at least 18 years
          old</label>
      </p>
      <button type="submit">Create Account</button>
    </form>
  </div>
</div>