{% extends 'base.html' %}
{% load humanize %}
{% load sekizai_tags %}

{% block breadcrumb %}
    <ol class="breadcrumb">
        <li><a href="{% url 'projects_project_list' %}">Projects</a></li>
        <li><a href="{% url 'projects_project_view' object.stage.project.pk %}">{{ object.stage.project.name }}</a></li>
        <li><a href="{% url 'projects_stage_view' object.stage.project.pk object.stage.pk %}">{{ object.stage.name }}</a></li>
        <li class="active">Deployment started {{ object.date_created|naturaltime }}</li>
    </ol>
{% endblock breadcrumb %}

{% block content %}
    <h1>Deployment started {{ object.date_created|naturaltime }}</h1><br/>

    <div class="row">
        <div class="col-md-6">
            <div class="well">
                <dl class="dl-horizontal">
                    <dt>Comments</dt>
                    <dd>{{ object.comments }}</dd>
                    <dt>Date Started</dt>
                    <dd>{{ object.date_created }}</dd>
                    <dt>Project</dt>
                    <dd>{{ object.stage.project.name }}</dd>
                    <dt>Stage</dt>
                    <dd>{{ object.stage.name }}</dd>
                    <dt>Task</dt>
                    <dd>{{ object.task.name }}</dd>
                    <dt>Task Description</dt>
                    <dd>{{ object.task.description }}</dd>
                </dl>
            </div>
        </div>
        <div class="col-md-6">
            <div class="well">
                <fieldset style="text-align: center;margin-bottom:10px;" id="status_section">
                    {% if object.status == object.PENDING %}
                        <legend>Status: Working</legend>
                        <i class="glyphicon glyphicon-time text-info" style="font-size:90px;"></i>
                    {% elif object.status == object.SUCCESS %}
                        <legend>Status: Success!</legend>
                        <i class="glyphicon glyphicon-ok text-success" style="font-size:90px;"></i>
                    {% else %}
                        <legend>Status: Failed!</legend>
                        <i class="glyphicon glyphicon-warning-sign text-danger" style="font-size:90px;"></i>
                    {% endif %}
                </fieldset>
            </div>
        </div>
    </div>
    <div class="well">
        {% if object.status == object.PENDING %}
            <iframe src="{% url 'projects_deployment_output' object.pk %}" id="deployment_output"></iframe>
        {% else %}
            <div id="deployment_output"><pre class="prettyprint">{{ object.output }}</pre></div>
        {% endif %}
    </div>


    {% addtoblock "js" %}
        <script>
            {% if object.status == object.PENDING %}
                $(function(){
                    var scroll_iframe_ticker = setInterval(function(){
                        var $contents = $('#deployment_output').contents();

                        $contents.scrollTop($contents.height());
                        if($contents.find('#finished').length > 0){
                            status = $contents.find('#finished').html();
                            if(status == 'failed'){
                                $('#status_section legend').html('Status: Failed!');
                                $('#status_section .glyphicon').attr('class', '').addClass('glyphicon').addClass('glyphicon-warning-sign').addClass('text-danger');
                            }else if(status == 'success') {
                                $('#status_section legend').html('Status: Success!');
                                $('#status_section .glyphicon').attr('class', '').addClass('glyphicon').addClass('glyphicon-ok').addClass('text-success');
                            }

                            clearInterval(scroll_iframe_ticker);
                        }
                    }, 100);

                });
            {% else %}
                $(function(){
                    $('#deployment_output pre').scrollTop($('#deployment_output pre')[0].scrollHeight);
                });
            {% endif %}
         </script>
    {% endaddtoblock %}

{% endblock content %}