<div class="row mb-3">
    <div class="col-12 col-md-4 col-lg-3">
            <div class="card mb-3">
                <div class="card-body py-2">
                    <div class="media">
                        <em class="fas fa-film fa-2x align-self-center mr-3 text-success"></em>
                        <div class="media-body">
                            <a href="{{ admin_dir }}/videos/list/">
                                <h4 class="m-0">{{ is_admin ? num_videos : num_user_videos }}</h4>
                            </a>
                            <small class="text-muted">Total Links</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-3">
                <div class="card-body py-2">
                    <div class="media">
                        <em class="fas fa-film fa-2x align-self-center mr-3 text-danger"></em>
                        <div class="media-body">
                            <a href="{{ admin_dir }}/videos/list/?status=1">
                                <h4 class="m-0">{{ is_admin ? num_broken_videos : num_user_broken_videos }}</h4>
                            </a>
                            <small class="text-muted">Broken Links</small>
                        </div>
                    </div>
                </div>
            </div>
        {% if is_admin %}
            <div class="card mb-3">
                <div class="card-body py-2">
                    <div class="media">
                        <em class="fas fa-server fa-2x align-self-center mr-3"></em>
                        <div class="media-body">
                            <a href="{{ admin_dir }}/settings/load-balancers/list/">
                                <h4 class="m-0">{{ num_servers }}</h4>
                            </a>
                            <small class="text-muted">Total Servers</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mb-3">
                <div class="card-body py-2">
                    <div class="media">
                        <em class="fab fa-google-drive fa-2x text-primary align-self-center mr-3"></em>
                        <div class="media-body">
                            <a href="{{ admin_dir }}/gdrive/list/">
                                <h4 class="m-0">{{ num_gdrive_accounts }}</h4>
                            </a>
                            <small class="text-muted">Google Drive Accounts</small>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="card mb-3">
            <div class="card-header p-2">
                <div class="d-flex align-items-center">
                    <h6 class="mb-0 flex-grow-1">Videos Status</h6>
                    <button class="btn btn-outline-secondary btn-sm" onclick="dashboard.chart.videoStatus('.video-status')" data-toggle="tooltip" title="Reload">
                        <em class="fas fa-sync-alt"></em>
                    </button>
                </div>
            </div>
            <div class="card-body p-2">
                <div class="video-status mx-auto text-center">
                    <em class="fas fa-spin fa-sync-alt text-primary" style="font-size:50px"></em>
                    <div class="chart"></div>
                </div>
            </div>
        </div>
        {% if is_admin %}
            <div class="card mb-3">
                <div class="card-header p-2">
                    <div class="d-flex align-items-center">
                        <h6 class="mb-0 flex-grow-1">Servers Usage</h6>
                        <button class="btn btn-outline-secondary btn-sm" onclick="dashboard.chart.serverStatus('.server-status')" data-toggle="tooltip" title="Reload">
                            <em class="fas fa-sync-alt"></em>
                        </button>
                    </div>
                </div>
                <div class="card-body p-2">
                    <div class="server-status mx-auto text-center">
                        <em class="fas fa-spin fa-sync-alt text-primary" style="font-size:50px"></em>
                        <div class="chart"></div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
    <div class="col-12 col-md-8 col-lg-9">
        <div class="card mb-3">
            <div class="card-header p-2 border-0">
                <div class="d-flex align-items-center">
                    <h6 class="mb-0 flex-grow-1">Popular Videos</h6>
                    <button class="btn btn-outline-secondary btn-sm" onclick="$('#tbPopularVideos').DataTable().ajax.reload(null, false)" data-toggle="tooltip" title="Reload">
                        <em class="fas fa-sync-alt"></em>
                    </button>
                </div>
            </div>
            <div class="card-body p-0">
                <table id="tbPopularVideos" class="table table-striped table-hover table-sm m-0" style="width:100%" aria-label="Popular Videos">
                    <thead>
                        <tr>
                            <th scope="col" style="max-width:300px!important">Title</th>
                            <th scope="col">Sources</th>
                            <th scope="col">Views</th>
                            <th scope="col">User</th>
                            <th scope="col" style="min-width:145px!important">Added</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th scope="col" style="max-width:300px!important">Title</th>
                            <th scope="col">Sources</th>
                            <th scope="col">Views</th>
                            <th scope="col">User</th>
                            <th scope="col" style="min-width:145px!important">Added</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="card">
            <div class="card-header p-2 border-0">
                <div class="d-flex align-items-center">
                    <h6 class="mb-0 flex-grow-1">Recently Added Videos</h6>
                    <button class="btn btn-outline-secondary btn-sm" onclick="$('#tbRecentVideos').DataTable().ajax.reload(null, false)" data-toggle="tooltip" title="Reload">
                        <em class="fas fa-sync-alt"></em>
                    </button>
                </div>
            </div>
            <div class="card-body p-0">
                <table id="tbRecentVideos" class="table table-striped table-hover table-sm m-0" style="width:100%" aria-label="Recently Added Videos">
                    <thead>
                        <tr>
                            <th scope="col" style="max-width:300px!important">Title</th>
                            <th scope="col">Sources</th>
                            <th scope="col">Views</th>
                            <th scope="col">User</th>
                            <th scope="col" style="min-width:145px!important">Added</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th scope="col" style="max-width:300px!important">Title</th>
                            <th scope="col">Sources</th>
                            <th scope="col">Views</th>
                            <th scope="col">User</th>
                            <th scope="col" style="min-width:145px!important">Added</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header p-2">
                <div class="d-flex align-items-center">
                    <h6 class="mb-0 flex-grow-1">Statistics</h6>
                    <button class="btn btn-outline-secondary btn-sm" onclick="dashboard.chart.views.load($('#views input[name=options]:checked').val())" data-toggle="tooltip" title="Reload">
                        <em class="fas fa-sync-alt"></em>
                    </button>
                </div>
            </div>
            <div class="card-body p-2">
                <div id="views" class="mx-auto text-center">
                    <div class="toolbar mb-3">
                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                            <label class="btn btn-outline-custom btn-sm">
                                <input type="radio" name="options" value="last_year"> Last Year
                            </label>
                            <label class="btn btn-outline-custom btn-sm active">
                                <input type="radio" name="options" value="seven_days" checked> 7 Days
                            </label>
                            <label class="btn btn-outline-custom btn-sm">
                                <input type="radio" name="options" value="one_month"> 1 Month
                            </label>
                            <label class="btn btn-outline-custom btn-sm">
                                <input type="radio" name="options" value="six_months"> 6 Months
                            </label>
                            <label class="btn btn-outline-custom btn-sm">
                                <input type="radio" name="options" value="this_year"> This Year
                            </label>
                        </div>
                    </div>
                    <em class="fas fa-spin fa-sync-alt text-primary mb-3" style="font-size:50px"></em>
                    <div class="chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modalExtApps" tabindex="-1" role="dialog" aria-labelledby="modalExtAppsLabel" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalExtAppsLabel">Support Checker</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 rounded-0">You have to enable the php functions and install the following php extensions and applications for the GDPlayer tool to work perfectly.</div>
                <table class="table-sm" style="width:100%" aria-label="PHP Functions, Extensions, Applications">
                    <tbody>
                        <tr>
                            <th scope="col" colspan="2" class="text-center bg-custom text-white">PHP Functions</th>
                        </tr>
                        <tr>
                            <th scope="col">curl</th>
                            <td><span id="php_curl"><em class="fas fa-times-circle text-danger"></em> Disabled</span></td>
                        </tr>
                        <tr>
                            <th scope="col">shell_exec</th>
                            <td><span id="php_shell_exec"><em class="fas fa-times-circle text-danger"></em> Disabled</span></td>
                        </tr>
                        <tr>
                            <th scope="col">popen <small class="form-text text-muted">Used by Google Chrome</small></th>
                            <td><span id="php_popen"><em class="fas fa-times-circle text-danger"></em> Disabled</span></td>
                        </tr>
                        <tr>
                            <th scope="col">proc_open <small class="form-text text-muted">Used by Google Chrome</small></th>
                            <td><span id="php_proc_open"><em class="fas fa-times-circle text-danger"></em> Disabled</span></td>
                        </tr>
                        <tr>
                            <th scope="col">proc_get_status <small class="form-text text-muted">Used by Google Chrome</small></th>
                            <td><span id="php_proc_get_status"><em class="fas fa-times-circle text-danger"></em> Disabled</span></td>
                        </tr>
                        <tr>
                            <th scope="col">proc_close <small class="form-text text-muted">Used by Google Chrome</small></th>
                            <td><span id="php_proc_close"><em class="fas fa-times-circle text-danger"></em> Disabled</span></td>
                        </tr>
                        <tr>
                            <th scope="col" colspan="2" class="text-center bg-primary text-white">PHP Extensions</th>
                        </tr>
                        <tr>
                            <th scope="col">fileinfo</th>
                            <td><span id="php_fileinfo"><em class="fas fa-times-circle text-danger"></em> Disabled</span></td>
                        </tr>
                        <tr>
                            <th scope="col">gd/gd2 <small class="form-text text-muted">Especially for php 8+</small></th>
                            <td><span id="php_gd"><em class="fas fa-times-circle text-danger"></em> Disabled</span></td>
                        </tr>
                        <tr>
                            <th scope="col">sockets <small class="form-text text-muted">Used by Google Chrome</small></th>
                            <td><span id="php_sockets"><em class="fas fa-times-circle text-danger"></em> Disabled</span></td>
                        </tr>
                        <tr>
                            <th scope="col" colspan="2" class="text-center bg-danger text-white">Applications</th>
                        </tr>
                        <tr>
                            <th scope="col">Google Chrome / Chromium<br><a href="https://linuxize.com/tags/chrome/" target="_blank" rel="noopener">Install Now</a></th>
                            <td><span id="php_chrome"><em class="fas fa-times-circle text-danger"></em> Disabled</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="dashboard.supportChecker()">Re-check</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
