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

<head>
    <title>Weatherly</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

    
    <header>
        <h1> Weatherly </h1>
        <img src="logo.png" alt="logo">
        <h2 class="tabs"> Weather Forecast </h2>
        <h2> Weather Map</h2>
        <h2> Weather Statistics </h2>
        <h2> Weather News </h2>
    </header>


    <main>

    <div class="weather-container">
        <div class="search">
            <fieldset>
                <form action="/" method="post">
                    <input name="city" type="text" placeholder="Enter a City here!" required>
                    <button type="submit" class="btn btn-primary" value="Get-Weather">Submit</button>
                </form>
            </fieldset>

            <%if( weather !== null){ %>
                <div>
                    <p class="place">
                        <%= place %>
                    </p>
                </div>
        </div>
            <div class="weather-content">
                <div>
                    <h2>Current Weather</h2>
                    <div class="current-weather">
                        <div>
                            <h2><%= temp %>°C</h2>
                            <img src="<%= icon %>" alt="Weather-Icon">
                        </div>
                        <p> Feels like 
                            <%= feelslike %>°C ,
                            <%= description %>
                        </p>
                    
                        <p> Wind Speed: 
                            <%= wind %> km/h
                        </p>
                        
                        <p> Visibility:
                            <%= visibility %> meters
                        </p>
                    </div>
                </div>

                <div>
                        <h2>Hourly Weather</h2>
                        <div class="hourly-weather">
                            <div>
                                <h3><%= currentPlusOne %></h3>
                                <img src="<%= iconOne %>" alt="Weather-Icon">
                                <p>
                                    <%= tempHourlyOne %>°C
                                </p>
                            </div>

                            <div>
                                <h3><%= currentPlusTwo %></h3>
                                <img src="<%= iconTwo %>" alt="Weather-Icon">
                                <p>
                                    <%= tempHourlyTwo %>°C
                                </p>
                            </div>

                            <div>
                                <h3><%= currentPlusThree %></h3>
                                <img src="<%= iconThree %>" alt="Weather-Icon">
                                <p>
                                    <%= tempHourlyThree %>°C
                                </p>
                            </div>
                        </div>
                    </div>

                    <div>
                            <h2>Daily Weather</h2>
                            <div class="daily-weather">
                                <div>
                                    <h4>Tomorrow: </h4>
                                    <img src="<%= dayIconOne %>" alt="Weather-Icon">
                                    <p>
                                        <%= tempDailyOne %> °C
                                    </p>
                                </div>

                                <div>
                                    <h4>The Day After Tomorrow: </h4>
                                    <img src="<%= dayIconTwo %>" alt="Weather-Icon">
                                    <p>
                                        <%= tempDailyTwo %> °C
                                    </p>
                                </div>

                                <div>
                                    <h4>Two Days After Tomorrow: </h4>
                                    <img src="<%= dayIconThree %>" alt="Weather-Icon">
                                    <p>
                                        <%= tempDailyThree %> °C
                                    </p>
                                </div>
                        </div>
                    </div>
                    <% } %>

                        <% if(error !== null){ %>
                            <p>
                                <%= error %>
                            </p>
                            <% } %>

                </div>

            </main>
                <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script></body>

</html>