<%- include('static/head.ejs', { bot,user,path})  %>
<div class="row">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card bg-dark-200 border-left-primary shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            Approved Bots</div>
                        <div class="h5 mb-0 font-weight-bold text-white"><%= botdata.filter(x => x.status === "Approved").length %></div>
                    </div>
                    <div class="col-auto">
                        <i class="fal fa-robot fa-2x text-white"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card bg-dark-200 border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            UnApproved Bots</div>
                        <div class="h5 mb-0 font-weight-bold text-white"><%= botdata.filter(x => x.status === "UnApproved").length %></div>
                    </div>
                    <div class="col-auto">
                        <i class="fal fa-robot fa-2x text-white"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card bg-dark-200 border-left-info shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Codes</div>
                            <div class="h5 mb-0 font-weight-bold text-white"><%= codedata.length %></div>
                        </div>
                        <div class="col-auto">
                            <i class="fal fa-code fa-2x text-white"></i>
                        </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card bg-dark-200 border-left-warning shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Uptimes</div>
                        <div class="h5 mb-0 font-weight-bold text-white"><%= udata.length %></div>
                    </div>
                    <div class="col-auto">
                        <i class="fal fa-sync-alt fa-2x text-white"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card bg-dark-200 border-left-info shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Online <small>(momentary)</span></div>
                        <div class="h5 mb-0 font-weight-bold text-white"><a id="connectionCount"></a></div>
                    </div>
                    <div class="col-auto">
                        <i class="fal fa-users fa-2x text-white"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="content" class="main-content">
    <div class="layout-px-spacing">

        <div class="page-header">
            <nav class="breadcrumb-one" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0);">Bot List</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0);">Approved Bots</a></li>
                </ol>
            </nav>
        </div>
        
        <div class="row layout-top-spacing" id="cancel-row">
        
            <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                <div class="widget-content widget-content-area br-6">
                    <table id="default-ordering" class="table table-hover" style="width:100%">
                        <thead>
                            <tr>
                                <th>Country</th>
                                <th>Total viewers</th>
                                <th class="invisible"></th>
                                <th class="invisible"></th>
                                <th class="invisible"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <% 
                            if(siteD) {
                            if(siteD.country) {
                            Object.keys(siteD.country[0]).sort((a,b) => siteD.country[0][b] - siteD.country[0][a]).map(b => {
                            %>
                            <tr>
                                <td translate="no"><span style="display: flex; align-items: center;"><img src="https://www.countryflags.io/<%= b %>/flat/32.png">&nbsp;<%= b %></span></td>
          <td><span style="display: flex; align-items: center;"><%= siteD.country[0][b] %></span></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <% 
                            })
                            } 
                            } 
                            %>
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>Country</th>
                                <th>Total viewers</th>
                                <th class="invisible"></th>
                                <th class="invisible"></th>
                                <th class="invisible"></th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        <script>
            var urlParams = new URLSearchParams(window.location.search);
            if(urlParams.has('success') && urlParams.get('success')){
            Swal.fire({
             icon: 'success',
             title: 'Succesfull...',
             closeOnConfirm: false,
             text: urlParams.get('message'),
             footer: 'Copyright 2022 &copy electron.tk - All right reserved.'
            }).then((result) => {
          if (result.isConfirmed) {
            window.location.href = `/admin/approved`;
          }
        })
            }
            if(urlParams.has('error') && urlParams.get('error')){
            Swal.fire({
             icon: 'error',
             title: 'Oops...',
             text: urlParams.get('message'),
             footer: 'Copyright 2022 &copy electron.tk - All right reserved.'
            }).then((result) => {
          if (result.isConfirmed) {
            window.location.href = '/admin/approved';
          }    
        })
            }
           </script>
        </div></div>
        <%- include('static/foot.ejs', { bot,user,path}) %>
