<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <script src="https://kit.fontawesome.com/2ecee89ad8.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <title>CineWiki | Film Details</title>
</head>
<body>
    <%- include("./partials/header.ejs") %>
    <main>
        <nav>
            <ul>
                <a href="/"> <li><i class="fa-solid fa-house"></i></li> </a>
                <a href="/register"> <li><i class="fa-solid fa-plus"></i></li> </a>
            </ul>
        </nav>
        <div id="info-card">
            <h2><%= filmDetails.name %></h2>
            <div class="iframe-frame"><iframe <%= filmDetails.iframe_link %> ></iframe></div>
            <table>
                <thead>
                    <th colspan="2">Details</th>
                </thead>
                <tbody>
                    <tr>
                        <td>Director</td>
                        <td><%= filmDetails.director %> </td>
                    </tr>
                    <tr>
                        <td>Duration</td>
                        <td><%= filmDetails.duration %> min </td>
                    </tr>
                    <tr>
                        <td>Genre</td>
                        <td><%= filmDetails.genre %> </td>
                    </tr>
                    <tr>
                        <td>Release Year</td>
                        <td><%= filmDetails.year %> </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main> 
    <%- include("./partials/footer.ejs") %> 
</body>
</html>