<!DOCTYPE html>
<html lang="en">
  <%- include("../blocks/head", {title: "Weather " + city})%>

  <body>
    <%- include("../blocks/header")%>
    <main class="mt-4 mb-4 mb-lg-1 mb-md-1 mb-sm-1">
      <div class="container">
        <form
          class="d-flex flex-column align-items-center"
          method="POST"
          action="/weather"
        >
          <input
            class="mt-2 border blue-border rounded-pill border-2 text-center"
            placeholder="Enter city..."
            type="text"
            name="city"
            id="input-text"
            required
          />
          <input
            class="mt-3 border blue-border rounded-pill border-2 text-light fw-bold"
            type="submit"
            id="input-submit"
          />
        </form>
        <h1 class="text-center mt-2"><%= city %></h1>
        <div class="row mt-2 row-cols-1 row-cols-md-2 g-3 main-content">
          <div class="col d-flex justify-content-center">
            <div class="block blue-border rounded-4 border-2 border d-flex p-lg-4 p-0">
              <div class="d-flex justify-content-center flex-column align-items-center w-50">
                <img
                  src="https://openweathermap.org/img/wn/<%= weatherData.icon %>@2x.png"
                  alt="Weather Icon"
                />
                <h3 class="fw-bold"><%= weatherData.main %></h3>
                <h5><%= weatherData.description %></h5>
                <h4 class="fw-bold"><%= weatherData.temp %> °C</h4>
                <div class="d-flex">
                  <p class="me-3">lon: <span><%= weatherData.lon %></span></p>
                  <p>lat: <span><%= weatherData.lat %></span></p>
                </div>
              </div>
              <div class="w-50 d-flex flex-column justify-content-between mx-auto">
                <h5>
                  Feels like:
                  <span class="fw-bold"><%= weatherData.feels_like %> °C</span>
                </h5>
                <h5>
                  Humidity:
                  <span class="fw-bold"><%= weatherData.humidity %> %</span>
                </h5>
                <h5>
                  Pressure:
                  <span class="fw-bold"><%= weatherData.pressure %> hPa</span>
                </h5>
                <h5>
                  Wind speed:
                  <span class="fw-bold"><%= weatherData.wind_speed %> m/s</span>
                </h5>
                <h5>
                  Country code:
                  <span class="fw-bold"><%= weatherData.country_abbr %></span>
                </h5>
              </div>
            </div>
          </div>
          <div class="col d-flex justify-content-center">
            <div
              class="block blue-border rounded-4 border-2 border d-flex justify-content-center align-items-center p-4"
            >
              <iframe
                class="w-100 h-100 blue-border rounded-1 border-2 border"
                src="https://maps.google.com/maps?q=<%= weatherData.lat %>,<%= weatherData.lon %>&z=8&output=embed"
              ></iframe>
            </div>
          </div>
        </div>
      </div>
    </main>
    <%- include("../blocks/footer.ejs") %>
  </body>
</html>
