<div class="row">
    <div class="col-12">
        <h1 class="h4 mb-3">{{ title }}</h1>
        <div id="toolbar" class="d-flex flex-wrap mb-3 toolbar">
            <a href="{{ admin_dir }}/videos/new/" class="btn btn-success btn-sm">
                <em class="fas fa-plus-circle mr-2"></em>Add New
            </a>
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#mdVideosBulkLink">
                <em class="fas fa-plus-square mr-2"></em>Add Bulk Videos
            </button>
            <button id="btnDelete" type="button" class="btn btn-danger btn-sm btn-hidden d-none" onclick="videos.delete.multi($(this))">
                <em class="fas fa-trash-alt mr-2"></em>Delete
            </button>
            <button id="btnChecker" type="button" class="btn btn-warning btn-sm btn-hidden d-none" onclick="videos.checker.multi($(this))">
                <em class="fas fa-check-circle mr-2"></em>Video Checker
            </button>
            <button id="btnClear" type="button" class="btn btn-secondary btn-sm btn-hidden d-none" onclick="videos.cache.clear.multi($(this))">
                <em class="fas fa-eraser mr-2"></em>Clear Cache
            </button>
            <button type="button" class="btn btn-info btn-sm" onclick="videos.reload()">
                <em class="fas fa-sync-alt mr-2"></em>Reload
            </button>
            <div class="dropdown">
                <button class="btn btn-custom btn-sm dropdown-toggle" type="button" id="dropdownStatus" data-toggle="dropdown" aria-expanded="false">
                    <em class="fas fa-eye mr-2"></em>Status
                </button>
                <div class="dropdown-menu dropdown-menu-right shadow border-0" aria-labelledby="dropdownStatus">
                    <a class="dropdown-item" href="{{ admin_dir }}/videos/list/">
                        <em class="fas fa-sync-alt mr-2"></em>All
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="{{ admin_dir }}/videos/list/?status=0">
                        <em class="fas fa-check-circle text-success mr-2"></em>Good
                    </a>
                    <a class="dropdown-item" href="{{ admin_dir }}/videos/list/?status=2">
                        <em class="fas fa-exclamation-circle text-warning mr-2"></em>Warning
                    </a>
                    <a class="dropdown-item" href="{{ admin_dir }}/videos/list/?status=1">
                        <em class="fas fa-times-circle text-danger mr-2"></em>Broken
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="{{ admin_dir }}/videos/list/?dmca=1">
                        <em class="fas fa-ban text-danger mr-2"></em>DMCA Takedown
                    </a>
                </div>
            </div>
        </div>
		<div class="d-flex flex-column mb-3 toolbar">
			<div class="custom-control custom-switch">
				<input type="checkbox" class="custom-control-input" id="shThumbnail" value="true" onchange="videos.showHideThumbnail($(this).prop('checked'))">
				<label class="custom-control-label" for="shThumbnail">Thumbnail Mode</label>
			</div>
		</div>
        <table id="tbVideos" aria-label="Videos" class="table table-striped table-bordered table-hover table-sm" style="width:100%">
            <thead>
                <tr>
                    <th scope="col" style="max-width:36px!important">
                        <div class="custom-control custom-checkbox mx-auto">
                            <input type="checkbox" class="custom-control-input" id="ckAllVideos">
                            <label class="custom-control-label" for="ckAllVideos"></label>
                        </div>
                    </th>
                    <th scope="col">Title</th>
                    <th scope="col">Sources</th>
                    <th scope="col">Status</th>
                    <th scope="col"><span data-toggle="tooltip" title="DMCA Takedown">Takedown</span></th>
                    <th scope="col">Subtitles</th>
                    <th scope="col">Views</th>
                    <th scope="col">User</th>
                    <th scope="col">Added</th>
                    <th scope="col">Updated</th>
                    <th scope="col">Actions</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th scope="col" style="max-width:36px!important">
                        <div class="custom-control custom-checkbox mx-auto">
                            <input type="checkbox" class="custom-control-input" id="ckAllVideos1">
                            <label class="custom-control-label" for="ckAllVideos1"></label>
                        </div>
                    </th>
                    <th scope="col">Title</th>
                    <th scope="col">Sources</th>
                    <th scope="col">Status</th>
                    <th scope="col"><span data-toggle="tooltip" title="DMCA Takedown">Takedown</span></th>
                    <th scope="col">Subtitles</th>
                    <th scope="col">Views</th>
                    <th scope="col">User</th>
                    <th scope="col">Added</th>
                    <th scope="col">Updated</th>
                    <th scope="col">Actions</th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>
<div class="modal fade" id="mdVideosBulkLink" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="mdVideosBulkLinkLabel">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="mdVideosBulkLinkLabel">Add Bulk Videos</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning mb-3">You can insert <strong>unlimited video links</strong> here but there will be a <strong>2 second delay</strong> for each link.</div>
                <form id="frmBulkVideo">
                    <div class="form-group">
                        <textarea name="links" id="links" cols="30" rows="8" class="form-control" placeholder="Insert video URL per line" required></textarea>
                    </div>
                    <div class="form-group mb-0">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="useTitleAsSlug" name="useTitleAsSlug">
                            <label class="custom-control-label" for="useTitleAsSlug">Use Title As Slug</label>
                        </div>
                        <small class="form-text text-muted">If the url slug exists or the title exist/empty then the url slug will be generated randomly.</small>
                    </div>
                </form>
                <table id="tbBulkVideos" class="table table-striped table-bordered table-hover table-sm m-0" style="width:100%" aria-describedby="Video List">
                    <thead>
                        <tr>
                            <th scope="col" class="text-center">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="ckAllBulkVideos">
                                    <label class="custom-control-label" for="ckAllBulkVideos"></label>
                                </div>
                            </th>
                            <th scope="col">Title</th>
                            <th scope="col" class="text-center">Status</th>
                            <th scope="col" class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <th scope="col" class="text-center">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="ckAllBulkVideos1">
                                    <label class="custom-control-label" for="ckAllBulkVideos1"></label>
                                </div>
                            </th>
                            <th scope="col">Title</th>
                            <th scope="col" class="text-center">Status</th>
                            <th scope="col" class="text-center">Actions</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" id="btnGetEmbedURLs" onclick="videos.bulk.get_embed()" class="btn btn-primary" disabled>Get Embed URLs</button>
                <button type="button" id="btnBulkSave" onclick="videos.bulk.save($(this))" class="btn btn-success" disabled>
                    <em class="fas fa-save mr-2"></em>Save
                </button>
                <button type="reset" class="btn btn-danger" data-dismiss="modal">
                    <em class="fas fa-times mr-2"></em>Close
                </button>
            </div>
        </div>
    </div>
</div>
