jrtechs-HomeBrewPlex/html/videos.html

<h1 class="text-center">Videos</h1>
<input id="videoFilter" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<br>

<div class="row">
    {for video in private}
    <div class="col-md-3 videoElement p-2">
        <div class="card">
            <div class="card-header">
                <h4>{video.name}</h4>
            </div>
            <div class="card-body w-100">
                <a href="/watch?v={video.name}" class="" role="button" aria-pressed="true">
                    <img src="/icon?v={video.name}" alt="Icon for {video.name}" width=100%/>
                </a>
            </div>
        </div>
    </div>
    {/for}
    {for video in public}
    <div class="col-md-3 videoElement">
        <div class="card">
            <div class="card-header">
                <h4>{video.name}</h4>
            </div>
            <div class="card-body">
                <a href="/watch?v={video.name}" class="" role="button" aria-pressed="true">
                    <img src="/icon?v={video.name}" alt="Icon for {video.name}" width=100%/>
                </a>
            </div>
        </div>
    </div>
    {/for}
</div>


<script>
    function filterTable()
    {
        var input = $("input#videoFilter").val().toLowerCase();

        $(".videoElement").css({"display": "none"});

        $(".videoElement").each(function(index)
        {
            if($(this).text().toLowerCase().includes(input))
            {
                $(this).toggle(true);
                //$(this).css({"display": "none"});
            }
        });

        if(input.toString().split(" ").join("") === "")
        {
            $(".videoElement").toggle(true);
        }
    }

    $(document).ready(function()
    {
        $("input#videoFilter").bind("keyup", filterTable);
    });
</script>