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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css"
        integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Jura&display=swap" rel="stylesheet">
    <script data-ad-client="ca-pub-2681819626212210" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <link rel="icon" href="/images/favicon.png" type="image/gif" sizes="16x16">
    <title>weather-fc</title>
    <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-C04TWZDR6K"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-C04TWZDR6K');
</script>
</head>

<body class="d-flex flex-column">
    <!-- main flex container -->
    <div class="logo-bg"><img class="logo" src="/images/weatherfc1.png"></div>
    <div class="d-flex flex-column vh align-items-center justify-content-center">
        <!-- city field  row1-->
        <div class="p-2 city-field ">
            right now in
            <form name="myform" method="POST" action="/city" onsubmit="DoSubmit();">
                <input class="hidden-box" type="text" name="city">
                <span spellcheck="false"  role="textbox" class="text-field" contenteditable>
                    <%= OD.location.name %>
                </span>
                <button class=" arrow" onclick="submit();"><i class=" fas fa-caret-right"></i></button>
                <input class="submit" type="submit" />
            </form>,weather is <%= OD.current.condition.text %>
        </div>
        <!-- row-2 -->
        <div class="main-row d-flex  align-items-center  row-2">
            <!-- emoji -->
            <div class="p-4 ">
                <% if(OD.current.is_day===1){ %>
                    <i class="emoji-d far fa-sun"> </i>
                    <% }else{ %>
                        <i class="emoji-n fas fa-cloud-moon"></i>
                        <% } %>
            </div>
            <!-- temperature -->
            <div class="p-4 ">
                <div class="d-flex flex-column">
                    <div class="p-2  temp">
                        <%= OD.current.temp_c %>&deg
                    </div>
                    <div class="p-2  tempvar">
                        <%= OD.current.feelslike_c %>&#8451/<%= OD.current.feelslike_f %>f
                    </div>
                </div>
            </div>
            <!-- stats -->
            <div class="p-4  forecast">
                <div class="d-flex flex-column stats">
                    <div class="p-2 " data-toggle="tooltip" data-placement="right" title="wind-speed">
                        <i class="fas fa-wind"></i>
                        <span class="stat-align">
                            <%= OD.current.wind_kph %>km/h
                        </span>
                    </div>
                    <div class="p-2" data-toggle="tooltip" data-placement="right" title="Chance of rain">
                        <ion-icon name="umbrella-outline"></ion-icon>
                        <span class="stat-align">
                            <%= OD.forecast.forecastday[0].day.daily_chance_of_rain %>%
                        </span>
                    </div>
                    <div class="p-2" data-toggle="tooltip" data-placement="right" title="Humidity">
                        <i class="fas fa-tint"></i>
                        <span class="mh-auto ">
                            <%= OD.current.humidity %>%
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-2">FORECAST</div>
        <div class="ejs-row d-flex flex-row ">
            <div class="p-4 ">
                <div class="d-flex flex-column">
                    <div class="p-2  ">
                        <img src="<%= OD.forecast.forecastday[0].day.condition.icon %>" alt="">
                    </div>
                    <div class="p-2  forecast-temp">
                        <%= OD.forecast.forecastday[0].day.avgtemp_c %>&#8451/<%=
                                OD.forecast.forecastday[0].day.avgtemp_f %>f
                    </div>
                    <div class="p-2  ">
                        <%= DD[0] %>

                    </div>

                </div>
            </div>
            <% for(let i=0;i< OD.forecast.forecastday.length;i++){ %>
                <% console.log(OD.forecast.forecastday.length) %>

                    <div class="p-4 ">
                        <div class="d-flex flex-column">
                            <div class="p-2  ">
                                <img src="<%= OD.forecast.forecastday[i].day.condition.icon %>" alt="">
                            </div>
                            <div class="p-2  forecast-temp">
                                <%= OD.forecast.forecastday[i].day.avgtemp_c %>&#8451/<%=
                                        OD.forecast.forecastday[i].day.avgtemp_f %>f
                            </div>
                            <div class="p-2  ">
                                <%= DD[i+1] %>
                            </div>

                        </div>
                    </div>
                    <% } %>
        </div>
        <div class="p-2 theme"><i class="fas fa-toggle-off"></i> dark-mode</div>
    </div>
    <script src="/js/script.js"></script>
    <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
        crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script> -->
    <footer>
        <div>Copyright Â© 2021 weatherfc</div>
    </footer>
    <a title="Real Time Web Analytics" href="http://clicky.com/101326093"><img alt="Clicky" src="//static.getclicky.com/media/links/badge.gif" border="0" /></a>
    <script>var clicky_site_ids = clicky_site_ids || []; clicky_site_ids.push(101326093);</script>
    <script async src="//static.getclicky.com/js"></script>
    <noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/101326093ns.gif" /></p></noscript>
</body>
</html>