<% const p2pServerList = config.p2pServerList || {}
    const selectedServer = p2pServerList[config.p2pHostSelected]
 %>
 <style>
     .epic-text-filter {
         text-transform: none;
        letter-spacing: 0.5pt;
        font-size: 9pt;
     }
     blockquote {
         background: #073c3e;
        height: 100%;
        border-radius: 15px;
        color: #fff;
        padding: 10px;
        font-style: italic;
        box-shadow: 0 0 5px #19ce11;
     }
 </style>
 <script>
     window.p2pServerList = <%- JSON.stringify(p2pServerList) %>
     window.useBetterP2P = <%- !!config.useBetterP2P %>
     window.currentlySelectedP2PServerId = `<%- config.p2pHostSelected %>`
 </script>
<link rel="stylesheet" href="<%-window.libURL%>assets/css/super.easyRemoteAccess.css">
<form>
    <div class="row" style="display:flex">
        <div class="col-md-6">
            <div class="card bg-dark text-white mb-4">
                <div class="card-header">
                    <%- lang['Easy Remote Access (P2P)'] %>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <select class="form-control py-0 btn btn-dark text-left text-white" type="email" name="p2pEnabled">
                            <option <% if(config.p2pEnabled === true){ %>selected<% } %> value="1"><%- lang.On %></option>
                            <option <% if(config.p2pEnabled !== true){ %>selected<% } %> value="0"><%- lang.Off %></option>
                        </select>
                    </div>
                    <div class="form-group p2p-toggle-affected">
                        <input placeholder="<%-lang['P2P API Key']%>" class="form-control btn btn-dark text-left text-white" type="text" name="p2pApiKey" value="<%- config.p2pApiKey %>">
                    </div>
                    <div class="form-group p2p-toggle-affected">
                        <div class="btn-group d-flex flex-row">
                            <a target="_blank" href="#" class="flex-grow-1 btn btn-default remote-dashboard-link-copy"><i class="fa fa-copy"></i> <%- lang['Copy Remote Link'] %></a>
                            <a target="_blank" href="#" class="flex-grow-1 btn btn-info remote-dashboard-link" target="_blank"><i class="fa fa-external-link"></i> <%- lang['Open Remote Dashboard'] %></a>
                        </div>
                    </div>
                    <div class="btn-group d-flex flex-row">
                        <a href="#" class="submit flex-grow-1 btn btn-success"><i class="fa fa-check"></i> <%- lang.Save %></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card bg-dark text-white  mb-4">
                <div class="card-header">
                    <%- lang['How to Connect'] %>
                </div>
                <div class="card-body">
                    <p><%- lang['HowToConnectDes1'] %></p>
                    <p><%- lang['HowToConnectDes2'] %></p>
                    <p class="mb-0"><a class="btn btn-sm btn-info" href="https://hub.shinobi.video/articles/view/3Yhivc6djTtuBPE" target="_blank"><%- lang['How to Connect'] %></a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="row p2p-toggle-affected" id="p2pServerList">
        <% Object.keys(p2pServerList).forEach((key) => {
            const details = p2pServerList[key]
            if(config.useBetterP2P && !details.v2)return;
            if(!config.useBetterP2P && details.v2)return;
        %>
            <div class="col-md-4">
                <div class="card bg-dark cursor-pointer text-white mb-4 <% if(config.p2pHostSelected === key){ %>active<% } %>" drawn-id="<%- key %>">
                    <div class="card-header" style="min-height:auto">
                        <span class="badge badge-sm badge-danger pull-right selected-badge"><%- lang.Selected %></span>
                        <span class="badge badge-sm badge-info name-badge"><%- details.name.toUpperCase() %></span>
                    </div>
                    <div style="min-height:auto">
                        <div title="Host Address" class="d-flex flex-row text-center">
                            <div class="flex-grow-1"><span class="info-badge badge badge-sm badge-default"><%- details.host %></span></div>
                        </div>
                        <div class="d-flex flex-row align-items-center">
                            <div><i class="fa fa-download"></i></div>
                            <div class="flex-grow-1 text-left epic-text epic-text-filter"><%- lang['Download Bandwidth'] %></div>
                            <div class="text-right">
                                <span class="info-badge badge badge-sm badge-default"><span class="networkUseDown"><i class="fa fa-spinner fa-pulse"></i></span> / <%- details.maxNetworkSpeed.down %></span>
                            </div>
                        </div>
                        <div class="d-flex flex-row align-items-center">
                            <div><i class="fa fa-upload"></i></div>
                            <div class="flex-grow-1 text-left epic-text epic-text-filter"><%- lang['Upload Bandwidth'] %></div>
                            <div class="text-right">
                                <span class="info-badge badge badge-sm badge-default"><span class="networkUseUp"><i class="fa fa-spinner fa-pulse"></i></span> / <%- details.maxNetworkSpeed.up %></span>
                            </div>
                        </div>
                        <div title="CPU Usage" class="d-flex flex-row align-items-center">
                            <div><i class="fa fa-cubes"></i></div>
                            <div class="flex-grow-1 align-items-center text-left epic-text epic-text-filter"><span class="cpuCores"></span> <%- lang.Threads %></div>
                            <div class="text-right"><span class="info-badge badge badge-sm badge-default"><span class="cpuUsage"><i class="fa fa-spinner fa-pulse"></i></span>%</span></div>
                        </div>
                        <div title="RAM Usage" class="d-flex flex-row align-items-center">
                            <div><i class="fa fa-tasks"></i></div>
                            <div class="flex-grow-1 text-left epic-text epic-text-filter"><span class="ramTotal"><i class="fa fa-spinner fa-pulse"></i></span> <%- lang.RAM %></div>
                            <div class="text-right"><span class="info-badge badge badge-sm badge-default"><span class="ramPercent"><i class="fa fa-spinner fa-pulse"></i></span>%, <span class="ramUsed"><i class="fa fa-spinner fa-pulse"></i></span> MB</span></div>
                        </div>
                    </div>
                    <div class="card-footer" style="min-height:auto">
                        <a class="btn badge badge-sm badge-warning geo-badge" target="_blank" href="<%- `https://www.google.ca/maps/@${details.location.lat},${details.location.lon},15z` %>"><i class="fa fa-map-marker"></i> <%- details.location.lat %>, <%- details.location.lon %></a>
                    </div>
                </div>
            </div>
        <% }) %>
    </div>
    <div class="form-group p2p-toggle-affected">
        <div class="btn-group d-flex flex-row">
            <a target="_blank" href="#" class="flex-grow-1 btn btn-info remote-dashboard-link" target="_blank"><i class="fa fa-external-link"></i> <%- lang['Open Remote Dashboard'] %></a>
            <a href="#" class="submit flex-grow-1 btn btn-success"><i class="fa fa-check"></i> <%- lang.Save %></a>
        </div>
    </div>
</form>
<script src="<%-window.libURL%>assets/js/super.easyRemoteAccess.js" type="text/javascript"></script>
