<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Luigi Task Visualiser</title>
        <script src="lib/jquery-1.10.0.min.js"></script>
        <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="lib/jquery-ui/css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet">
        <script src="lib/bootstrap/js/bootstrap.min.js"></script>
        <script src="lib/mustache.js"></script>
        <script src="js/luigi.js"></script>
        <script src="js/graph.js"></script>
        <script src="js/visualiserApp.js"></script>
        <script src="lib/jquery-ui/js/jquery-ui-1.10.3.custom.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style type="text/css">
            .custom-header {
                background-color:#eeeeee;
                margin:0;
                padding:10px;
                border-radius: 6px;
            }
            body .modal {
              width: 90%; /* desired relative width */
              left: 5%; /* (100%-width)/2 */
              margin: auto auto auto auto; /* place center */
            }
            body .modal.fade.in {
              top: auto; /* fade in to correct spot */
            }
        </style>

        <style>
        .nodeCircle {
          stroke: #fff;
          stroke-width: 1.5px;
        }
        text {
            font-size:8pt;
        }

        .link {
          stroke: #999;
          stroke-opacity: .6;
        }

        svg {
            border:1px solid #DDDDDD;
            overflow:scroll;
        }
        </style>
        <script type="text/template" name="rowTemplate">
            {{#tasks}}
            <div class="taskFamily">
                <h4>
                    <button class="btn btn-mini btn-inverse" data-action="expandTaskRows">
                        <span class="icon-plus icon-white"></span>
                    </button>
                    <span class="badge badge-important">
                        {{value.length}}
                    </span>
                    {{key}} 
                </h4>
                <div class="taskRows" style="display:none">
                    {{#value}}
                    <div class="taskRow row-fluid" data-task-id="{{taskId}}">
                        <div class="span4"><strong>{{taskName}}</strong><em> ({{taskParams}})</em></div>
                        <div class="span2">{{verdict}}</div>
                        <div class="span3">{{displayTime}}</div>
                        <div class="span3">
                            <a href="#{{taskId}}" class="btn btn-info btn-small" data-action="drawGraph">Dependency Graph</a>
                            {{#error}}<a class="btn btn-primary btn-small error-trace-button" data-task-id="{{taskId}}">Show Error Trace</a>{{/error}}
                        </div>
                    </div>
                    {{/value}}
                </div>
            </div>
            {{/tasks}}
        </script>
        <script type="text/template" name="errorTemplate">
            <div class="modal-header">
                <h3>Traceback for {{taskId}}</h3>
            </div>
            <div class="modal-body">
                <pre class="pre-scrollable">{{error}}</pre>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </script>
    </head>
    <body>
        <div class="page-header custom-header">
            <h1>Luigi Task Status <small>Active tasks</small></h1>
        </div>
        
        <ul class="nav nav-tabs">
            <li class="active"><a href="#" data-tab="taskList" class="tabButton">Task List</a></li>
            <li><a href="#g" data-tab="dependencyGraph" class="tabButton">Dependency Graph</a></li>
        </ul>
        <div class="tab-content">
            <section id="taskList" class="container-fluid tab-pane active">
                <h3>Upstream Failure</h3>
                <div id="upstreamFailedTasks" class="taskList"></div>
                <h3>Failed Tasks</h3>
                <div id="failedTasks" class="taskList"></div>
                <h3>Running Tasks</h3>
                <div id="runningTasks" class="taskList"></div>
                <h3>Pending Tasks</h3>
                <div id="pendingTasks" class="taskList"></div>
                <h3>Done Tasks</h3>
                <div id="doneTasks" class="taskList"></div>
            </section>
            <section id="dependencyGraph" class="tab-pane">
                <div class="navbar">
                  <div class="navbar-inner">
                    <form class="navbar-form pull-left" id="loadTaskForm">
                      <input type="text" class="search-query" placeholder="TaskId(param1=val1,param2=val2)">
                      <button type="submit" class="btn">Show task details</button>
                    </form>
                  </div>
                </div>
                <div id="searchError">
                </div>
                <div id="graphContainer" class="container-fluid">
                    <h4 id="dependencyTitle"></h4>
                    <h5>Dependency Graph</h5>
                    <div id="graphPlaceholder">
                    </div>
                </div>
            </section>
        </div>
        <div id="errorModal" class="modal" style="display:none;">
            
        </div>
        <script>
            visualiserApp(new LuigiAPI("../../api"));
        </script>
    </body>
</html>
