<nav class="navbar sticky-top navbar-expand-lg bg-dark" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="/" style="font-size: 15px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <img src="{{ url_for('get_image') }}" alt="a2d" width="50" height="50" class="d-inline-block align-text-center">&nbsp;&nbsp;
        APRS to DAPNET portal
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="container">
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="/">Dashboard</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Options">Options</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/local-dns-setting">Server</a></li>
                <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#pinBackdrop" style="cursor: pointer;">Change PIN</a></li>
              </ul>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Mode">Mode</a>
              <ul class="dropdown-menu">
                <li><a href="#" class="dropdown-item" data-bs-toggle="modal" id="toggle-light" data-bs-theme-value="light">Light</a></li>
                <li><a href="#" class="dropdown-item" data-bs-toggle="modal" id="toggle-dark" data-bs-theme-value="dark">Dark</a></li>
                <li><a href="#" class="dropdown-item" data-bs-toggle="modal" id="toggle-auto" data-bs-theme-value="auto">Auto</a></li>
              </ul>
            </li>
            <li class="nav-item">
            <li><a class="nav-link" href="/logout" title="Logout">Exit</a></li>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  
  <!-- Change PIN -->
  <div class="modal fade" id="pinBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel"><span class="material-symbols-outlined">key</span>&nbsp;&nbsp;New PIN</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="clearPinFields()"></button>
        </div>
        <form id="pinForm" action="/pin-change" method="POST">
          <div class="modal-body" style="display: flex; justify-content: center; align-items: center; margin-top: 12px;">
            <div class="mb-3">
                <input type="password" name="digit1" inputmode="numeric" pattern="[0-9]" maxlength="1" style="width: 30px;" required oninput="moveToNext(this, 'digit2')">
                <input type="password" name="digit2" inputmode="numeric" pattern="[0-9]" maxlength="1" style="width: 30px;" required oninput="moveToNext(this, 'digit3')">
                <input type="password" name="digit3" inputmode="numeric" pattern="[0-9]" maxlength="1" style="width: 30px;" required oninput="moveToNext(this, 'digit4')">
                <input type="password" name="digit4" inputmode="numeric" pattern="[0-9]" maxlength="1" style="width: 30px;" required oninput="moveToNext(this, 'digit5')">
                <input type="password" name="digit5" inputmode="numeric" pattern="[0-9]" maxlength="1" style="width: 30px;" required oninput="moveToNext(this, 'digit6')">
                <input type="password" name="digit6" inputmode="numeric" pattern="[0-9]" maxlength="1" style="width: 30px;" required>
            </div>
          </div>
          <div class="modal-footer" style="display: flex; justify-content: center; align-items: center;">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="clearPinFields()">Cancel</button>
            <button type="submit" class="btn btn-primary">Update</button>
          </div>
        </form>
      </div>
    </div>
  </div>
