{% load static %}

{% block playbook-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/playbook_status.js" %}"></script>
    <script>
        $(function() {
            PlaybookStatusGrid({{ clusters|safe }})
        })
    </script>
{%  endblock %}

<div class="col-md-12">
    <div class="card ">
        <div class="card-header ">
            <h4 class="card-title">Deployment Workflow</h4>
            <p class="card-category">Latest status update received for each cluster</p>
        </div>
        <div class="card-body ">
            <div class="col-md-12 col-xl-12" style="margin-top:20px; padding: 5px;">
                <div class="demo-container">
                    <div id="PlaybookGridContainer"></div>
                </div>
            </div>
        </div>
    </div>
</div>