{% extends "base.html" %}
{% load staticfiles %}
{% load bootstrap4 %}

{% block extrahead %}
    {{block.super}}
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
{% endblock %}

<style>
code {
    overflow: scroll;
}
</style>

{% block content %}
<div class="row">
    <div class="col-12 col-lg-5">
        <div class="card mb-3">
            <div class="card-header d-flex">
                <h4 class="d-inline">Overview</h4>
                <!-- <button data-toggle="collapse" data-target="#panel_overview" class="btn btn-outline-secondary ml-auto">Expand</button> -->
            </div>
            <div class="collapse show" id="panel_overview">
                <table class="table m-0">
                    <tr>
                        <td>Owner</td>
                        <td>{{ booking.owner }}</td>
                    </tr>
                    <tr>
                        <td>Collaborators</td>
                        <td>
                            {{ collab_string}}
                        </td>
                    </tr>
                    <tr>
                        <td>Project</td>
                        <td>{{ booking.project }}</td>
                    </tr>
                    <tr>
                        <td>Purpose</td>
                        <td>{{ booking.purpose }}</td>
                    </tr>
                    <tr>
                        <td>Start Time</td>
                        <td>{{ booking.start }}</td>
                    </tr>
                    <tr>
                        <td>End Time</td>
                        <td>{{ booking.end }}</td>
                    </tr>
                    <tr>
                        <td>Lab Deployed At</td>
                        <td>{{ booking.lab }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card mb-3">
            <div class="card-header d-flex">
                <h4 class="d-inline">Deployment Progress</h4>
                <p>These are the different tasks that have to be completed before your deployment is ready.
                If this is taking a really long time, let us know <a href="mailto:{{contact_email}}">here!</a></p>
                <!-- <button data-toggle="collapse" data-target="#panel_tasks" class="btn btn-outline-secondary ml-auto">Expand</button> -->
            </div>
            <div class="collapse show" id="panel_tasks">
                <table class="table m-0">
                    <tr>
                        <th></th>
                        <th>Resource</th>
                        <th>Status</th>
                    </tr>
                    {% for host in statuses %}
                    <tr>
                        <td>
                            <!-- Success,
                            Reimage,
                            InProgress,
                            Failure,
                            Import, -->
                            {% if host.status is 'Success' %}
                            <div class="rounded-circle bg-success square-20"></div>
                            {% elif host.status is 'InProgress' %}
                            <div class="spinner-border text-primary square-20"></div>
                            {% else %}
                            <div class="rounded-circle bg-secondary square-20"></div>
                            {% endif %}
                        </td>
                        <td>
                            {{ host.hostname }}
                        </td>
                        <td>
                            {{ host.status }}
                        </td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
</div>

{% endblock content %}