<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="body-home">
    <header class="header-home">
        <div>
            <h2><%= series.title %></h2>

            <ul class="header-genres">
                <% series.genres.forEach(genre => { %>
                    <li><%= genre.charAt(0).toUpperCase() + genre.slice(1)%></li>
                <%}); %>
            </ul>
        </div>

        <img src="<%= series.img %>" alt="<%= series.title %>">
        
        <div class="overlay-home"></div>
    </header>
    <main class="main-home">
        <h1>Have all your series in one place</h1>
        <p>Make an account to start your journey to have all your series in one place</p>

        <div>
            <a href="/login">Sign in</a>
            <a href="/signup">Sign up</a>
        </div>
    </main>
    <img class="logo" src="../dist/img/logo.svg" alt="Logo">
    <script src="../dist/js/visibility.js"></script>
</body>
</html>