<% addedCss.push('jquery.tagsinput.css') %>
<div class="tab-pane" id="admin">
  <form id="check_form" method="post" class="form-horizontal" action="<%= route %>/checks<%= check.isNew ? '' : '/' + check._id %>">
    <input type="hidden" name="_method" value="<%= (check.isNew) ? 'post' : 'put' %>" />

    <div class="row">

      <div class="span6">
        <fieldset>
          <div class="control-group">
            <label class="control-label">Url</label>
            <div class="controls controls-row">
              <input type="text" required name="check[url]" value="<%= check.url || '' %>" class="span5"  placeholder="http://www.example.com"/>
              <span class="help-inline" style="position:absolute"><a href="<%= check.url %>" target="_blank"><img src="<%= route %>/images/external-link-ltr-icon.png"></a></span>
            </div>
          </div>
        </fieldset>
      </div>

      <div class="span6">
        <fieldset>
          <div class="control-group">
            <label class="control-label">Type</label>
            <div class="controls controls-row">
              <select name="check[type]" value="<% check.type || '' %>" class="span2">
                <option value="">auto</option>
                <% pollerCollection.getTypes().forEach(function(poller) { %>
                <option value="<%= poller %>" <% if (poller === check.type) { %> selected="true" <% } %>><%= poller %></option>
                <% }) %>
              </select>
            </div>
          </div>
        </fieldset>
      </div>

    </div>

    <fieldset>
      <div class="control-group">
        <label class="control-label">Name</label>
        <div class="controls">
          <input type="text" name="check[name]" value="<%= check.name || '' %>" class="span8" placeholder="Type a name here"/>
        </div>
      </div>
    </fieldset>

    <div class="row">

      <div class="span6">
        <fieldset>
          <div class="control-group">
            <label class="control-label">Polling interval</label>
            <div class="controls">
              <div class="input-prepend input-append">
                <% if (check.lastTested) { %>
                <a class="btn" name="pause"><i class="icon-<%= check.isPaused ? 'play' : 'pause' %>"></i></a>
                <% } %>
                <input type="text" name="check[interval]" value="<%= (check.interval / 1000).toFixed() %>" class="span2" />
                <span class="add-on">s</span>
              </div>
            </div>
          </div>
        </fieldset>
      </div>

      <div class="span6">
        <fieldset>
          <div class="control-group">
            <label class="control-label">Slow threshold</label>
            <div class="controls">
              <div class="input-append">
                <input type="text" name="check[maxTime]" value="<%= check.maxTime %>" class="span1" />
                <span class="add-on">ms</span>
              </div>
            </div>
          </div>
        </fieldset>
      </div>

    </div>


    <fieldset>
      <div class="control-group">
        <label class="control-label">Alert threshold</label>
        <div class="controls">
          <div class="input-append">
            <input type="text" name="check[alertTreshold]" value="<%= check.alertTreshold %>" class="span1" />
            <span class="add-on">failed pings</span>
          </div>
        </div>
      </div>
    </fieldset>

    <span id="pollerDetails">
    <%- pollerDetails %>
    </span>

    <fieldset>
      <div class="control-group">
        <label class="control-label">Tags</label>
        <div class="controls">
          <textarea name="check[tags]" rows="2"/><%= check.tags.join(', ') %></textarea>
        </div>
      </div>
      <% if (check.lastTested) { %>
      <div class="control-group">
        <label class="control-label">Last edited on</label>
        <div class="controls">
          <span class="span4 uneditable-input"><%= check.lastTested.getTime() %></span>
        </div>
      </div>
      <% } %>
      <div class="form-actions">
        <% if (check.isNew) { %>
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="submit" name="saveandadd" value="true" class="btn btn-primary">Save and add</button>
        <a class="btn" href="<%= route %>/checks">Cancel</a>
        <% } else { %>
        <button type="submit" class="btn btn-primary">Save changes</button>
        <a class="btn" href="<%= route %>/checks/<%= check._id %>">Cancel</a>
        <button type="submit" class="btn btn-danger pull-right" name="delete">Delete</button>
        <% } %>
      </div>
    </fieldset>
  </form>
</div>
<script src="<%= route %>/javascripts/jquery.tagsinput.min.js"></script>
<script>
var intervalFieldSelector = 'form input[name="check\\[interval\\]"]';
function updatePollingIntervalTooltip() {
  var value = $(intervalFieldSelector).val();
  if (value > 60 ) {
    value = (value / 60).toFixed();
    unit = 'minute' + (value > 1 ? 's' : '');
    $(intervalFieldSelector + ' + span').html('s (' + value + ' ' + unit + ')');
  } else {
    $(intervalFieldSelector + ' + span').html('s');
  }
}
$(document).ready(function() {
  $('.uneditable-input').text(moment(parseInt($('.uneditable-input').html())).format('LLLL'));
  $('#check_form button[name="delete"]').click(function() {
    if (!confirm("This will delete the check and related pings and stats.\nAre you sure?")) return false;
    $('#check_form input[name="_method"]').val('delete');
  });
  updatePollingIntervalTooltip();

  $(intervalFieldSelector).bind('keypress keyup', updatePollingIntervalTooltip);

  $('#check_form input[name*="url"]').blur(function() {
    var field = $(this);
    if (field.val() && field.val().indexOf('://') == -1) {
      field.val('http://' + field.val());
    }
  });

  $('form select[name="check\\[type\\]"]').bind('change', function() {
    var pollerDetails = $('#pollerDetails');
    $.get('<%= route %>/pollerPartial/' + $(this).val())
      .fail(function() { pollerDetails.html(''); })
      .done(function(html) { pollerDetails.html(html); });
  });

  var tagField = $('#check_form textarea[name="check[tags]"]');
  var tags = tagField.val().split(', ');
  tagField.tagsInput();
  $('.tagsinput span.tag span').live('click', function() {
    window.location = '<%= route %>/tags/' + $(this).text();
  });
});
</script>
