<!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>
        <!-- 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>
    <script src="/main.js"></script>
  </body>
</html>
