<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APOD</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="container">
        <h1 class="display-1" style="color: aliceblue;">Astronomy Picture Of the Day (APOD)</h1>
        <% if (locals.data) { %>
            <% if (locals.image) { %>
        <img src= <%= image %> class="img-fluid" alt="..." id="apod-image">
        <% } %>
        <div class="card-body" style="color: aliceblue;">
          <h5 class="card-title display-4"><%= data.title %></h5>
          <h5 class="card-title display-5">Copyright: <%= data.copyright %></h5>
          <p class="card-text lead"><%= data.explanation %></p>
          <a href="/" class="btn btn-primary">Go back</a>
          <% } %>
    </div>
    <%- include("partials/footer.ejs") %>
        
</body>