<script src="<%= route %>/javascripts/ejs.min.js"></script>
<script src="<%= route %>/javascripts/bootstrap-affix.js"></script>
<script src="<%= route %>/javascripts/dateInterval.js"></script>
<script src="<%= route %>/javascripts/dateNavigation.js"></script>
<script src="<%= route %>/javascripts/statNavigation.js"></script>
<script src="<%= route %>/javascripts/uptimeBar.js"></script>
<script src="<%= route %>/javascripts/flotr2.min.js"></script>
<script>
var ejs = require('ejs');
ejs.open = '{{';
ejs.close = '}}';
var page = {};
</script>
<div style="float: right;">
  <form id="tag_delete_form" method="post" action="<%= route %>/tags/<%= tag.name %>">
    <input type="hidden" name="_method" value="delete" />
    <button type="submit" class="btn btn-danger pull-right" name="delete">Delete</button>
  </form>
</div>
<h1>
  Tag "<%= tag.name %>"
</h1>
<div id="dateNavigationContainer">
  <div id="dateNavigation">
    <div class="row">
      <div class="span2"></div>
      <div class="span10">
        <div class="title"></div>
        <div class="timeline"></div>
      </div>
    </div>
    <div class="row">
      <div class="span2">
        <ul class="btn-group zoom"></ul>
      </div>
      <div class="span10">
        <div class="periods"></div>
      </div>
    </div>
  </div>
</div>
<div id="sectionList" class="row">
  <div class="span2">
    <ul id="secondaryNav" class="nav nav-tabs nav-stacked">
      <li><a href="#availability">Availability<i class="icon-chevron-right"></i><br/><strong class="availability"></strong>%</a></li>
      <li><a href="#events">Downtime<i class="icon-chevron-right"></i><br/><strong class="downtime"></strong></a></li>
      <li><a href="#responseTime">Response Time<i class="icon-chevron-right"></i><br/><strong class="avgRespTime"></strong>ms</a></li>
      <li><a href="#responsiveness">Responsiveness<i class="icon-chevron-right"></i><br/><strong class="responsiveness"></strong>%</a></li>
      <li><a href="#checks">Checks<i class="icon-chevron-right"></i></a></li>
      <li><a href="#data">Data<i class="icon-chevron-right"></i></a></li>
    </ul>
  </div>
  <div class="span10">
    <section id="availability">
    <%- partial('_availability') %>
    </section>
    <section id="events">
    <h2>Downtime</h2>
    <%- partial('_events', { url: '/api/tags/' + encodeURIComponent(tag.name) + '/events', route: route }) %>
    </section>
    <section id="responseTime">
    <%- partial('_responseTime') %>
    </section>
    <section id="responsiveness">
    <%- partial('_responsiveness') %>
    </section>
    <section id="checks">
    <%- partial('_checks', { url: '/api/tags/' + encodeURIComponent(tag.name) + '/checks/', route: route } ) %>
    </section>
    <section id="data">
    <%- partial('_data', { url: '/api/tags/' + encodeURIComponent(tag.name) + '/stats/', route: route } ) %>
    </section>
  </div>
</div>
<script>
var dateInterval = new DateInterval(
  '<%= req.query.type || 'month' %>',
  <%= req.query.date || Date.now() %>,
  <%= tag.firstTested.valueOf() %>,
  '/api/tags/<%= encodeURIComponent(tag.name) %>/',
  'day'
);
jQuery(document).ready(function($) {
  // Tag delete confirmation
  $('#tag_delete_form button[name="delete"]').click(function() {
    return confirm("This will delete the tag \"<%= tag.name %>\" and his checks relations.\nAre you sure?");
  });

  // highlight current section in main nav
  $('.navbar-inner li').eq(2).addClass('active');

  // initialize secondary navigation
  new StatNavigation(dateInterval);

  // initialize date navigation
  new DateNavigation(dateInterval, 'tag');

  // update stats every 15 minutes if looking at the current moment
  window.setInterval(function() {
    var now = Date.now();
    if (now > dateInterval.begin.valueOf() && now < dateInterval.end.valueOf()) {
      dateInterval.refreshData();
    }
  }, 15 * 60 * 1000);
});
</script>
