<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>M/Monit Reports | Events | Details</title>
    <meta name="theme-color" content="#3D3E40">
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="M/Monit" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <link rel="apple-touch-icon" href="../../img/apple-touch-icon.png"/>
    <script src="../../lib/js/appearance.js"></script>
    <link rel="manifest" href="../../img/manifest.webmanifest">
    <link rel="stylesheet" href="../../lib/css/styles.css?version=430">
</head>
<body>
    <div id="wrap">
        <div id="fixed-header">
            <div id="fake-status-bar"></div>
            <div id="header">
                <div id="nav">
                    <a id="logo" target="webapp" href="../../"></a>
                    <a id="logout" title="Logout" target="webapp" href="../../login/logout.csp"></a>
                    <ul id="menu">
                        <li>
                            <a target="webapp" href="../../index.csp">Dashboard</a>
                        </li>
                        <li>
                            <a target="webapp" href="../../status/hosts/">Status</a>
                        </li>
                        <li class="active">
                            <a target="webapp" href="../../reports/analytics/">Reports</a>
                            <ul>
                                <li><a target="webapp" href="../../reports/analytics/">Analytics</a></li>
                                <li><a target="webapp" href="../../reports/uptime/">Uptime</a></li>
                                <li><a target="webapp" href="../../reports/events/">Events</a></li>
                            </ul>
                        </li>
                        <li>
                            <?cs if:#Request.Param.IsAdmin ?>
                            <a target="webapp" href="../../admin/general/">Admin</a>
                            <ul>
                                <li><a target="webapp" href="../../admin/general/">General</a></li>
                                <li><a target="webapp" href="../../admin/hosts/">Hosts</a></li>
                                <li><a target="webapp" href="../../admin/groups/">Groups</a></li>
                                <li><a target="webapp" href="../../admin/users/">Users</a></li>
                                <li><a target="webapp" href="../../admin/roles/">Roles</a></li>
                                <li><a target="webapp" href="../../admin/alerts/">Alerts</a></li>
                                <li><a target="webapp" href="../../admin/settings/">Settings</a></li>
                            </ul>
                            <?cs else ?>
                            <a target="webapp" href="../../admin/users/edit?id=<?cs var:Request.Param.RemoteUserId ?>"><span>Profile</span></a>
                            <?cs /if ?>
                        </li>
                        <li id="logout-phone"><a target="webapp" href="../../login/logout.csp">Logout</a></li>
                    </ul>
                </div> <!-- nav -->
            </div><!-- header -->
        </div><!-- fixed-header -->
        <div id="main">
            <ul class="breadcrumb">
                <li><a href=".">Events</a> <span class="divider">/</span></li>
                <li class="active">Details</li>
            </ul>
            <div id="title">
                <h1>Event details</h1>
            </div>
            <div class="row-fluid">
                <div class="span8">
                    <ul class="tableView">
                        <li>Date <span class="accessory" data-bind="text: date"></span></li>
                        <li>Host <span class="accessory"><a data-bind="text: host, attr: { href: hosturl}"></a></span></li>
                        <li>Service name <span class="accessory" data-bind="text: servicename"></span></li>
                        <li>Service type <span class="accessory" data-bind="text: servicetype"></span></li>
                        <li>Event <span class="accessory" data-bind="text: event"></span></li>
                        <li>Action <span class="accessory" data-bind="text: action"></span></li>
                    </ul>
                    <h3>Message</h3>
                    <ul class="tableView">
                        <li>
                            <span class="text" data-bind="text: message, css: eventstateColor"></span>
                        </li>
                    </ul>
                    <h3>Comments</h3>
                    <div class="notes" data-bind="visible: notes().length">
                        <ul class="bottom tableView" data-bind="foreach: notes">
                            <li>
                                <span class="text accessory-color" data-bind="text: date + ' by ' + uname + ':'"></span>
                                <span class="text light-grey" data-bind="text: message"></span>
                            </li>
                        </ul>
                    </div>
                </div> <!-- span8 -->
            </div> <!-- row-fluid -->
            <div class="row-fluid">
                <div class="span8">
                    <ul class="tableView">
                        <li data-bind="validationElement: notice">
                            <textarea id="notice" name="notice" maxlength="1024" rows="4" placeholder="Enter a comment..." data-bind="value: notice, valueUpdate:'afterkeydown'"></textarea>
                        </li>
                    </ul>
                </div> <!-- span8 -->
            </div> <!-- row-fluid -->
            <div class="row-fluid">
                <div class="span8">
                    <button class="btn" data-bind="click: save, enable:notice().length, css: {'btn-block': isPhone()}">Add Comment</button>
                </div> <!-- span8 -->
            </div> <!-- row-fluid -->
        </div> <!-- main -->
    </div> <!-- wrap -->
    <div id="footer">
        <div class="toleft hidden-phone">Logged in as <?cs var:Request.RemoteUser ?></div>
        <div class="toright hidden-phone">
            <ul class="piped">
                <li>Copyright &copy; 2024 <a href="https://tildeslash.com/">Tildeslash</a>. All Rights Reserved.</li>
                <li><a href="https://mmonit.com/">M/Monit</a></li>
                <li><a href="https://mmonit.com/monit/">Monit</a></li>
                <li><a href="https://mmonit.com/wiki/">Wiki</a></li>
            </ul>
        </div>
        <div id="copy" class="visible-phone">Copyright &copy; 2024 <a href="https://tildeslash.com/">Tildeslash</a>. All Rights Reserved.</div>
    </div> <!-- footer -->
    <script src="../../lib/f/jquery/jquery.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.mobile.vmouse.js?version=430"></script>
    <script src="../../lib/js/webapp.js?version=430"></script>
    <script src="../../lib/f/jquery/jquery.getUrlParam.js?version=430"></script>
    <script src="../../lib/f/strftime/strftime.js?version=430"></script>
    <script src="../../lib/f/knockout/knockout.js?version=430"></script>
    <script src="../../lib/f/knockout/knockout.validation.js?version=430"></script>
    <script src="../../lib/js/error.js?version=430"></script>
    <script src="../../lib/f/twbootstrap/js/bootstrap.js?version=430"></script>
    <script src="../../assets/reports/eventdetails.js?version=430"></script>
</body>
</html>
