<!DOCTYPE html>
<html>

<head>
    <title>Diagnostics Status</title>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <!------ Include the above in your HEAD tag ---------->

    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- <link href="https://bootswatch.com/yeti/bootstrap.min.css" rel="stylesheet" type="text/css"/> -->
    <!--<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.4.1/cerulean/bootstrap.min.css" rel="stylesheet" integrity="sha384-LV/SIoc08vbV9CCeAwiz7RJZMI5YntsH8rGov0Y2nysmepqMWVvJqds6y0RaxIXT" crossorigin="anonymous"> -->

    <!--<script src="https://code.jquery.com/jquery.min.js"></script> -->
    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> -->
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Diagnostics Status</h1>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            {{ status }}
                        <!-- <small class="pull-right">Refreshed 39 minutes ago</small> -->
                        </h3>
                    </div>
                </div>


                <div class="row clearfix">
                    <div class="col-md-12 column">
                        <div class="list-group">
                            {%for i in range(0, len)%}
                            <div class="list-group-item">
                                <h4 class="list-group-item-heading">
                                    {{ diagnostic_components[i]["name"] }}
                                    <a href="{{ diagnostic_components[i]["endpoint"] }}" data-toggle="tooltip"
                                    data-placement="bottom" title="Access website and use site API">
                                    <i class="fa fa-question-circle"></i>
                                    </a>
                                </h4>
                                <p class="list-group-item-text" id="api">
                                    <span class="label {{ diagnostic_components[i]["class"] }} ">
                                    {{ diagnostic_components[i]["status"] }} </span>
                                    {% if diagnostic_components[i]["exception"] %}
                                    <span class="pull-right label {{ diagnostic_components[i]["class"] }} ">{{ diagnostic_components[i]["exception"] }}</span>
                                    {% endif %}
                                </p>
                            </div>
                            {%endfor%}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>