<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{{ title }}</title>
  <link rel="stylesheet" href="/static/fonts.css" />
  <link rel="stylesheet" href="/static/styles.css" />
  <link rel="stylesheet" href="/static/popup.css" />
  <script>
    async function shortenUrl() {
      const url = document.getElementById('url-input').value;
      const expiry = document.getElementById('expiry-select').value;
      const response = await fetch('/shorten', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: new URLSearchParams({url: url, expiry: expiry})
      });
      const data = await response.json();
      // Show the popup with the shortened URL
      const popup = document.getElementById('popup');
      const overlay = document.getElementById('overlay');
      const popupUrlElement = document.getElementById('popup-url');
      popupUrlElement.textContent = data.short_url;
      popup.style.display = 'block';
      overlay.style.display = 'block';
    }
    function copyToClipboard() {
      const url = document.getElementById('popup-url').textContent;
      navigator.clipboard.writeText(url).then(function () {
        alert('URL copied to clipboard!');
      }, function (err) {
        console.error('Failed to copy: ', err);
      });
    }
    function closePopup() {
      const popup = document.getElementById('popup');
      const overlay = document.getElementById('overlay');
      popup.style.display = 'none';
      overlay.style.display = 'none';
    }
  </script>
</head>

<body>
  <div class="main">
    <div class="title">Linky</div>
    <div class="url-input-container">
      <input type="text" id="url-input" class="url-input" placeholder="Enter URL here..." />
      <select id="expiry-select" class="expiry-select">
        <option value="30">30 seconds</option>
        <option value="60">60 seconds</option>
        <option value="180">3 minutes</option>
        <option value="never">Never expire</option>
      </select>
      <button class="generate-btn" onclick="shortenUrl()">Generate</button>
    </div>
  </div>
  <!-- Popup for showing the shortened URL -->
  <div id="popup" class="popup">
    <div class="popup-content">
      Shortened URL:
      <span id="popup-url" class="popup-url"></span>
      <button class="copy-btn" onclick="copyToClipboard()">Copy</button>
    </div>
    <button class="popup-close" onclick="closePopup()">Close</button>
  </div>
  <!-- Overlay to make the background darker -->
  <div id="overlay" class="overlay"></div>
</body>

</html>
