{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <title>{% block title %}Cabot by Arachnys{% endblock title %}</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  {% load compress %}
  {% compress css %}
  <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet">
  <link id="chosen-css" href="{% static 'theme/css/chosen.css' %}" rel="stylesheet">
  <link href="{% static 'bootstrap/css/dashboard.css' %}" rel="stylesheet">
  <link href="{% static 'theme/css/jquery-ui-1.8.21.custom.css' %}" type="text/css" rel="stylesheet">
  <link href="{% static 'arachnys/css/base.less' %}" type="text/less" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'arachnys/css/morris.css' %}" type="text/css">
  <link rel="stylesheet" href="{% static 'arachnys/css/graph.css' %}" type="text/css">
  {% endcompress %}
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  <link rel="icon" href="{% static 'arachnys/img/icon_48x48.png'%}" type="image/png">
  {% compress js %}
  <script type="text/coffeescript">
  if window.location.host.indexOf('localhost') != -1
    window.ENVIRONMENT = 'DEVELOPMENT'
  else
    window.ENVIRONMENT = 'PRODUCTION'
  </script>
  {% endcompress %}
</head>

<body>
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a href="{% url "services" %}" class="navbar-brand"><img src="{% static 'arachnys/img/icon_48x48.png' %}" width='20' height='20' /> Cabot by Arachnys</a>
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="navbar-collapse collapse" id="navbar-main">
        <ul class="nav navbar-nav">
          <li>
            <a href="{% url "instances" %}"><i class="fa fa-desktop"></i> Instances</a>
          </li>
          <li>
            <a href="{% url "services" %}"><i class="fa fa-gears"></i> Services</a>
          </li>
          <li>
            <a href="{% url "checks" %}"><i class="fa fa-cog"></i> Checks</a>
          </li>
          <ul class="nav navbar-nav navbar-left">
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">New <span class="caret"></span></a>
              <ul class="dropdown-menu" aria-labelledby="New">
                <li>
                  <a href="{% url "create-service" %}"><i class="fa fa-gears"></i> Service</a>
                </li>
                <li>
                  <a href="{% url "create-instance" %}"><i class="fa fa-desktop"></i> Instance</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="{% url "create-graphite-check" %}?service={{ service.id }}&instance={{ instance.id }}" class=""><i class="glyphicon glyphicon-signal" title="Add new metric check"></i> Graphite check</a>
                </li>
                <li>
                  <a href="{% url "create-http-check" %}?service={{ service.id }}&instance={{ instance.id }}" class="" title="Add new Http check"><i class="glyphicon glyphicon-arrow-up"></i> Http check</a>
                </li>
                <li>
                  <a href="{% url "create-jenkins-check" %}?service={{ service.id }}&instance={{ instance.id }}" class="" title="Add new Jenkins check"><i class="glyphicon glyphicon-ok"></i> Jenkins check</a>
                </li>
                <li>
                  <a href="{% url "create-icmp-check" %}?service={{ service.id }}&instance={{ instance.id }}" class="" title="Add new ICMP check"><i class="glyphicon glyphicon-transfer"></i> ICMP check</a>
                </li>
              </ul>
            </li>
          </ul>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="{% url "subscriptions" %}"><i class="fa fa-table"></i> Alert subscriptions</a>
          </li>
          <li>
            <a href="{% url "shifts" %}"><i class="glyphicon glyphicon-time"></i> Duty rota</a>
          </li>
          {% if user.is_authenticated %}
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">{{ user.username }} <span class="caret"></span></a>
            <ul class="dropdown-menu" aria-labelledby="admin">
              <li>
                <a href="{% url "admin:auth_user_add" %}"><i class="glyphicon glyphicon-user"></i> Add user</a>
              </li>
              <li>
                <a href="{% url "user-profile" user.id %}"><i class="glyphicon glyphicon-wrench"></i>Profile Settings</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="{% url "admin:index" %}"><i class="glyphicon glyphicon-lock"></i> Django admin</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="{% url "logout" %}"><i class="glyphicon glyphicon-log-out"></i> Log out</a>
              </li>
            </ul>
          </li>
          {% endif %}
        </ul>
      </div>
    </div>
  </div>
  <!-- start: Header -->
  <div class="container">
    <noscript>
      <div class="alert alert-block span10">
        <h4 class="alert-heading">Warning!</h4>
        <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p>
      </div>
    </noscript>
    {% if messages %}
    <div class="messages">
        {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissable">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
          {{ message }}
        </div>
        {% endfor %}
    </div>
    {% endif %}
    <div class="row">
    {% block content %}
    {% endblock content %}
    </div>
    <div class="clearfix"></div>

  </div>

  {% load compress %}
  {% block js %}

  {% compress js %}
    <script src="{% static 'bootstrap/js/jquery-1.10.2.js' %}"></script>
    <script src="{% static 'theme/js/jquery-ui.js' %}"></script>
    <script src="{% static 'theme/js/jquery.ui.core.js' %}"></script>
    <script src="{% static 'theme/js/jquery.ui.position.js' %}"></script>
    <script src="{% static 'theme/js/jquery.ui.autocomplete.js' %}"></script>

    <script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>

    <script src="{% static 'theme/js/jquery.dataTables.min.js' %}"></script>

    <script src="{% static 'theme/js/chosen.jquery.js' %}"></script>

    <script src="{% static 'theme/js/jquery.sparkline.min.js' %}"></script>

    <script src="{% static 'theme/js/custom.js' %}"></script>
    <script src="{% static 'arachnys/js/raphael.js' %}"></script>
    <script src="{% static 'arachnys/js/morris.js' %}"></script>
    <!-- end: JavaScript-->
    <script type="text/coffeescript">
    $ () ->
      $('.sparktristate').sparkline('html', {type: 'tristate'})

      $('ul.nav li a').each () ->
        if $($(this))[0].href == String(window.location)
          $(this).parent().addClass('active')

      $('[data-rel="chosen"],[rel="chosen"]').chosen()

      #$('.datatable').dataTable
      #  sDom: "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span12 center'p>>",
      #  sPaginationType: "bootstrap",
      #  iDisplayLength: 100,
      #  oLanguage:
      #    sLengthMenu: "_MENU_ records per page"
    </script>
  {% endcompress %}
  {% endblock js %}
</body>
</html>
