<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="images/video.svg">
    <title>NeptunE YouTube Downloader</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
</head>
<body class="d-flex flex-column min-vh-100">
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-download mr-2"></i>NeptunE
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="https://github.com/minnukota381" target="_blank"><i class="fab fa-github"></i> GitHub</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="flex-grow-1">
        <div class="container my-5">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="card main-card">
                        <div class="card-body">
                            <h1 class="card-title text-center mb-4">YouTube Video Downloader</h1>
                            <form action="/search" method="get" class="search-form mb-4">
                                <div class="input-group">
                                    <input type="text" name="url" class="form-control" placeholder="Enter YouTube video URL" required>
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-primary"><i class="fas fa-search mr-2"></i>Search</button>
                                    </div>
                                </div>
                            </form>
                            
                            <% if (typeof error !== 'undefined') { %>
                                <div class="alert alert-danger" role="alert">
                                    <i class="fas fa-exclamation-triangle mr-2"></i><%= error %>
                                </div>
                            <% } %>

                            <% if (typeof videoInfo !== 'undefined') { %>
                                <div class="video-info">
                                    <h2 class="mb-3"><%= videoInfo.title %></h2>
                                    <div class="embed-responsive embed-responsive-16by9 mb-3">
                                        <img src="<%= videoInfo.thumbnail %>" alt="Video Thumbnail" class="embed-responsive-item">
                                    </div>
                                    <p class="mb-4"><i class="far fa-clock mr-2"></i>Duration: <%= videoInfo.duration %></p>
                                    <h3 class="mb-3">Available Formats:</h3>
                                    <div class="list-group">
                                        <% videoInfo.formats.forEach(format => { %>
                                            <a href="/download?format=<%= format.itag %>&url=<%= encodeURIComponent(videoInfo.url) %>" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                                <span>
                                                    <i class="fas fa-file-video mr-2"></i>
                                                    <%= format.qualityLabel %> - <%= format.container %>
                                                </span>
                                                <span class="badge badge-primary badge-pill">Download</span>
                                            </a>
                                        <% }); %>
                                    </div>
                                </div>
                            <% } %>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="footer mt-auto py-3">
        <div class="container text-center">
            <span class="footer-text">Nep-YTDL &copy; 2024 | Made with <i class="fas fa-heart text-danger"></i> by NeptunE</span>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>