<!DOCTYPE html>
<html>

<head>
    <title>Películas con <%= directorName %>
    </title>
    <link rel="stylesheet" href="/styles.css">
</head>

<body>
    <h1>Películas con <%= directorName %>
    </h1>
    <h3>Películas dirigidas</h3>
    <ul>
        <% directedMovies.sort((a, b)=> new Date(b.release_date) - new Date(a.release_date)).forEach((movie) => { %>
            <li><a href="/pelicula/<%= movie.movie_id %>">
                    <%= movie.title %> (<%= new Date(movie.release_date).getFullYear() %>)
                </a></li>
            <% }); %>
    </ul>
    <h3>Películas como actor</h3>
    <ul>
        <% actedMovies.sort((a, b)=> new Date(b.release_date) - new Date(a.release_date)).forEach((movie) => { %>
            <li><a href="/pelicula/<%= movie.movie_id %>">
                    <%= movie.title %> (<%= new Date(movie.release_date).getFullYear() %>) as <%= movie.rol %>
                </a></li>
            <% }); %>
    </ul>
    <p></p>
    <div id="inicio"><a href="/home">Inicio</a></div>

    <script>
        const coll = document.getElementsByClassName('collapsible');
        for (let i = 0; i < coll.length; i++) {
            coll[i].addEventListener('click', function () {
                this.classList.toggle('active');
                const content = this.nextElementSibling;
                if (content.style.display === 'block') {
                    content.style.display = 'none';
                } else {
                    content.style.display = 'block';
                }
            });
        }
    </script>

</body>

</html>