<!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">
        <title>Current Movies</title>
        <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;">
            <div class="container-fluid">
              <a class="navbar-brand" href="/account?user=<%=user%>">Welcome <%=user%></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                  <a class="nav-link" href="/view_theatres?user=<%=user%>&user_id=<%=user_id%>">Theatres</a>
                  <a class="nav-link <%= user==='Guest'?'disabled':'nav-link'%>" href="/booked_tickets?user_id=<%=user_id%>&user=<%=user%>">Booked Tickets</a>
                </div>
              </div>
            </div>
        </nav>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
        <style>
            .card:hover {
                transform: scale(1.1);
            }
            .card{
                transition: transform 0.5s ease;
            }
        </style>
    </head>
    <body>
        <div class="d-flex justify-content-center align-items-center">
            <h1>Currently Available Movies</h1>
        </div>
        <br>
        <div class="row" style="margin-left: 20px;margin-right: 10px;">
            <% for (let i = 0;i<5;i++){%>
                <div class="col-sm-6 card d-flex flex-column mx-auto" style="width: 18rem;">
                    <img src=<%=images[i]%> class="card-img-top img-fluid rounded mx-auto d-block" alt="...">
                    <div class="card-body d-flex flex-column">
                        <h4 class="card-title"><%=movie_names[i]%></h5>
                        <h5 class="card-subtitle mb-2 text-muted"><%=movie_lang[i]%></h5>
                        <h6 class="card-subtitle mb-2 text-muted"><%=movie_types[i]%></h6>
                        <p class="card-text"><%=movie_desc[i]%></p>
                        <p class="card-text lead">Release date : <%=movie_release_dates[i]%></p>
                        <p class="card-text"><strong>Runtime : <%=movie_length[i]%> minutes </strong></p>
                        <a href="/book_ticket?movie_id=<%=movie_ids[i]%>&user=<%=user%>" class="btn btn-primary mt-auto">Book Movie</a>
                    </div>
                </div>
            <% } %>
        </div>
        <br>
        <br>
        <br>
        <div class="row" style="margin-left: 20px;margin-right: 10px;">
            <% for (let i = 5;i<10;i++){%>
                <div class="col-sm-6 card d-flex flex-column mx-auto" style="width: 18rem;">
                    <img src=<%=images[i]%> class="card-img-top img-fluid rounded mx-auto d-block" alt="...">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title"><%=movie_names[i]%></h5>
                        <h5 class="card-subtitle mb-2 text-muted"><%=movie_lang[i]%></h5>
                        <h6 class="card-subtitle mb-2 text-muted"><%=movie_types[i]%></h6>
                        <p class="card-text"><%=movie_desc[i]%></p>
                        <p class="card-text lead">Release date : <%=movie_release_dates[i]%></p>
                        <p class="card-text"><strong>Runtime : <%=movie_length[i]%> minutes </strong></p>
                        <a href="/book_ticket?movie_id=<%=movie_ids[i]%>&user=<%=user%>" class="btn btn-primary mt-auto">Book Movie</a>
                    </div>
                </div>
            <% } %>
        </div>
    </body>