{% extends "admin/base.html" %}
{% load admin_static %}

{% block extrahead %}

<link rel="stylesheet"  href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="{% static 'suit/css/suit.css' %}" media="all">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<link rel="stylesheet" type="text/css" href="{% static 'planetstack.css' %}" media="all">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>


<!-- no need to include jquery here as it's already included by base.html. Including it multiple times will break mtuity statistics. -->
<!-- src="http://code.jquery.com/jquery-1.9.1.js" -->

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{% static 'log4javascript-1.4.6/log4javascript.js' %}"></script>
<script src="{% static 'js/Leaflet.MakiMarkers.js' %}" > </script>

<script>
  $(function() {
    $( "#hometabs" ).tabs({active: 0, //event: "mouseover"
      //collapsible: true
    });
  });
</script>

<script>
var consoleAppender = new log4javascript.BrowserConsoleAppender();
var patternLayout = new log4javascript.PatternLayout("%d{HH:mm:ss,SSS} %l{s:l} %-5p - %m{1}%n");
consoleAppender.setLayout(patternLayout);
//var log  = log4javascript.getDefaultLogger();
var log  = log4javascript.getRootLogger();
log.addAppender(consoleAppender);
log.setLevel(log4javascript.Level.ERROR);
</script>

<script>

function confirmDialog(title,msg) {
    var dialog = $('<div>'+msg+'</div>');
    var def = $.Deferred();

    $(dialog).dialog({
        resizable: false,
        title: title,
        autoOpen: true,
        modal: true,
        dialogClass: "dashboard-hpc-sliver",
        buttons: {
            'OK': function() {
                def.resolve();
                log.debug("Chose to add a sliver");
                $( this ).dialog( "close" );
            },
            'Cancel': function() {
                def.reject();
                $( this ).dialog( "close" );
            }
        },
        close: {
        }
    });
    return def.promise();
}

  </script>

{% endblock %}

{% block content %}
<!-- <div id="hometabs" class="inner-center-column ui-tabs ui-widget ui-widget-content ui-corner-all"> -->
<div id="hometabs" >
  <ul id="suit_form_tabs" class="nav nav-tabs nav-tabs-suit" data-tab-prefix="suit-tab">
    <li><a href="#tabs-1">Developer View</a></li>
    <li><a href="#tabs-2">CDN Operations </a></li>
    <li><a href="#tabs-3">Historical</a></li>
    <li><a href="#tabs-4">Slice Interactions</a></li>
    <li><a href="#tabs-5">Tenant</a></li>
    <li><a href="#tabs-6">CDN Nodes</a></lib>
  </ul>
<div id="tabs-1">
{% include "/opt/planetstack/templates/admin/dashboard/developer.html" %}
</div>
<div id="tabs-2">
{% include "/opt/planetstack/templates/admin/dashboard/cdnoperations.html" %}
</div>
<div id="tabs-3">
{% include "/opt/planetstack/templates/admin/dashboard/hpc_historical.html" %}
</div>
<div id="tabs-4">
{% include "/opt/planetstack/templates/admin/dashboard/slice_interactions.html" %}
</div>
<div id="tabs-5">
{% include "/opt/planetstack/templates/admin/dashboard/tenant.html" %}
</div>
<div id="tabs-6">
{% include "/opt/planetstack/templates/admin/dashboard/cdn_nodes.html" %}
</div>
</div>

{% endblock %}