{% load static %}

{% block javascript %}
    <script type="text/javascript" src="{% static "js/playbook_status.js" %}"></script>
    <script>
        $(function() {
            PlaybookStatusGrid({{ query_result|safe }})
        })
    </script>
{%  endblock %}

<div class="col-md-12">
    <div class="card ">
        <div class="card-header ">
            <h5 class="card-title" style="color:#326690;">Cluster Name: {{ cluster_name }}</h5>
        </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>