<title><%- lang.Shinobi %></title>
<%
    var forceUrlPrefix
    var urlPrefix = ``
    var targetPort = config.ssl && config.ssl.port && protocol === 'https' ? config.ssl.port : config.port
    var addonsEnabled = {}
    var rawAddonList = decodeURI(data.addon || '').split('|');
    rawAddonList.forEach(function(piece){
        var pieceParts = piece.split('=');
        var key = pieceParts[0];
        var value = pieceParts[1] || true;
        addonsEnabled[key] = value;
    });
    function getAddon(addonTag){
        return addonsEnabled[addonTag];
    }
    var streamWidth = parseInt(getAddon('width')) || 640
    var streamHeight = parseInt(getAddon('height')) || 480
    var hasGUI = getAddon('gui')
    var isFullscreen = getAddon('fullscreen')
    var isRelativeUrl = getAddon('relative')
    if(forceUrlPrefix){
        urlPrefix = forceUrlPrefix
    }else if(isRelativeUrl){
        urlPrefix = ''
    }else if(config.baseURL){
        urlPrefix = config.baseURL
    }else if(!targetPort || targetPort === '' || targetPort == 80 || targetPort == 443){
        urlPrefix = baseUrl
    }else{
        urlPrefix = `${baseUrl}:${targetPort}`
    }
    if(urlPrefix.endsWith('/') === false){
        urlPrefix += '/'
    }
    var originalURL = `${urlPrefix}`
%>
<%- include('blocks/header-favicon') %>
<script>window.lang=<%- JSON.stringify(lang) %>;</script>
<script>window.$user=<%- JSON.stringify($user) %>;</script>
<script>window.monitor=<%- JSON.stringify(monitor) %>;</script>
<script>window.urlPrefix = "<%- urlPrefix || '' %>";</script>
<script>window.groupKey = "<%- groupKey || '' %>";</script>
<script>window.monitorId = "<%- monitorId || '' %>";</script>
<script>window.authKey = "<%- $user.auth_token || '' %>";</script>
<script>window.serverTimezone = `<%- config.timezone %>`</script>
<!-- <script src="<%- urlPrefix %>assets/vendor/js/socket.io.min.js"></script> -->
<script src="<%- urlPrefix %>assets/vendor/js/jquery.min.js"></script>
<link rel="stylesheet" href="<%- urlPrefix %>assets/vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<%- urlPrefix %>assets/vendor/bootstrap5/css/bootstrap.min.css">
<link rel="stylesheet" href="<%- urlPrefix %>assets/css/bs5.alarms.popup.css">
<link rel="stylesheet" href="<%- urlPrefix %>assets/vendor/jquery-ui.min.css">
<link rel="stylesheet" href="<%- urlPrefix %>assets/vendor/pnotify.custom.min.css">
<div id="alarm-container" class="container-fluid min-vh-100 d-flex flex-column">
    <div class="row flex-grow-1">
        <div id="alarm-live-stream" class="col-6 p-0"></div>
        <div id="alarm-live-stream-ptz" class="col-6 p-0"></div>
    </div>
    <div class="row flex-grow-1">
        <div id="alarm-video" class="col-6 p-0 text-center">
            <i class="fa-5x fa fa-spinner fa-pulse text-white" style="margin-top:50px"></i>
        </div>
        <div class="col-6 text-center p-3">
            <div class="card bg-dark">
                <div id="alarm-title" class="card-header text-white"></div>
                <form id="alarm-update-form" class="card-body m-0">
                    <div class="form-group mb-3">
                        <input id="alarm-name" class="form-control" placeholder="<%- lang.Name %>">
                    </div>
                    <div class="form-group mb-3">
                        <textarea id="alarm-notes" class="form-control" placeholder="<%- lang.Notes %>"></textarea>
                    </div>
                    <div class="form-group mb-3">
                        <select id="alarm-status" class="form-control">
                            <%-
                            [
                                { id: 0, label: lang.Attention,    color: 'danger'   },
                                { id: 1, label: lang.Acknowledged, color: 'info'     },
                                { id: 2, label: lang.InProgress,   color: 'warning'  },
                                { id: 3, label: lang.Resolved,     color: 'success'  },
                                { id: 4, label: lang.Cleared,      color: 'light'    },
                                { id: 5, label: lang.Dismissed,    color: 'secondary'},
                                { id: 6, label: lang.Verified,     color: 'primary'  },
                                { id: 7, label: lang.Escalated,    color: 'danger'   },
                                { id: 8, label: lang.FalseAlarm,   color: 'dark'     },
                            ].map(item => `<option value="${item.id}">${item.label}</option>`).join('')
                             %>
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <a class="btn d-block btn-success submit">
                            <%- lang.Save %>
                        </a>
                    </div>
                    <div class="dropup d-block">
                        <a class="btn d-block btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
                            <%- lang.Videos %>
                        </a>
                        <ul id="alarm-videos" class="dropdown-menu shadow-lg"></ul>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="<%- urlPrefix %>assets/js/bs5.embed.utils.js"></script>
<script src="<%- urlPrefix %>assets/vendor/js/socket.io.min.js"></script>
<script src="<%- urlPrefix %>assets/vendor/bootstrap5/js/bootstrap.bundle.min.js"></script>
<script src="<%- urlPrefix %>assets/vendor/moment-with-locales.js"></script>
<script src="<%- urlPrefix %>assets/vendor/js/pnotify.custom.min.js"></script>
<script src="<%- urlPrefix %>assets/vendor/js/jquery-ui.min.js"></script>
<script src="<%- urlPrefix %>assets/js/bs5.extenders.js"></script>
<script src="<%- urlPrefix %>assets/js/bs5.websocket.js"></script>
<script src="<%- urlPrefix %>assets/js/bs5.videos.js"></script>
<script src="<%- urlPrefix %>assets/js/bs5.alarms.popup.gamepad.js"></script>
<script src="<%- urlPrefix %>assets/js/bs5.alarms.popup.js"></script>
