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

{% block extrahead %}
    {{block.super}}
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                <h4 style="display: inline;">Overview</h4>
               <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a>
            </div>
            <div class="panel-body" id="panel_overview">
                <table class="table">
                    <tr>
                        <td>Purpose</td>
                        <td>{{ booking.purpose }}</td>
                    </tr>
                    <tr>
                        <td>Project</td>
                        <td>{{ booking.project }}</td>
                    </tr>
                    <tr>
                        <td>Start Time</td>
                        <td>{{ booking.start }}</td>
                    </tr>
                    <tr>
                        <td>End Time</td>
                        <td>{{ booking.end }}</td>
                    </tr>
                    <tr>
                        <td>Pod Definition</td>
                        <td>{{ booking.resource.template }}</td>
                    </tr>
                    <tr>
                        <td>Pod Configuration</td>
                        <td>{{ booking.config_bundle }}</td>
                    </tr>
                    <tr>
                        <td>Lab Deployed At</td>
                        <td>{{ booking.lab }}</td>
                    </tr>
                </table>
            </div>
        </div>
    <div class="row">

        <div class="col-lg-6">

            <div class="panel panel-default">
            <div class="panel-heading clearfix">
                <h4 style="display: inline;">Pod</h4>

               <a data-toggle="collapse" data-target="#pod_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
            </div>
            <div class="panel-body pod_panel" id="pod_panel">
                <table class="table">
                {% for host in booking.resource.hosts.all %}
                <tr>
                    <td><h4>{{host.template.resource.name}}</h4></td>
                    <td>
                        <table class="table">
                            <tr>
                                <td>Hostname:</td>
                                <td>{{host.template.resource.name}}</td>
                            </tr>
                            <tr>
                                <td>Profile:</td>
                                <td>{{host.name}}</td>
                            </tr>
                            <tr>
                                <td>Role:</td>
                                <td>{{host.config.opnfvRole}}</td>
                            </tr>
                            <tr>
                                <td>Image:</td>
                                <td>{{host.config.image}}</td>
                            </tr>
                            <tr>
                                <td>RAM:</td>
                                <td>{{host.profile.ramprofile.first.amount}}G,
                                    {{host.profile.ramprofile.first.channels}} channels</td>
                            </tr>
                            <tr>
                                <td>CPU:</td>
                                <td>
                                    <table class="table">
                                        <tr>
                                            <td>Arch:</td>
                                            <td>{{host.profile.cpuprofile.first.architecture}}</td>
                                        </tr>
                                        <tr>
                                            <td>Cores:</td>
                                            <td>{{host.profile.cpuprofile.first.cores}}</td>
                                        </tr>
                                        <tr>
                                            <td>Sockets:</td>
                                            <td>{{host.profile.cpuprofile.first.cpus}}</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td>DISK:</td>
                                <td>
                                    <table class="table">
                                        <tr>
                                            <td>Size:</td>
                                            <td>{{host.profile.diskprofile.first.size}}GiB</td>
                                        </tr>
                                        <tr>
                                            <td>Type:</td>
                                            <td>{{host.profile.diskprofile.first.media_type}}</td>
                                        </tr>
                                        <tr>
                                            <td>Mount Point:</td>
                                            <td>{{host.profile.diskprofile.first.name}}</td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td>Interfaces:</td>
                                <td>
                                    <style>
                                        .borderless td {
                                            border: none !important;
                                        }
                                    </style>
                                    <table class="table">
                                    {% for intprof in host.profile.interfaceprofile.all %}
                                    <tr>
                                        <td>
                                        <table class="table borderless">
                                            <tr>
                                                <td>Name:</td>
                                                <td>{{intprof.name}}</td>
                                            </tr>
                                            <tr>
                                                <td>Speed:</td>
                                                <td>{{intprof.speed}}</td>
                                            </tr>
                                        </table>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                    </table>
                                </td>
                            </tr>


                        </table>

                    </td>
                {% endfor %}
                </tr>
                </table>
            </div>
        </div>
      </div>
        <div class="col-lg-6">

        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                <h4 style="display: inline;">PDF</h4>
            <a data-toggle="collapse" data-target="#pdf_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
            </div>

            <div class="panel-body" id="pdf_panel" style="padding: 0px;">
                <pre class="prettyprint lang-yaml" style="margin: 0px; padding: 0px; border: none;">

                    {{pdf}}


                </pre>
            </div>
        </div>
        </div>
        </div>
    </div>



    <div class="col-lg-6">
        <div class="panel panel-default">
            <div class="panel-heading clearfix">
                <h4 style="display: inline;">Deployment Progress</h4>
                <p style="display: inline; margin-left: 10px;">  These are the different tasks that have to be completed before your deployment is ready</p>
               <a data-toggle="collapse" data-target="#panel_tasks" class="btn pull-right" style="line-height: 1;" >Expand</a>
            </div>

            <div class="panel-body" id="panel_tasks">
                <table class="table">
                    <style>
                        .progress {
                            display: inline-block;
                            border: 3px solid #f3f3f3;
                            border-radius: 50%;
                            border-top: 3px solid #12aebb;
                            width: 20px;
                            height: 20px;
                            -webkit-animation: spin 2s linear infinite; /* Safari */
                            animation: spin 2s linear infinite;
                          }

                          @keyframes spin {
                              0% {transform: rotate(0deg);}
                              100% {transform: rotate(360deg);}
                          }

                          .new {
                              display: inline-block;
                              width: 20px;
                              height: 20px;
                              background: #f3f3f3;
                              border-radius: 50%;
                              animation: fadeInOut 1s infinite alternate;


                          }
                          @keyframes fadeInOut {
                              from { opacity: 0;}
                          }
                          .done {
                              display: inline-block;
                              width: 20px;
                              height: 20px;
                              background: #40B976;
                              border-radius: 50%;
                          }
                        </style>
                    <tr>
                        <th></th>
                        <th>Status</th>
                        <th>Lab Response</th>
                        <th>Type</th>
                    </tr>
                    {% for task in booking.job.get_tasklist %}
                    <tr>
                        <td>
                            {% if task.status < 100 %}
                                <div class="new"></div>
                            {% elif task.status < 200 %}
                                <div class="progress"></div>
                            {% else %}
                                <div class="done"></div>
                            {% endif %}
                            </td>


                        <td>
                            {% if task.status < 100 %}
                                PENDING
                            {% elif task.status < 200 %}
                                IN PROGRESS
                            {% else %}
                                DONE
                            {% endif %}
                        </td>
                        <td>

                            {% if task.message %}
                            {% if task.type_str == "Access Task" and user_id != task.config.user.id %}
                            Message from Lab: <pre>--secret--</pre>
                            {% else %}
                            Message from Lab: <pre>{{ task.message }}</pre>
                            {% endif %}
                            {% else %}
                            No response provided (yet)
                            {% endif %}
                        </td>
                        <td>
                            {{ task.type_str }}

                        </td>
                    </tr>
                    {% endfor %}
                </table>
            </div>
        </div>

    </div>
    </div>
</div>


{% endblock content %}