{% extends "base.html" %}
{% block content %}
<div class="main view-incident">
  <!-- template renders here -->
</div>
{% raw %}
<script id="incident-template" type="text/x-handlebars-template">
  <div class="module clearfix">
    <h3>
      {{application}} Incident #{{id}} <i class="badge" data-active="{{active}}"> </i>
      <span class="incident-info">
        <a href="/plans/{{plan_id}}">{{plan}}: step {{current_step}}</a>
        <span class="light"> Owner:</span> {{#if owner}} {{owner}} {{else}} Unclaimed {{/if}}
      </span>
      {{#isUser owner}}
        <button type="button" id="claim-incident" class="pull-right btn btn-default blue btn-sm" data-id="{{id}}" data-action="unclaim">Unclaim Incident</button>
      {{else}}
        {{#if active}}
          <button type="button" id="claim-incident" class="pull-right btn btn-default blue btn-sm" data-id="{{id}}" data-action="claim">Claim Incident</button>
        {{else}}
          {{#if owner}}
            <button type="button" id="claim-incident" class="pull-right btn btn-default btn-sm disabled" disabled data-id="{{id}}" data-action="claim">Claimed</button>
          {{else}}
            <button type="button" id="claim-incident" class="pull-right btn btn-default btn-sm disabled" disabled data-id="{{id}}" data-action="claim">Inactive</button>
          {{/if}}
        {{/if}}
      {{/isUser}}
      <button type="button" id="re-escalate-modal-btn" class="pull-right btn btn-default blue btn-sm">Re-escalate</button>
    </h3>
    <span class="light italic"><small>created at {{convertToLocal created}}</small></span>
    {{#if updated}}
      <span class="light">|</span>
      <span class="light italic"><small>updated at {{convertToLocal updated}}</small></span>
    {{/if}}
  </div>
  <div class="module incident-details">
    <div>
      {{#> context_template}}
        <label><strong>Context:</strong></label>
        <table id="context-table">
          {{#each context}}
            {{#if this}}
            <tr>
              <td class="context-label">
                <strong>{{@key}}:</strong>
              </td>
              <td class="context-data">
                {{this}}
              </td>
            </tr>
          {{/if}}
          {{/each}}
        </table>
      {{/context_template}}
    </div>
  </div>
  {{#if steps}}
  <div class="module">
    <label><strong>Messages:</strong></label>
    <table class="display" id="incident-messages-table" width="100%">
      <thead>
        <tr>
          <td class="light id">Message ID <i class="glyphicon glyphicon-sort"></i></td>
          <td class="light step">Step <i class="glyphicon glyphicon-sort"></i></td>
          <td class="light target">Target <i class="glyphicon glyphicon-sort"></i></td>
          <td class="light priority">Priority <i class="glyphicon glyphicon-sort"></i></td>
          <td class="light mode">Mode <i class="glyphicon glyphicon-sort"></i></td>
          <td class="light sent">Sent <i class="glyphicon glyphicon-sort"></i></td>
        </tr>
      </thead>
      <tbody>
        {{#each steps}}
        <tr data-route="/incidents/{{id}}">
          <td><a href="/messages/{{id}}">{{id}}</a></td>
          <td> {{step}} </td>
          <td> {{name}} {{#if target_changed}}<span class="label label-info">Changed</span>{{/if}} </td>
          <td> {{priority}} </td>
          <td> {{mode}} {{#if mode_changed}}<span class="label label-info">Changed</span>{{/if}} </td>
          <td data-order="{{sent}}"> {{convertToLocal sent}} </td>
        </tr>
        {{/each}}
      </tbody>
    </table>
    {{/if}}
  </div>
  <div class="module">
    <h4>Comments:</h4>
    <hr>
    <div class="comment-list">
      {{#each comments}}
        {{>comment}}
      {{/each}}
    </div>
    {{#unless comments}}
    <div class="no-comments">
      <p>There are no comments yet on this incident.</p><hr>
    </div>
    {{/unless}}
    <div class="clearfix">
      <button type="button" id="show-comment" class="btn btn-default blue btn-sm">Add comment</button>
    </div>
    <div id="add-comment">
      <label for="comment-body">Comment:</label>
      <textarea id="comment-body" class="form-control"></textarea>
      <div class="comment-actions">
        <button type="button" id="comment-incident" class="btn btn-primary btn-sm">Add</button>
        <button type="button" id="cancel-comment" class="btn btn-default blue btn-sm">Cancel</button>
      </div>
    </div>
  </div>

<div class="modal fade" id="re-escalate-modal" tabindex="-1" role="dialog" aria-labelledby="re-escalate-modal-btn">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Re-escalate Incident</h4>
      </div>
      <div class="modal-body">
        <p>
        Re-escalate this incident using another escalation plan. This will claim the current incident if it is active
        and create a new incident with the same content, following the escalation plan chosen below. This new incident
        will be linked to this incident via automated comments.
        </p>
        <hr>
        <div id="re-escalate-container">
          <label class="item-label light" for="re-escalate-plan">Re-escalation plan: </label>
          <input id="re-escalate-typeahead" type="text" class="form-control border-bottom typeahead unload-exclude"
              placeholder="plan name" data-typeaheadtype="plan">
          <button type="button" id="re-escalate-plan-btn" class="btn btn-default blue btn-sm pull-right">Select plan</button>
        </div>
        <div class="re-escalate-plan-container">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="re-escalate-btn" disabled>Re-escalate</button>
      </div>
    </div>
  </div>
</div>
</script>

<script id="comment-template" type="text/x-handlebars-template">
  <div class="comment-display">
      <p class="comment-header"><strong>{{author}}</strong> added a comment - {{convertToLocal created}}</p>
      <div class="comment-content">{{markdown content}}</div>
  </div>
  <hr>
</script>

<!--// plan preview partial -->
<script id="re-escalation-plan-template" type="text/x-handlebars-template">
  {{#each steps}}
    <li class="striped plan-step clearfix" data-mode="view">
    {{#each .}}
      <div class="plan-notification">
        <p class="item-content" title="{{ role }}" ><label class="item-label light">Role</label> {{ role }}</p>
        <p class="item-content" title="{{ target }}"><label class="item-label light">Target</label> {{ target }}</p>
        <p class="item-content" title="{{ priority }}"><label class="item-label light">Priority</label> {{ priority }}</p>
        <p class="item-content notification-wait" title="{{ secondsToMinutes wait }}"><label class="item-label light">Wait</label> {{ secondsToMinutes wait }} minutes</p>
        <p class="item-content notification-count" title="{{ add repeat 1 }}"><label class="item-label light">Count</label> {{ add repeat 1 }} times</p>
      </div>
    {{/each}}
  {{/each}}
  </li>
</script>
{% endraw %}
{% endblock %}
