<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dashboard</title>
    <!-- <script src="
https://cdn.jsdelivr.net/npm/tailwindcss@4.1.11/dist/lib.min.js
"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/tailwindcss@latest"></script>`` -->
    <link rel="stylesheet" href="/stylesheets/output.css" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
  </head>
  <body>
    <div
      class="min-h-screen bg-sky-400 flex flex-col items-center justify-center p-8"
    >
      <div class="grid grid-cols-5 gap-8 bg-inherit">
        <!-- Weather Card -->
        <div
          id="weather-widget"
          class="flex flex-col items-center bg-white rounded-lg shadow-md p-6 row-span-2"
        >
          <img
            class="weather-icon w-24 h-24 mb-2"
            src="https://cdn-icons-png.flaticon.com/512/869/869869.png"
            alt="Weather"
          />
          <div class="weather-temp text-3xl font-semibold mt-2">34 &deg;C</div>
        </div>
        <!-- Dropdown -->
        <div
          class="col-span-1 flex items-center justify-center bg-white rounded-lg shadow-md p-4 relative"
        >
          <input
            type="text"
            placeholder="Dropdown  autocomplete of airport"
            class="w-full outline-none"
          />
          <span class="ml-2 font-bold text-lg">&#9660;</span>
        </div>
        <!-- Nigeria Time -->
        <div
          class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center"
        >
          <div class="text-sm font-medium text-gray-500">Nigeria Time</div>
          <div class="text-3xl font-mono mt-2" id="nigeria-clock">23:01:05</div>
        </div>
        <!-- London Time -->
        <div
          class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center"
        >
          <div class="text-sm font-medium text-gray-500">London Time</div>
          <div class="text-3xl font-mono mt-2" id="london-clock">23:01:05</div>
        </div>
        <!-- EST Time -->
        <div
          class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center"
        >
          <div class="text-sm font-medium text-gray-500">EST Time</div>
          <div class="text-3xl font-mono mt-2" id="est-clock">23:01:05</div>
        </div>
        <!-- Click Counter -->
        <div
          class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center mt-8"
        >
          <div class="text-xs text-gray-500 mb-1">Number of Clicks</div>
          <div class="text-4xl font-bold" id="click-counter-widget">0</div>
        </div>
        <!-- Export XML -->
        <div
          class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center mt-8"
        >
          <div class="text-xs text-gray-500 mb-2">Export XML</div>
          <button class="bg-sky-400 text-white font-semibold px-8 py-2 rounded">
            Export
          </button>
        </div>
        <!-- Import XML -->
        <div
          class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center mt-8"
        >
          <div class="text-xs text-gray-500 mb-2">Import XML</div>
          <input
            type="file"
            id="import-xml-input"
            accept=".xml,text/xml,application/xml"
            class="mb-2 text-xs"
          />
          <button
            id="import-xml-btn"
            class="bg-green-400 text-white font-semibold px-8 py-2 rounded"
          >
            Import
          </button>
          <div id="import-status" class="text-xs mt-2"></div>
        </div>
        <!-- Map -->
        <div
          class="row-span-2 bg-white rounded-lg shadow-md p-2 flex items-center justify-center"
        >
          <div id="map-widget" class="w-full h-full"></div>
        </div>
        <!-- Distance -->
        <div
          class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center mt-8"
        >
          <div class="text-xs text-gray-500 mb-1">Distance from Arctic</div>
          <div class="text-4xl font-bold" id="distance-widget">N/A</div>
        </div>
        <!-- Pakistan Time -->
        <div
          class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center"
        >
          <div class="text-sm font-medium text-gray-500">Pakistan Time</div>
          <div class="text-3xl font-mono mt-2" id="pakistan-clock">
            23:01:05
          </div>
        </div>
        <!-- News List -->
        <div
          class="row-span-2 bg-white rounded-lg shadow-md p-4 flex flex-col justify-between"
        >
          <div class="text-xs font-semibold mb-2">News</div>
          <div class="overflow-y-auto h-full max-h-[300px]">
            <div id="news-widget" class="h-max"></div>
          </div>
        </div>
        <!-- Coin Calculator -->
        <div
          class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center"
        >
          <div class="text-xs text-gray-500 mb-1">Count # of coins</div>
          <input
            type="number"
            step="0.01"
            min="0"
            placeholder="Enter amount for coin calculator"
            class="mb-2 p-2 border rounded w-full text-center"
          />
          <button
            class="bg-sky-400 text-white font-semibold px-8 py-2 rounded mt-2"
          >
            Calculate
          </button>
          <ul
            id="coin-result-list"
            class="text-xs list-disc list-inside mt-2"
          ></ul>
        </div>
        <!-- Upload -->
        <div
          class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center justify-center mt-8"
        >
          <img
            id="upload-preview"
            src=""
            alt="Latest upload"
            class="w-24 h-24 object-cover rounded mb-2"
            style="display: none"
          />
          <input type="file" id="upload-input" accept="image/*" class="mb-2" />
          <button
            id="upload-btn"
            class="bg-sky-400 text-white font-semibold px-8 py-2 rounded"
          >
            Upload
          </button>
          <span id="upload-error" class="text-xs text-red-500 mt-2"></span>
        </div>
      </div>
    </div>

    <!-- 2FA Modal -->
    <div
      id="2fa-modal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"
    >
      <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4">
        <h2 class="text-2xl font-bold mb-4 text-center">
          Two-Factor Authentication
        </h2>

        <div id="2fa-setup" class="hidden">
          <p class="text-gray-600 mb-4 text-center">
            Scan this QR code with your authenticator app:
          </p>
          <div id="qr-code" class="flex justify-center mb-4"></div>
          <div class="flex gap-2 mb-4">
            <button
              id="download-qr"
              class="flex-1 bg-purple-500 text-white py-2 px-4 rounded hover:bg-purple-600 text-sm"
            >
              Download QR
            </button>
            <button
              id="copy-secret"
              class="flex-1 bg-gray-500 text-white py-2 px-4 rounded hover:bg-gray-600 text-sm"
            >
              Copy Secret
            </button>
          </div>
          <p class="text-xs text-gray-500 mb-4 text-center">
            Or manually enter this secret:
            <span
              id="secret-key"
              class="font-mono bg-gray-100 px-2 py-1 rounded"
            ></span>
          </p>
          <button
            id="generate-2fa"
            class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 mb-4"
          >
            Generate New Secret
          </button>
          <button
            id="proceed-to-verify"
            class="w-full bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600"
          >
            I've Added the Code, Verify Now
          </button>
        </div>

        <div id="2fa-verify" class="hidden">
          <p class="text-gray-600 mb-4 text-center">
            Enter the 6-digit code from your authenticator app:
          </p>
          <input
            type="text"
            id="2fa-token"
            placeholder="000000"
            maxlength="6"
            class="w-full text-center text-2xl font-mono border border-gray-300 rounded px-4 py-2 mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
          <button
            id="verify-2fa"
            class="w-full bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600 mb-2"
          >
            Verify
          </button>
          <button
            id="back-to-setup"
            class="w-full bg-gray-500 text-white py-2 px-4 rounded hover:bg-gray-600"
          >
            Back to Setup
          </button>
        </div>

        <div id="2fa-loading" class="text-center">
          <p class="text-gray-600 mb-4">Loading 2FA...</p>
        </div>
      </div>
    </div>

    <script src="/main.js"></script>
  </body>
</html>
