<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="/local-dns-setting">Server</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" data-bs-toggle="modal" data-bs-target="#configBackdrop" style="cursor: pointer;">Configuration</a></li>
              <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#advBackdrop" style="cursor: pointer;">Advanced</a></li>
              <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#expimpBackdrop" style="cursor: pointer;">Backup . Restore</a></li>
              <li><a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#pinBackdrop" style="cursor: pointer;">Change PIN</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="/help-full">Info</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" title="Logout" href="/logout" title="Logout">Exit</a></li>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<!-- APRS DAPNET Config -->
<div class="modal fade" id="configBackdrop" 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">APRS & DAPNET Configuration</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="/AnD-creds" method="POST">
        <div class="modal-body">
            <div class="mb-3">
              <label for="callsign-input" class="form-label">Callsign (no SSID)</label>
              <input type="text" class="form-control" id="callsign-input" name="callsign" value="{{ creds['callsign'] }}" required>
            </div>
            <div class="mb-3">
              <label for="aprsapi-input" class="form-label">APRS API key</label>
              <input type="password" class="form-control" id="aprsapi-input" name="aprsapi" value="" required>
            </div>
            <div class="mb-3">
              <label for="dapnetuser-input" class="form-label">DAPNET username</label>
              <input type="text" class="form-control" id="dapnetuser-input" name="dapnetuser" value="{{ creds['dapnetuser'] }}" required>
            </div>
            <div class="mb-3">
              <label for="dapnetpass-input" class="form-label">DAPNET password</label>
              <input type="password" class="form-control" id="dapnetpass-input" name="dapnetpass" value="" required>
            </div>
            <div class="mb-3">
              <label for="txgroup-input" class="form-label">DAPNET transmitter group</label>
              <input type="text" class="form-control" id="txgroup-input" name="txgroup" value="{{ creds['txgroup'] }}" required>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Set Config</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Advanced Setup -->
<div class="modal fade" id="advBackdrop" 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">Advanced Options</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="/save-adv-conf" method="POST" onsubmit="return validateForm()" id="advForm">
        <div class="modal-body" style="margin-top: 12px;">
          <div class="mb-3">
              <div class="mb-3">
                  <label for="intervalmin" class="form-label">Interval:</label>            
                  <input type="number" id="intervalmin" name="intervalmin" value="{{ intervalmin }}" min="0" max="59" style="width: 65px;" required>
                  <label for="intervalmin" class="form-label">(min)</label> &nbsp;
                  <input type="number" id="intervalh" name="intervalh" value="{{ intervalh }}" min="0" max="23" style="width: 65px;" required>
                  <label for="intervalh" class="form-label">(h)</label><br>
                  <label for="intervalh" class="form-label" style="font-size: 12px">Defaults to '15 min' if both '0' (or) to '2 min' if set to '1 min'</label><br>
              </div>
              <div class="mb-3">
                <label for="ssids" class="form-label" style="margin-bottom: 1px;">Preferred APRS SSIDs for </label> <label for="ssids" id="get-callsign2">{{ callsign2 }}</label> <br>
                <label for="ssids" class="form-label" style="font-size: 12px">Select '-0' for no SSID </label>
              </div>
              <div class="mb-3" style="display: flex; justify-content: center; align-items: center;">
                <table>
                  <tr>
                    {% for i in range(16) %}
                      {% if loop.index % 4 == 1 %}
                        </tr><tr>
                      {% endif %}
                      <td>
                        <div class="form-check form-check-inline">
                          <input class="form-check-input" type="checkbox" id="inlineCheckbox{{ i }}" value="{{ i }}" name="ssids[]"
                            {% if i|string in ssids %}checked{% endif %}>
                          <label class="form-check-label" for="inlineCheckbox{{ i }}">-{{ i }}</label>
                        </div>
                      </td>
                    {% endfor %}
                  </tr>
                </table>
              </div><br>
              <div class="mb-3">
                <label for="logcounts" class="form-label">Transmit logs:</label>            
                <input type="number" id="logcounts" name="logcounts" value="{{ logcounts }}" min="1" max="150" style="width: 65px;" required>&nbsp;
                <label for="logcounts" class="form-label" style="font-size: 12px">(Transmits on Dashboard)</label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Set Config</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- 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">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>

<!-- Export/Import Config links -->
<div class="modal fade" id="expimpBackdrop" 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">Backup . Restore</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" style="display: flex; justify-content: center; align-items: center; margin-top: 12px;">
        <div class="mb-3">
          <a data-bs-toggle="modal" data-bs-target="#expBackdrop" style="cursor: pointer;" class="btn btn-primary">Backup Configuration</a><br><br><br>
          <a data-bs-toggle="modal" data-bs-target="#impBackdrop" style="cursor: pointer;" class="btn btn-primary">Restore Configuration</a>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

<!-- Export Config -->
<div class="modal fade" id="expBackdrop" 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">Backup Configuration</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
            <div class="modal-body">
                  <label for="passphrase1" class="form-label">Enter Passphrase:</label>
                  <input type="password" class="form-control" id="passphrase1" name="passphrase"><br>

                  <a data-bs-toggle="modal" data-bs-target="#expimpBackdrop" style="cursor: pointer;" class="btn btn-outline-primary btn-sm">Back to Menu</a><br><br>
                  <!-- Error message element -->
                    <span id="error-message" style="color: #d4660c; font-weight: bold;"></span>
              </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="button" id="backupButton" class="btn btn-primary">Backup</button>
          </div>
      </div>
  </div>
</div>

<!-- Import Config -->
<div class="modal fade" id="impBackdrop" 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">Restore Configuration</h1>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <form id="importForm" action="/import" method="post" enctype="multipart/form-data">
                <div class="modal-body">
                      <label for="passphrase2" class="form-label">Enter Passphrase:</label>
                      <input type="password" class="form-control" id="passphrase2" name="passphrase"><br>
                      <input type="file" class="form-control" id="import_file" name="import_file">
                      <input type="hidden" name="action" value="import"><br>

                      <a data-bs-toggle="modal" data-bs-target="#expimpBackdrop" style="cursor: pointer;" class="btn btn-outline-primary btn-sm">Back to Menu</a><br><br>
                      <!-- Error message element -->
                        <span id="error-message2" style="color: #d4660c; font-weight: bold;"></span>
                  </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                  <button type="button" id="restoreButton" class="btn btn-primary">Restore</button>
              </div>
          </form>
      </div>
  </div>
</div>
