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

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

{% block content %}

<style>
#modal_warning {
    transition: max-height 0.5s ease-out;
    overflow: hidden;
}

</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">
            <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-12">
                    <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 id="host_image_{{host.id}}">
                                                {{host.config.image}}
                                                <button
                                                    style="margin-left:10px;"
                                                    class="btn btn-primary"
                                                    data-toggle="modal"
                                                    data-target="#imageModal"
                                                    onclick="set_image_dropdown('{{host.profile.name}}', {{host.id}});"
                                                >Change/Reset</button></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.storageprofile.first.size}} GiB</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Type:</td>
                                                        <td>{{host.profile.storageprofile.first.media_type}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Mount Point:</td>
                                                        <td>{{host.profile.storageprofile.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>
        </div>
        <div class="col-lg-8">
            <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 class="row">
                <div class="col-lg-8">
                    <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: 15px; border: none;">
{{pdf}}
                            </pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 450px;" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel" style="display: inline; float: left;">Host Image</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="image_host_form">
                    {% csrf_token %}
                    <select class="form-control" style="width: 80%; margin-left: 10%" id="image_select" name="image_id">
                    </select>
                    <input id="host_id_input" type="hidden" name="host_id">
                    </input>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Reset Host</button>
            </div>
            <div id="modal_warning" class="modal-footer" style="max-height:0px;" >
                <div style="text-align:center; margin: 5px">
                    <h3>Are You Sure?</h3>
                    <p>This will wipe the disk and reimage the host</p>
                    <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button>
                    <button class="btn btn-danger" data-dismiss="modal" onclick="submit_image_form();">I'm Sure</button>
                </div>
        </div>
    </div>
</div>

<script>
    var image_mapping = {{image_mapping|safe}};
    var current_host_id = 0;
    function set_image_dropdown(profile_name, host_id) {
        document.getElementById("host_id_input").value = host_id;
        current_host_id = host_id;
        var dropdown = document.getElementById("image_select");
        var length = dropdown.length;
        //clear dropdown
        for(i=length-1; i>=0; i--){
            dropdown.options.remove(i);
        }
        var images = image_mapping[profile_name];
        var image_length = images.length;
        for(i=0; i<image_length; i++){
            var opt = document.createElement("OPTION");
            opt.value = images[i].value;
            opt.appendChild(document.createTextNode(images[i].name));
            dropdown.options.add(opt);
        }

        document.getElementById("modal_warning").style['max-height'] = '0px';
    }

    function submit_image_form() {
        var ajaxForm = $("#image_host_form");
        var formData = ajaxForm.serialize();
        req = new XMLHttpRequest();
        req.open("POST", "/booking/modify/{{booking.id}}/image/", true);
        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        req.onerror = function() { alert("problem submitting form"); }
        req.onreadystatechange = function() {
            if(req.readyState === 4) {
                node = document.getElementById("host_image_" + current_host_id);
                text = document.createTextNode(req.responseText);
                node.replaceChild(text, node.firstChild);
            }
        }
        req.send(formData);
    }
</script>
{% endblock content %}