<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Movie Search</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    </head>
    <body>
        <div class="container my-5">
            <h1>Movie Search</h1>
            <div id="loginArea">
                <form id="login">
                    <div class="mb-3">
                        <label for="token" class="form-label">Access Token</label>
                        <input class="form-control" id="token">
                    </div>
                    <button class="btn btn-primary" type="submit">Login</button>
                </form>
            </div>
            <div id="searchArea">
                <form id="movieSearch" class="mb-3">
                    <div class="input-group mb-3">
                      <input class="form-control">
                      <button class="btn btn-primary" type="submit">Search</button>
                    </div>
                </form>
                <div class="mb-3">
                    <a class="btn btn-primary" href="javascript:localStorage.clear(); location.reload();">
                        Logout
                    </a>
                </div>
                <table id="output" class="table">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Poster</th>
                            <th scope="col">Name</th>
                            <th scope="col">Rating</th>
                            <th scope="col">Description</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
        <script src="./main.js"></script>
    </body>
</html>