| <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> |