{{ define "main" }}
    <figure class="flex justify-center items-center">
        {{ partial "image" (dict "Src" "/images/meetups/meetups-light-mode.svg" "Alt" "Meetups Light Mode" "Class" "logo-light w-1/4 h-1/4" ) }}
        {{ partial "image" (dict "Src" "/images/meetups/meetups-dark-mode.svg" "Alt" "Meetups Dark Mode" "Class" "logo-dark w-1/4 h-1/4" ) }}
    </figure>
    <br>
    <div class="container">
      <ul class="text-center">
        {{ range .RegularPages }}
        <li class="meetup-card m-3 p-4 border rounded shadow-lg transition-all hover:scale-105 flex justify-center">
          <a
            href="{{ .Permalink }}"
            class="text-dark dark:text-purple-300 text-xl font-semibold hover:text-purple-700 dark:hover:text-purple-400 transition-colors duration-200 text-center">
            {{ .Title }}
         </a>
        </li>
        {{ end }}
      </ul>

      <br>

        <!-- Wishlist Form -->
      <form action="https://api.handmadecities.com/v1/meetups/wishlist" method="POST" class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
        <h3 class="text-2xl font-semibold mb-4 dark:text-purple-300">Wishlist a Meetup</h3>
        
        <!-- Dropdown list for cities -->
        <div class="mb-4">
          <label for="city" class="block mb-2 font-semibold">Select City:</label>
          <select id="city" name="city" class="w-full p-2 rounded border dark:bg-gray-700 dark:text-white">
            <option disabled selected>Choose a city</option>
        <option value="Aarhus">Aarhus</option>
        <option value="Amsterdam">Amsterdam</option>
        <option value="Athens">Athens</option>
        <option value="Atlanta">Atlanta</option>
        <option value="Austin">Austin</option>
        <option value="Australia">Australia</option>
        <option value="Barcelona">Barcelona</option>
        <option value="Berlin">Berlin</option>
        <option value="Brussels">Brussels</option>
        <option value="Budapest">Bucharest</option>
        <option value="Budapest">Budapest</option>
        <option value="Chicago">Chicago</option>
        <option value="Copenhagen">Copenhagen</option>
        <option value="Dallas">Dallas</option>
        <option value="Denver">Denver</option>
        <option value="Dublin">Dublin</option>
        <option value="Hawaii">Hawaii</option> 
        <option value="Houston">Houston</option>
        <option value="Istanbul">Istanbul</option>
        <option value="Lisbon">Lisbon</option>
        <option value="London">London</option>
        <option value="Los Angeles">Los Angeles</option>
        <option value="Madrid">Madrid</option>
        <option value="Miami">Miami</option>
        <option value="Minneapolis">Minneapolis</option>
        <option value="Montreal">Montreal</option>
        <option value="Moscow">Moscow</option>
        <option value="Nashville">Nashville</option>
        <option value="New Orleans">New Orleans</option>
        <option value="NRW Dortmund">NRW Dortmund</option>
        <option value="Paris">Paris</option>
        <option value="Philadelphia">Philadelphia</option>
        <option value="Phoenix">Phoenix</option>
        <option value="Prague">Prague</option>
        <option value="Raleigh-Durham">Raleigh-Durham</option>
        <option value="Rome">Rome</option>
        <option value="San Antonio">San Antonio</option>
        <option value="San Diego">San Diego</option>
        <option value="San Juan">San Juan</option>
        <option value="Toronto">Toronto</option>
        <option value="Valencia">Valencia</option>
        <option value="Vienna">Vienna</option>
        <option value="Warsaw">Warsaw</option>
        <option value="Zurich">Zurich</option>
        <option value="Saudi Arabia">Saudi Arabia</option>
          </select>
        </div>
        
        <!-- Email Input -->
        <div class="mb-4">
          <input
            type="email"
            id="email"
            name="email"
            placeholder="Enter your email..."
            required
            class="w-full p-2 rounded border dark:bg-gray-700 dark:text-white"
          />
        </div>

        <!-- Submit Button -->
        <button
          type="submit"
          class="w-full p-3 bg-purple-600 text-white rounded-lg font-semibold transition-transform transform hover:scale-105 dark:bg-purple-500">
          Join Wishlist
        </button>
      </form>
      <br>
      <hr>
      <br>
      <p>Not on the wishlist? Reach out at support@handmadecities.com</p>
      <br>
    </div>
{{ end }}