{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="{% static "../../static/css/bootstrap/bootstrap.min.css" %}" rel="stylesheet"/>
    <link href="{% static "../../static/css/main.css" %}" rel="stylesheet"/>
    <link href='http://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'>
    <!-- JS -->
    <!-- load angular, nganimate, and ui-router -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="{% static "../../static/js/bootstrap/bootstrap.min.js" %}"></script>
    <script type="text/javascript" src="{% static "../../static/js/angular/angular.min.js" %}"></script>
    <script type="text/javascript" src="{% static "../../static/js/angular/angular-file-upload.min.js" %}"></script>
    <script type="text/javascript">
        var app = angular.module('results', [])
        app.config(function ($httpProvider) {

            $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
            $httpProvider.defaults.xsrfCookieName = 'csrftoken';
            $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
        });
        app.controller('logCtrl', function ($scope, $sce, $http, $timeout) {
            var poll = function () {
                var promise = $timeout(function () {

                    $http.get('{{ path }}')
                    .success(function (response) {
                            $scope.logs = response.logs
                            if (response.fin)
                            {
                                $scope.finished = true
                                $scope.$apply()
                            }
                    })
                    .error(function (response) {
                        console.log(response)
                    })
                    if (!$scope.finished)
                    {
                        $timeout.cancel(promise)
                        poll()
                    }
                }, 2000)
            }
            $scope.trustAsHtml = function(txt){
                return $sce.trustAsHtml(txt)
            }
            poll()
        })
    </script>
    <style type="text/css">
        .output{
            background-color: #141414;
            font-family: monospace;
            color: #ffff00;
            padding: 10px;
            width: 600px;
            margin: auto;
            height: 500px;
            overflow-y: scroll;
        }
    </style>
</head>
<body ng-app="results">
<div ng-controller="logCtrl" class="output">
    <div ng-repeat="log in logs track by $index">
    {% verbatim %}
    {{ trustAsHtml(log) }}
    {% endverbatim %}
    </div>
    <div ng-show="finished">
        Now you can use our <a href="/distributed-jmeter/">tool for distributed jmeter</a> to test your deployment.
    </div>
</div>
</body>
</html>