
<!doctype html>
<html lang="en">

    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../../favicon.ico">
        <link rel="stylesheet" href="static/css/tree.css">
        <link rel="stylesheet" href="static/css/bootstrap.min.css">
    </head>
    <body>

        <div class="jumbotron">
          <h1>Cloudfoundry Buildpack Dashboard</h1>
          <p>One stop dashboard for monitoring buildpack usage</p>
        </div>

        <div class="container">

            <div class="row">

                <div class="col-sm-2 col-md-1">
                    <!-- Example single danger button -->
                    <div class="btn-group" data-toggle="buttons">
                        {% for environment, api_url in environments.items() %}
                        {% if loop.index == 1 %}
                        {% set checked = "checked" %}
                        <label class="btn btn-outline-info active">
                        {% else %}
                            {% set checked = "" %}
                        <label class="btn btn-outline-info">
                            {% endif %}

                            <input type="radio" name="environments" id="option{{loop.index}}" value="{{ environment }}" autocomplete="off" {{ checked }}> {{ environment }} </input>
                        </label>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <!-- Content row -->
            <div class="row">
                <!-- Buildpacks column -->
                <div class="col-sm-12 col-md-6">
                    <!-- Buildpacks content row -->
                    <div class="row" id="buildpacks_div">

                        <!-- End buildpacks content row -->
                    </div>
                <!-- End of first column -->
                </div>

                <!-- Second column -->
                <div class="col-sm-12 col-md-6">
                    <!-- Organisations content row -->
                    <div class="row" id="organisations_div">

                        <!-- End organisations content row -->
                    </div>
                <!-- End of second column -->
                </div>
            <!-- End of content row -->
            </div>
        <!-- End of container -->
        </div>

        <footer class="footer">
            <div class="container-fluid">
                <span class="text-muted">SpringerNature 2018</span>
            </div>
        </footer>

    </body>

    <!--   Core JS Files   -->
    <script src="../static/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="../static/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="../static/js/collapsible-list.min.js" type="text/javascript"></script>
    <script src="../static/js/custom/dashboard.js"></script>
</html>
