{% load static %} 

{% block clusters-libraries %}
    <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" rel="stylesheet" integrity="sha384-omn7qdmCOCi0LwoUGkpBh85uDEJ+5RKyoNkmGSa1G9Lmf7GdOoLV52Ajtgh+GRhu sha512-F0kqJ4z+Ki/fqxnlO3NvK3XI/JN74WbAtpC1US8gkwjDt43on9lEMpTwiNoKTvvEYfjzd5rI4udXr/6PJfN42w=="
        crossorigin="anonymous" />
    <link href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" rel="stylesheet" integrity="sha384-R65dqZGbgZfpXHFmVOTHN1JO/CnqFI3B6EeBllGP37UxWuR24s2e17IPcLTEsQc7 sha512-QeIvMjb9zMmdUtgqveA8L74c6z1+QxJmmexDcs0FBagRfiHNdrPHmw5JlX8iWqftAK2gds/wVerJkyeWKBTpWA=="
        crossorigin="anonymous" /> {% endblock %} {% block javascript %}
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js" integrity="sha384-w44LtjCWJWHKxAXiYG97WL0a94M75mb3WwENxD/YFYYmnbQWMwS2CTj2yRKAQ0Da sha512-hCh3HwHjNw5eALy0w0p4z3DzbMuCj8ErcBMpLj+8RpSakFpCt/FL8arG2gnoYKjF6o/bslHXHqaDwO8TfYc9kQ=="
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="{% static " js/dashboard.js " %}"></script>
    <script>
        $(function() {
            initInstallGrid({{installs|safe }})
        })
    </script>
{% endblock %}

<div class="col-md-12">
    <div class="card ">
        <div class="card-header ">
            <h4 class="card-title">Cluster List</h4>
            <p class="card-category">Comprehensive list</p>
        </div>
        <div class="card-body ">
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">Started</div>
                <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">Done</div>
                <div class="progress-bar bg-info" role="progressbar" style="width: 30%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">Pending</div>
                <div class="progress-bar bg-danger" role="progressbar" style="width: 51%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">Failed</div>
            </div>
            <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;">
                <div class="demo-container">
                    <div id="gridContainer"></div>
                </div>
            </div>
        </div>
    </div>
</div>