{% extends "base.html" %}
{% block content %}
<div class="main plan-details"></div>


<!-- Modal for deleting this plan -->
<div class="modal fade" id="delete-plan-modal" tabindex="-1" role="dialog" aria-labelledby="delete-plan-modal-btn">
  <div class="modal-dialog" 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">Test plan</h4>
      </div>
      <div class="modal-body">
        Do you really want to delete this plan? This will only be successful if the plan has not yet been used in incidents or
        other areas.
      </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="delete-plan">Delete Plan</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal for publishing this plan -->
<div class="modal fade" id="publish-plan-modal" tabindex="-1" role="dialog" aria-labelledby="publish-plan">
  <div class="modal-dialog" 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">Publish Plan</h4>
      </div>
      <div class="modal-body">
        Publishing a plan will deactivate other plans with the same name. Proceed?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="publish-plan">Publish Plan</button>
      </div>
    </div>
  </div>
</div>
{% raw %}
<script id="plan-module-template" type="text/x-handlebars-template">
  <!-- Modal for creating a test incident out of this plan -->
  <div class="modal fade" id="test-plan-modal" tabindex="-1" role="dialog" aria-labelledby="test-plan-modal-btn">
    <div class="modal-dialog" 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">Test plan</h4>
        </div>
        <div class="modal-body">
          This will make a test incident for your plan.<hr>
          <div class="form-inline">
            <label for="test-plan-modal-application-select">Application: </label>
            <select id="test-plan-modal-application-select" class="form-control"></select>
          </div>
          {{#isEqual this.max_dynamic_index 0}}
          {{ else }}
            <br><h4>Dynamic targets:</h4>
            <div class="test-plan-dynamic-targets">
            {{#range max_dynamic_index}}
              <div class="test-plan-dynamic-target form-inline">
                <h5>Target {{this}}</h5>
                <p>
                  <label class="item-label light" for="test-plan-role-{{this}}">Role: </label>
                  <select class="form-control border-bottom" data-type="role" value="{{role}}">
                    {{#each @root.target_roles}}
                      <option value="{{this.name}}" {{isSelected this.name ../role}} data-url-type="{{this.type}}"> {{this.name}} </option>
                    {{/each}}
                  </select>
                </p>
                <p>
                  <label class="item-label light" for="test-plan-target-{{this}}">Target: </label>
                  <input type="text" class="form-control border-bottom typeahead unload-exclude"
                     placeholder="{{@root.target_role_type}} name" data-typeaheadtype="target"
                     data-targettype="{{@root.target_role_type}}">
                </p>
              </div>
            {{/range}}
            </div>
          {{/isEqual}}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" id="test-plan">Create Incident</button>
        </div>
      </div>
    </div>
  </div>
  {{#if viewMode}}
  <div class="module">
    <h3>
      {{name}} <i class="badge" data-active="{{active}}"> </i>
      <button type="button" class="btn btn-default blue btn-sm pull-right" id="clone-plan">Clone Plan</button>
      <button type="button" class="btn btn-default blue btn-sm pull-right" id="test-plan-modal-btn">Test Plan</button>
    </h3>
    <div class="form-inline version-container">
      <label for="version-select"><strong>Version:</strong></label>
      <select class="form-control border-bottom version-select">
        <!--// Version loads here -->
      </select>
      <i class="start-tour" data-toggle="tooltip" title="Learn about versioning.">?</i>
    </div>
    <!--// <span class="light italic"><small>created by <strong>{{creator}}</strong> at {{convertToLocal created}}</small></span> -->
    <div>{{description}}</div>
    <div id="aggregation">
      <h4>Aggregation <i class="glyphicon glyphicon-triangle-bottom"></i></h4>
      <div class="aggregation-content">
        If a user receives more than <strong>{{threshold_count}}</strong> messages from this plan via a given medium within <strong>{{divide threshold_window 60}}</strong> minutes, then group their messages for <strong>{{divide aggregation_window 60}}</strong> minutes. After <strong>{{divide aggregation_reset 60}}</strong> minutes without a message, aggregation stops.
      </div>
    </div>
  </div>
  {{else}}
  <div class="module">
    <h3>
      Create a plan <i class="badge" data-active="draft"> </i>
      <button type="button" class="btn btn-primary btn-sm pull-right" data-toggle="modal" data-target="#publish-plan-modal">Publish Plan</button>
      <button type="button" class="btn btn-danger btn-sm pull-right" data-toggle="modal" data-target="#delete-plan-modal">Delete Plan</button>
    </h3>
    <div class="toggle-input">
      <input type="checkbox" class="toggle-dynamic" id="toggle-dynamic-{{id}}" {{#if dynamic}} checked {{/if}}">
      <label for="toggle-dynamic-{{id}}" data-toggle="tooltip" title="A plan with dynamic targets lets you define a role and target at incident creation time instead of plan creation time. ">Dynamic Targets</label>
    </div>
    <input type="text" id="plan-name" class="form-control" placeholder="Enter a plan name" value="{{name}}">
    <textarea rows="3" id="plan-desc" class="form-control" placeholder="Briefly describe the plan">{{description}}</textarea>
    <div id="aggregation">
      <h4>Aggregation <i class="glyphicon glyphicon-triangle-bottom"></i></h4>
      <div class="aggregation-content">
        If a user receives more than <input type="text" id="threshold-count" class="form-control border-bottom" data-default="true" value="{{threshold_count}}"> messages from this plan via a given medium within <input type="text" id="threshold-window" class="form-control border-bottom" data-default="true" value="{{divide threshold_window 60}}"> minutes, then group their messages for <input type="text" id="aggregation-window" class="form-control border-bottom" data-default="true" value="{{divide aggregation_window 60}}"> minutes. After <input type="text" id="aggregation-reset" class="form-control border-bottom" data-default="true" value="{{divide aggregation_reset 60}}"> minutes without a message, aggregation stops.
      </div>
    </div>
  </div>
  {{/if}}

  <ol class="plan-steps module">
  {{#each steps}}
    {{>plan-step}}
  {{/each}}
  {{#unless viewMode}}
    <div id="add-step" class="add-btn">
      <h4><i class="icon-plus icon">+</i> Add plan step</h4>
    </div>
  {{/unless}}
  </ol>

  {{#if viewMode}}
    {{#if tracking_type}}
    <div id="tracking-notification" class="active module" data-view="true">
      <div class="tracking-inner">
        <h4>Incident Tracking</h4>
        <div class="light tracking-desc">
          <small>
            Incident tracking will send an tracking message to the target specified when this plan is triggered. The message will only be sent once per each application template added.
          </small>
        </div>
      </div>
      <div class="tracking-settings">
        <div class="tracking-target border-bottom border-top">
          <span class="item-content" title="{{ tracking_type }}">
            <label data-toggle="tooltip" title="Media type for the tracking message">Type: </label>
            <strong>{{ tracking_type }}</strong>
          </span>
          <span class="item-content" title="{{ tracking_key }}">
            <label data-toggle="tooltip" title="Target key for the tracking message">Target: </label>
            <strong>{{ tracking_key }}</strong>
          </span>
        </div>
        <ul class="template-steps">
          {{>plan-tracking-notification}}
        </ul>
      </div>
    </div>
    {{/if}}
  {{else}}
    <div id="tracking-notification" class="{{isActive tracking_type}} module" data-view="false">
      <div class="tracking-inner">
        <h4>Incident Tracking <i class="glyphicon glyphicon-triangle-bottom"></i></h4>
        <div class="light tracking-desc">
          <small>
            Incident tracking will send an tracking message to the target specified when this plan is triggered. The message will only be sent once per each application template added.
          </small>
        </div>
      </div>
      <div class="tracking-settings">
        <div class="tracking-target border-bottom border-top">
          <span class="item-content" title="{{ tracking_type }}">
            <label data-toggle="tooltip" title="Media type for the tracking message" class="required">Type:</label>
            <select id="tracking-type" class="form-control border-bottom" value="{{tracking_type}}">
              {{#each modes}}
                {{#isEqual this "call"}}
                  {{ else }}
                   <option value="{{this}}" {{isSelected this ../tracking_type}}>{{this}}</option>
                {{/isEqual}}
              {{/each}}
            </select>
          </span>
          <span class="item-content" title="{{ tracking_key }}">
            <label data-toggle="tooltip" title="Target key for the tracking message" class="required">Target:</label>
            <input type="text" id="tracking-key" class="form-control border-bottom" data-default="true" value="{{ tracking_key }}" placeholder="example@example.com">
          </span>
        </div>
        <ul class="template-steps">
          {{>plan-tracking-notification}}
          <div id="add-tracking-template" class="add-btn">
            <h4><i class="icon-plus icon">+</i> Add application tracking template</h4>
          </div>
        </ul>
      </div>
    </div>
  {{/if}}
</script>

<!--// Variables Partial -->
<script id="variables-template" type="text/x-handlebars-template">
<div class="variables">
  {{#if variables}}
  <span data-toggle="tooltip" title="Variables available for this application">Variables:</span>
    {{#each variables}}
      <span data-toggle="tooltip" title="This variable {{#if required }}will be present{{else}}might be empty{{/if}}" class="variable{{#if required }} variable-required{{/if}}">{{@key}}</span>
    {{/each}}
  {{/if}}
</div>
</script>

<!--// tracking templates partial -->
<script id="plan-tracking-notification-template" type="text/x-handlebars-template">
  {{#each tracking_template}}
  <li class="step tracking-template-step clearfix">
    <div class="template-header">
      {{#if @root.viewMode}}
        <label for="template-application">Application:</label>
        <strong>{{@key}}</strong>
      {{else}}
        <label for="template-application" class="required">Application:</label>
        <select class="form-control border-bottom template-application" name="template-application">
          <option value="">Pick an application</option>
          {{#each @root.applications}}
            <option value="{{name}}" {{isSelected name @../key}}>{{name}}</option>
          {{/each}}
        </select>
        <div class="remove-step remove-tracking-template light"> X </div>
      {{/if}}
    </div>

    <div class="template-body clearfix">
        {{>variables}}
        {{#if @root.viewMode}}
        <!--// view-only template-->
        {{#isEqual ../tracking_type 'email'}}
        <div class="template-notification" data-view="true" data-mode="email_subject">
          <div class="notification-header">Subject</div>
          <p class="notification-body">{{breakLines email_subject}}</p>
        </div>
        <div class="template-notification" data-view="true" data-mode="email_text">
          <div class="notification-header">Text</div>
          <pre class="notification-body">{{breakLines email_text}}</pre>
        </div>
        <div class="template-notification" data-view="true" data-mode="email_html">
          <div class="notification-header">HTML</div>
          <pre class="notification-body">{{breakLines email_html}}</pre>
        </div>
        {{/isEqual}}
        {{^isEqual ../tracking_type 'email'}}
        <div class="template-notification" data-view="true" data-mode="body">
          <div class="notification-header">Text</div>
          <pre class="notification-body">{{breakLines body}}</pre>
        </div>
        {{/isEqual}}
        {{else}}
        <!--// edit-mode template -->
        <div class="template-notification template-component" data-required="true" data-mode="email_subject">
          <div class="notification-header required">Subject</div>
          <input type="text" class="form-control notification-body" placeholder="e.g. The following nodes are active: {% for node in nodes %}* \{{node}} {% endfor %}." value="{{email_subject}}">
        </div>
        <div class="template-notification template-component" data-required="true" data-mode="email_text">
          <div class="notification-header required">Text</div>
          <textarea rows="10" class="form-control notification-body" placeholder="e.g. The following nodes are active: {% for node in nodes %}* \{{node}} {% endfor %}.">{{breakLines email_text 'input'}}</textarea>
        </div>
        <div class="template-notification template-component" data-mode="email_html">
          <div class="notification-header">HTML</div>
          <textarea rows="10" class="form-control notification-body" placeholder="e.g. The following nodes are active: {% for node in nodes %}* \{{node}} {% endfor %}.">{{breakLines email_html 'input'}}</textarea>
        </div>
        <div class="template-notification template-component" data-required="true" data-mode="body">
          <div class="notification-header required">Text</div>
          <textarea rows="10" class="form-control notification-body" placeholder="e.g. The following nodes are active: {% for node in nodes %}* \{{node}} {% endfor %}.">{{breakLines body 'input'}}</textarea>
        </div>
        <!--// TODO: support preview -->
        </div>
        {{/if}}
  </li>
  {{/each}}
</script>

<!--// step partial -->
<script id="plan-step-template" type="text/x-handlebars-template">
  {{#if @root.viewMode}}
    <li class="striped plan-step clearfix" data-mode="view">
  {{else}}
    <li class="striped plan-step clearfix" draggable="true" data-mode="edit">
      <div class="remove-step light"> X </div>
  {{/if}}
    <div class="plan-step-time">
      Step time:<br>
      <span class="step-time">1</span> minutes
    </div>
  {{#each .}}
    {{>plan-notification}}
  {{/each}}
  {{#unless @root.viewMode}}
    <div class="plan-notification-add">
      <i class="icon-plus icon">+</i> Add Notification
    </div>
  {{/unless}}
  </li>
</script>

<!--// notification partial -->
<script id="plan-notification-template" type="text/x-handlebars-template">
{{#if @root.viewMode}}
  <div class="plan-notification {{ priority }}" data-mode="view">
  <!--// view-only template-->
    {{#isEqual dynamic_index null}}
      <p class="item-content" title="{{ role }}" ><label class="item-label light" data-toggle="tooltip" title="Role for target">Role</label> {{ role }}</p>
      <p class="item-content" title="{{ target }}"><label class="item-label light" data-toggle="tooltip" title="Target of role - e.g. 'Manager of SRE-INFRA'">Target</label> {{ target }}</p>
    {{else}}
      <p class="item-content dynamic-index" title="{{ dynamic_index }}" ><label class="item-label light" data-toggle="tooltip" title="Dynamic target number">Target No.</label> {{ dynamic_index }}</p>
    {{/isEqual}}
    <p class="item-content" title="{{ priority }}"><label class="item-label light" data-html="true" data-toggle="tooltip" title="Type of notification sent. Defaults: <br /> Urgent - Phone Call <br /> High - SMS <br /> Medium - Email <br /> Low - Email <br /> ( These can be changed in the settings page )">Priority</label> {{ priority }}</p>
    <p class="item-content notification-wait" title="{{ secondsToMinutes wait }}"><label class="item-label light" data-toggle="tooltip" title="Minimum time that must elapse before repeating or moving onto the next escalation step.">Wait</label> {{ secondsToMinutes wait }} minutes</p>
    <p class="item-content notification-count" title="{{ count }}"><label class="item-label light" data-toggle="tooltip" title="Number of times to execute this notification before escalating to next step">Count</label> {{ count }} times</p>
    <p class="item-content" title="{{ template }}"><label class="item-label light" data-toggle="tooltip" title="Content to use for the notification">Template</label> <a href="/templates/{{template}}">{{ template }}</a></p>
    <p class="item-content" title="{{ optional }}"> <label class="item-label light" data-toggle="tooltip" title="If set to true, this notification won't generate an alert if it fails to find a valid target.">Optional</label> {{#if optional }}Yes{{else}}No{{/if}}</p>
  </div>
{{else}}
  <div draggable="true" class="plan-notification" data-mode="edit" data-dynamic="{{#if dynamic}}1{{else}}0{{/if}}" id="notification-{{id}}">
  <!--// edit-mode template -->
    <div class="plan-notification-remove"> X </div>
    <p class="notification-static">
      <label class="item-label light" data-toggle="tooltip" title="Role for target">Role</label>
      <select class="form-control border-bottom" data-type="role" value="{{role}}">
        {{#each @root.target_roles}}
          <option value="{{this.name}}" {{isSelected this.name ../role}} data-url-type="{{this.type}}"> {{this.name}} </option>
        {{/each}}
      </select>
    </p>
    <p class="notification-static">
      <label class="item-label light" data-toggle="tooltip" title="Target of role - e.g. 'Manager of SRE-INFRA'">Target</label>
      <input type="text" class="form-control border-bottom typeahead"
             placeholder="{{target_role_type}} name" data-type="target"
             value="{{target}}" data-url-type="{{target_role_type}}">
    </p>
    <p class="notification-dynamic">
      <label class="item-label light" data-toggle="tooltip" title="0-indexed number assigned to a dynamic target. Notifications with the same target index will be sent to the same person.">Target No.</label>
      <input type="number" class="form-control border-bottom" placeholder="Target index" data-type="dynamic_index" value="{{dynamic_index}}" min="0">
    </p>
    <p>
      <label class="item-label light" data-html="true" data-toggle="tooltip" title="Type of notification sent. Defaults: <br /> Urgent - Phone Call <br /> High - SMS <br /> Medium - Email <br /> Low - Email <br /> ( These can be changed in the settings page )">Priority</label>
      <select class="form-control border-bottom" data-type="priority" value={{priority}}>
        {{#each @root.priorities}}
        <option value="{{this.name}}" {{isSelected this.name ../priority}}>{{this.name}}</option>
        {{/each}}
      </select>
    </p>
    <p>
      <label class="item-label light" data-toggle="tooltip" title="Minutes to wait before repeating or moving onto the next escalation step">Wait</label>
      <input type="number" class="form-control border-bottom notification-wait" placeholder="Wait minutes" data-type="wait" data-default="true" value="{{ secondsToMinutes wait}}">
    </p>
    <p>
      <label class="item-label light" data-toggle="tooltip" title="Number of times to execute this notification before escalating to next step">Count</label>
      <input type="number" class="form-control border-bottom notification-count" placeholder="# of times" data-type="count" value="{{count}}" min="1">
    </p>
    <p>
      <label class="item-label light" data-toggle="tooltip" title="Content to use for the notification">Template</label>
      <select class="content-template form-control border-bottom" data-type="template">
        {{#each @root.availableTemplates}}
          <option value="{{this}}" {{isSelected this ../template}}>{{this}}</option>
        {{/each}}
      </select>
    </p>
    <p>
      <label class="item-label light" data-toggle="tooltip" title="If set to true, this notification won't generate an alert if it fails to find a valid target.">Optional</label>
      <select class="content-template form-control border-bottom" data-type="optional">
          <option value="1" {{# if optional}}selected{{/if}}>Yes</option>
          <option value="0" {{# unless optional}}selected{{/unless}}>No</option>
      </select>
    </p>
  </div>
{{/if}}
</script>
{% endraw %}
{% endblock %}
