{% load static %}

<div class="col-md-3">
    <div class="card ">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div class="state">
                    <h6>Clusters</h6>
                    <h2>{{ summary.clusters }}</h2>
                </div>
                <div class="icon">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-server" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M1.333 2.667C1.333 1.194 4.318 0 8 0s6.667 1.194 6.667 2.667V4C14.665 5.474 11.68 6.667 8 6.667 4.318 6.667 1.333 5.473 1.333 4V2.667zm0 3.667v3C1.333 10.805 4.318 12 8 12c3.68 0 6.665-1.193 6.667-2.665V6.334c-.43.32-.931.58-1.458.79C11.81 7.684 9.967 8 8 8c-1.967 0-3.81-.317-5.21-.876a6.508 6.508 0 0 1-1.457-.79zm13.334 5.334c-.43.319-.931.578-1.458.789-1.4.56-3.242.876-5.209.876-1.967 0-3.81-.316-5.21-.876a6.51 6.51 0 0 1-1.457-.79v1.666C1.333 14.806 4.318 16 8 16s6.667-1.194 6.667-2.667v-1.665z"/>
                    </svg>
                </div>
            </div>
            <small class="text-small mt-10 d-block">Last updated at {{ summary.created_at }}</small>
        </div>

    </div>
</div>
<div class="col-md-3">
    <div class="card ">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div class="state">
                    <h6>Completed Installs</h6>
                    <h2>{{ summary.completed }}</h2>
                </div>
                <div class="icon">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check2-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
                        <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h10a1.5 1.5 0 0 0 1.5-1.5V8a.5.5 0 0 0-1 0v5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5h8a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 3v10z"/>
                    </svg>
                </div>
            </div>
        </div>
        <div class="progress progress-sm">
            <div class="progress-bar bg-success" role="progressbar" style="width: {{ completed_percent }}%;">
                {{ completed_percent }}%
            </div>
        </div>
    </div>
</div>

<div class="col-md-3">
    <div class="card ">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div class="state">
                    <h6>In Progress</h6>
                    <h2>{{ summary.in_progress }}</h2>
                </div>
                <div class="icon">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-hourglass-split" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0c0 .701.478 1.236 1.011 1.492A3.5 3.5 0 0 1 11.5 13s-.866-1.299-3-1.48V8.35z"/>
                    </svg>
                </div>
            </div>
        </div>
        <div class="progress progress-sm">
            <div class="progress-bar bg-warning" role="progressbar" style="width: {{ in_progress_percent }}%;">
                {{ in_progress_percent }}%
            </div>
        </div>
    </div>
</div>

<div class="col-md-3">
    <div class="card ">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div class="state">
                    <h6>Failed</h6>
                    <h2>{{ summary.failed }}</h2>
                </div>
                <div class="icon">
                    <svg width="1.0625em" height="1em" viewBox="0 0 17 16" class="bi bi-exclamation-triangle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M7.938 2.016a.146.146 0 0 0-.054.057L1.027 13.74a.176.176 0 0 0-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 0 0 .066-.017.163.163 0 0 0 .055-.06.176.176 0 0 0-.003-.183L8.12 2.073a.146.146 0 0 0-.054-.057A.13.13 0 0 0 8.002 2a.13.13 0 0 0-.064.016zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
                        <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
                    </svg>
                </div>
            </div>
        </div>
        <div class="progress progress-sm">
            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
                {{ failed_percent }}%
            </div>
        </div>
    </div>
</div>

<!-- Break down CaaS workflow -->

<div class="col-md-2">
    <div class="card">
        <div class="card-body text-decoration-none">
            <a class="card-block stretched-link " href="{% url 'dashboard' %}"></a>
            <div class="d-flex justify-content-between align-items-center">
                <div class="state">
                    <h6>Ingested</h6>
                    <h2>{{ summary.ingested }}</h2>
                </div>
                <div class="icon">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-plus" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                    </svg>
                </div>
            </div>
        </div>
        <div class="progress progress-sm">
            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
                {{ failed_percent }}%
            </div>
        </div>
    </div>
</div>
<div class="col-md-2">
    <div class="card ">
        <div class="card-body">
            <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=online"></a>
            <div class="d-flex justify-content-between align-items-center">
                <div class="state">
                    <h6>Online</h6>
                    <h2>{{ summary.online }}</h2>
                </div>
                <div class="icon">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-share" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/>
                    </svg>
                </div>
            </div>
        </div>
        <div class="progress progress-sm">
            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
                {{ failed_percent }}%
            </div>
        </div>
    </div>
</div>
<div class="col-md-2">
    <div class="card ">
        <div class="card-body">
            <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=firmware_scheduled"></a>
            <div class="d-flex justify-content-between align-items-center">
                <div class="state">
                    <h6>Firmware Scheduled</h6>
                    <h2>{{ summary.firmware_scheduled }}</h2>
                </div>
                <div class="icon">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-card-checklist" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
                        <path fill-rule="evenodd" d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
                    </svg>
                </div>
            </div>
        </div>
        <div class="progress progress-sm">
            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
                {{ failed_percent }}%
            </div>
        </div>
    </div>
</div>
<div class="col-md-2">
    <div class="card ">
        <div class="card-body">
            <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=firmware_upgraded"></a>
            <div class="d-flex justify-content-between align-items-center">
                <div class="state">
                    <h6>Firmware updated</h6>
                    <h2>{{ summary.firmware_upgraded }}</h2>
                </div>
                <div class="icon">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check2-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
                        <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h10a1.5 1.5 0 0 0 1.5-1.5V8a.5.5 0 0 0-1 0v5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5h8a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 3v10z"/>
                    </svg>
                </div>
            </div>
        </div>
        <div class="progress progress-sm">
            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
                {{ failed_percent }}%
            </div>
        </div>
    </div>
</div>
<div class="col-md-2">
    <div class="card ">
        <div class="card-body">
            <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=wr_scheduled"></a>
            <div class="d-flex justify-content-between align-items-center">
                <div class="state">
                    <h6>WindRiver Scheduled</h6>
                    <h2>{{ summary.wr_scheduled }}</h2>
                </div>
                <div class="icon">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-card-checklist" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
                        <path fill-rule="evenodd" d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
                    </svg>
                </div>
            </div>
        </div>
        <div class="progress progress-sm">
            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
                {{ failed_percent }}%
            </div>
        </div>
    </div>
</div>
<div class="col-md-2">
    <div class="card ">
        <div class="card-body">
            <a class="card-block stretched-link " href="{% url 'dashboard' %}?filter=wr_installed"></a>
            <div class="d-flex justify-content-between align-items-center">
                <div class="state">
                    <h6>WindRiver Installed</h6>
                    <h2>{{ summary.wr_installed }}</h2>
                </div>
                <div class="icon">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check2-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
                        <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 0 0 3 14.5h10a1.5 1.5 0 0 0 1.5-1.5V8a.5.5 0 0 0-1 0v5a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5h8a.5.5 0 0 0 0-1H3A1.5 1.5 0 0 0 1.5 3v10z"/>
                    </svg>
                </div>
            </div>
        </div>
        <div class="progress progress-sm">
            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ failed_percent }}%;">
                {{ failed_percent }}%
            </div>
        </div>
    </div>
</div>

<!-- Break down Orchestration workflow -->

<div class="col-md-2">
    <div class="card">
        <div class="card-body text-decoration-none">
            <a class="card-block stretched-link " href="{% url 'dashboard' %}"></a>
            <div class="d-flex justify-content-between align-items-center">
                <div class="state">
                    <h6>Namespaces Created</h6>
                    <h2>{{ orchestration.namespaces }}</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-md-3">
    <div class="card">
        <div class="card-body text-decoration-none">
            <a class="card-block stretched-link " href="{% url 'dashboard' %}"></a>
            <div class="d-flex justify-content-between align-items-center">
                <div class="state">
                    <h6>Service Accounts</h6>
                    Orchestration: {{ orchestration.orch_service_account }} <br /> Edge Engineering: {{ orchestration.edge_eng_service_account }} <br /> Samsung:{{ orchestration.samsung_service_account }} <br />
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-md-3">
    <div class="card">
        <div class="card-body text-decoration-none">
            <a class="card-block stretched-link " href="{% url 'dashboard' %}"></a>
            <div class="d-flex justify-content-between align-items-center">
                <div class="state">
                    <h6>Kubeconfig's Created</h6>
                    Orchestration: {{ orchestration.orch_kubeconfig }} <br /> Edge Engineering: {{ orchestration.edge_eng_kubeconfig }} <br /> Samsung: {{ orchestration.samsung_kubeconfig }}
                </div>
            </div>
        </div>
    </div>
</div>



{% 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/workflow_status.js " %}"></script>
<script>
    $(function() {
        WorkflowGrid({
            {
                workflow | 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="WorkflowGridContainer"></div>
                </div>
            </div>
        </div>
    </div>
</div>