<!DOCTYPE html>
<html>

<head>
    <title>Configura Service Status</title>
    <meta name="description" content="This is the Configura services status page" />

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=10" />

    <!-- android stuff -->
    <link rel="manifest" href="data/manifest.json" />
    <link rel="icon" sizes="36x36" href="img/icon-36x36.png" />
    <link rel="icon" sizes="48x48" href="img/icon-48x48.png" />
    <link rel="icon" sizes="72x72" href="img/icon-72x72.png" />
    <link rel="icon" sizes="96x96" href="img/icon-96x96.png" />
    <meta name="mobile-web-app-capable" content="yes" />

    <!-- iOS stuff -->
    <link rel="apple-touch-icon" sizes="36x36" href="img/icon-36x36.png">
    <link rel="apple-touch-icon" sizes="48x48" href="img/icon-48x48.png">
    <link rel="apple-touch-icon" sizes="72x72" href="img/icon-72x72.png">
    <link rel="apple-touch-icon" sizes="96x96" href="img/icon-96x96.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
    <link rel="stylesheet" href="css/status.css">

    <script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script language="javascript" src="js/status.js"></script>
</head>

<body>

        <div class="container">

            <br>
            <div class="text-center">
                <img class="img-fluid" src="img/logo.png">
            </div>

            <br><br>

            
            <!-- Incidents start here -->
            <div id="maintenance">
            </div>

            <!-- Services start here -->
            <h3>Services</h3>
            <table class="table">

                <thead>
                    <tr>
                        <th>Name</th>
                        <th>State</th>
                        <th class="hidden-sm-down" title="Measured from Configura Datacenter in Sweden">Response time</th>
                        <th class="hidden-xs-down">Checked</th>
                    </tr>
                </thead>
                <tbody id="services">
                    <tr class="table-info">
                        <td>No services found</td>
                        <td></td>
                        <td class="hidden-sm-down"></td>
                        <td class="hidden-xs-down"></td>
                    </tr>
                </tbody>
            </table>
            <br>

            <!-- Incidents start here -->
            <h3>Current Incidents</h3>
            <div id="current">
                <div class="card card-block">
                    No incidents found
                </div>
                <br>
            </div>

            <h3>Past Incidents</h3>
            <div id="past">
                <div class="card card-block">
                    No incidents found
                </div>
                <br>
            </div>

        </div>


</body>

<script language="javascript">
    loadMaintenance();
    loadServices();
    loadIncidents();
</script>
</html>