<!DOCTYPE html>
<html lang="en">
    <head>
        <%- include("./header/mainheader", { title: "YouTube Dislikes" }); -%>
    </head>
    <body>
        <%- include("./navbar/navbar", { page: "/channel", optimized }); -%>
        <div class="container">
            <br>
            <form action="/" method="POST">
                <h1>Select videos on your channel to add this plugin to.</h1>

                <input type="checkbox" name="ref" value="/channel" checked hidden>
                <button class="btn btn-primary" type="submit">Update</button>
                <button class="btn btn-primary" name="refreshVideos" value="true" type="submit">Refresh Videos</button>

                <br>
                <br>
                
                <div class="row">
                    <% videos.forEach(x => { %>
                        <div class="col-sm-6">
                            <div class="card" style="width: 18rem;" style="width: 30% !important">
                                <img src="<%= x.snippet.thumbnails.default.url %>" class="card-img-top">
                                <div class="card-body">
                                    <h5 class="card-title"><a href="https://youtu.be/<%= x.id.videoId %>" target="_blank"><%= x.snippet.title.replace(/\[ðŸ‘� \d* ðŸ‘Ž \d*\]/g, "") %></a><%- database.indexOf(x.id.videoId) != -1 ? "<i class='bi bi-check2' title='Video managed by plugin'></i>" : "" %></h5>
                                    <p class="card-text"><%= x.snippet.description.length > 100 ? x.snippet.description.substr(0, 100) + "..." : x.snippet.description %></p>
                                    <!-- <button class="btn btn-<%= database.indexOf(x.id.videoId) == -1 ? "success" : "danger" %>" name="<%= database.indexOf(x.id.videoId) == -1 ? "add" : "rem" %>Video" value="<%= x.id.videoId %>"><%= database.indexOf(x.id.videoId) == -1 ? "Add to" : "Remove from" %> plugin</button> -->
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="<%= database.indexOf(x.id.videoId) == -1 ? "add" : "rem" %>Video" value="<%= x.id.videoId %>" id="<%= x.id.videoId %>">
                                        <label class="form-check-label" for="<%= x.id.videoId %>">
                                            <%= database.indexOf(x.id.videoId) == -1 ? "Add to" : "Remove from" %> plugin
                                        </label>
                                    </div>
                                    <i class="bi bi-hand-thumbs-up-fill"><%= stats[x.id.videoId].statistics.likeCount %></i>
                                    <i class="bi bi-hand-thumbs-down-fill"><%= stats[x.id.videoId].statistics.dislikeCount %></i>
                                </div>
                            </div>
                        </div>
                    <% }); %>
                </div>
            </form>
        </div>
    </body>
</html>