<!DOCTYPE html>
<html>

<head>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Title -->
    <title> Spacestagram </title>
    <!-- CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    
    <div class="container">

        <h1>NASA Images: Spacestagram</h1>
        <subtitle>Using NASA's <a href="https://github.com/nasa/apod-api" >Astronomy Picture of the Day API</a>!</subtitle>

        <% if (!home) { %>
            <a href="/" class="btn btn-dark mx-3">Return to home</a>
        <% } %>

        <div class="container align-items-center pt-2">
            <form action="date-range" method="post">
                <div class="form-inline">
                    <label class="mx-2 col-form-label">Pick a date range:</label>
                    <label class="mx-2 col-form-label" for="start_date">Start</label>
                    <input class="form-control col-2" type="text" name="start_date" id="start_date" placeholder="YYYY-MM-DD" value='' required>
                    <label class="ml-4 mr-2 col-form-label" for="end_date">End</label>
                    <input class="form-control col-2" type="text" name="end_date" id="end_date" placeholder="YYYY-MM-DD" value='' required>
                    <button type="submit" class="btn btn-dark mx-4">Go!</button>
                </div>
            </form>
        </div>

        <% if (message) { %>
            <p class="text-center pt-3"><%- message %></p>
        <% } %>

        <div class="container" id="display">

            <% if (images) {

                var cards = '<div class="card-columns">';

                    for (var i = 0; i < images.length; i++) {
                        var image = images[i];
            
                        if (!image.hdurl) {
                            continue;
                        }
                        
                        cards += '<div class="card">';
                        cards += '<img class="card-img-top" src=' + image.hdurl + ' alt="Image not found"><div class="card-body">';
                        cards += '<h4 class="card-title">' + image.title + '</h4><h6 class="text-muted">' + image.date;
                        cards += '</h6><p>' + image.explanation.slice(0, 101);
                        cards += '...</p><button type="button" class="btn btn-like shadow-none unliked"';
                        cards += 'data-toggle="button" aria-pressed="false" autocomplete="off">';
                        cards += '<i class="bi bi-suit-heart-fill"></i></button></div></div>';
                    }
                    cards += '</div>';
                %>
                
                <%- cards; %>

            <% } %>

            <!-- Test card -->
            <!-- <div class="card">
                <img class="card-img-top" src='https://www.vancouvertrails.com/blog/wp-content/uploads/2019/10/1-z.jpg' alt=\'\'>
				<div class="card-body mx-auto">
                    This is the card body ajelkawjfla;jfel
                    <button type="button" class="btn btn-like shadow-none unliked">
                        <i class="bi bi-suit-heart-fill"></i>
                    </button>
                </div>
            </div> -->

        </div>
        
    </div>

    <!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="/script.js"></script>

</body>

</html>