<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEOs Tracker</title>
    <link rel="stylesheet" href="styles/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
    <div class="alert alert-warning" role="alert" style="text-align: center; text-decoration: none;">
        <a href="./apod.ejs">View Astronomy Picture of the Day (APOD)</a>
    </div>
    
    <div class="container" id="main-form">
        <h1 style="color:aliceblue"  class="display-1">Asteroids - NeoWs</h1>
        <p style="color:aliceblue" class="lead">With Near Earth Object Web Service, a user can search for Asteroids based on their closest approach date to Earth and lookup a specific Asteroid.</p>
        <form class="row g-3" method="post" action="/submit">
            <div class="col-md-12">
                <select class="form-select" name="month" aria-label="Default select example">
                    <option selected>Select Month</option>
                    <option value="01" name="01">1</option>
                    <option value="02" name="02">2</option>
                    <option value="03" name="03">3</option>
                    <option value="04" name="04">4</option>
                    <option value="05" name="05">5</option>
                    <option value="06" name="06">6</option>
                    <option value="07" name="07">7</option>
                    <option value="08" name="08">8</option>
                    <option value="09" name="09">9</option>
                    <option value="10" name="10">10</option>
                    <option value="11" name="11">11</option>
                    <option value="12" name="12">12</option>

                
                </select>
            </div>
            <div class="col-md-6">
                <select class="form-select" name="startdate" aria-label="Default select example">
                    <option selected>Select Start Date</option>
                    <option value="01" name="01">1</option>
                    <option value="02" name="02">2</option>
                    <option value="03" name="03">3</option>
                    <option value="04" name="04">4</option>
                    <option value="05" name="05">5</option>
                    <option value="06" name="06">6</option>
                    <option value="07" name="07">7</option>
                    <option value="08" name="08">8</option>
                    <option value="09" name="09">9</option>
                    <option value="10" name="10">10</option>
                    <option value="11" name="11">11</option>
                    <option value="12" name="12">12</option>
                    <option value="13" name="13">13</option>
                    <option value="14" name="14">14</option>
                    <option value="15" name="15">15</option>
                    <option value="16" name="16">16</option>
                    <option value="17" name="17">17</option>
                    <option value="18" name="18">18</option>
                    <option value="19" name="19">19</option>
                    <option value="20" name="20">20</option>
                    <option value="21" name="21">21</option>
                    <option value="22" name="22">22</option>
                    <option value="23" name="23">23</option>
                    <option value="24" name="24">24</option>
                    <option value="25" name="25">25</option>
                    <option value="26" name="26">26</option>
                    <option value="27" name="27">27</option>
                    <option value="28" name="28">28</option>
                    <option value="29" name="29">29</option>
                    <option value="30" name="30">30</option>
                </select>
            </div>
            <div class="col-md-6">
                <select class="form-select col-md-6" name="enddate" aria-label="Default select example">
                    <option selected>Select Start Date</option>
                    <option value="01" name="01">1</option>
                    <option value="02" name="02">2</option>
                    <option value="03" name="03">3</option>
                    <option value="04" name="04">4</option>
                    <option value="05" name="05">5</option>
                    <option value="06" name="06">6</option>
                    <option value="07" name="07">7</option>
                    <option value="08" name="08">8</option>
                    <option value="09" name="09">9</option>
                    <option value="10" name="10">10</option>
                    <option value="11" name="11">11</option>
                    <option value="12" name="12">12</option>
                    <option value="13" name="13">13</option>
                    <option value="14" name="14">14</option>
                    <option value="15" name="15">15</option>
                    <option value="16" name="16">16</option>
                    <option value="17" name="17">17</option>
                    <option value="18" name="18">18</option>
                    <option value="19" name="19">19</option>
                    <option value="20" name="20">20</option>
                    <option value="21" name="21">21</option>
                    <option value="22" name="22">22</option>
                    <option value="23" name="23">23</option>
                    <option value="24" name="24">24</option>
                    <option value="25" name="25">25</option>
                    <option value="26" name="26">26</option>
                    <option value="27" name="27">27</option>
                    <option value="28" name="28">28</option>
                    <option value="29" name="29">29</option>
                    <option value="30" name="30">30</option>
                </select>
            </div>
        
            <div class="col-12">
                <button type="submit" class="btn btn-primary submit">Submit</button>
            </div>
        </form>
        <div class="container px-4 text-center">
            <div class="row gx-5">
              <div class="col">
                <% if (locals.sd_data) { %>
               <div class="p-3 lead" style="color: aliceblue;">
                NASA JPL small body id: <%= sd_data.id %><br>
               Asteroid name: <%= sd_data.name %><br>
               Closest approach date and time: <%= sd_data.close_approach_date_full %><br>
               Orbiting body: <%= sd_data.orbiting_body %></div>
              </div>
              <% } %>
              <div class="col">
                <% if (locals.ed_data) { %>
                    <div class="p-3 lead" style="color: aliceblue;">
                     NASA JPL small body id: <%= sd_data.id %><br>
                    Asteroid name: <%= sd_data.name %><br>
                    Closest approach date and time: <%= sd_data.close_approach_date_full %><br>
                    Orbiting body: <%= sd_data.orbiting_body %></div>
                   </div>
                   <% } %>
              </div>
            </div>
          </div>
    </div>
    <%- include("partials/footer.ejs") %>
</body>
</html>