{% extends "base.html" %}
{% block content %}

{% raw %}

<!--// **********************
  Browse teams Page
*********************** //-->

<script id="browse-teams-template" type="text/x-handlebars-template">
  <div class="main container-fluid clearfix">
    <h2>Browse Teams</h2>
    <section class="card-wrap-alt col-4">
      {{#each this}}
        {{>browse-card}}
      {{/each}}
    </section>
  </div>
</script>

<!-- // Browse card partial -->
<script id="browse-card-template" type="text/x-handlebars-template">
  <div class="module module-card card-column">
    <div class="module-heading module-card-heading border-bottom">
      <h3 class="light uppercase">
        {{key}}
      </h3>
    </div>
    <ul class="module-card-inner">
      {{#each items}}
        <li><a href="/team/{{this}}" data-navigo>{{this}}</a></li>
      {{/each}}
    </ul>
  </div>
</script>

<!--// **********************
  Dashboard Page
*********************** //-->

<script id="dashboard-template" type="text/x-handlebars-template">
  {{#if error}}
    {{>error-page this}}
  {{else}}
    <div class="subheader">
      <div class="container-fluid" id="user-details">
        <img class="headshot-large pull-left placeholder" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="user">
        <div class="pull-left">
          <h3>
            <span class="user-details-name">
              <span class="placeholder"></span>
            </span>
          </h3>
          <h4 class="user-details-email">
            <span class="placeholder"></span>
          </h4>
        </div>
      </div>
    </div>
    <div class="main container-fluid clearfix">
      <section class="pull-left col-md-12 col-left-edge card-wrap col-3">
        {{#if data}}
          {{#each data}}
            <div class="module module-card dashboard-card card-column" data-team="{{this}}">
              <div class="module-heading module-card-heading border-bottom">
                <h4>
                  <span>
                    <a href="/team/{{this}}" data-navigo>{{this}}</a>
                  </span>
                </h4>
              </div>
              <div class="dashboard-card-inner">
                <i class="loader"></i>
              </div>
            </div>
          {{/each}}
        {{else}}
          <div class="module module-card">
            You are not part of any teams.
          </div>
        {{/if}}
      </section>
    </div>
  {{/if}}
</script>

<!-- // Dashboard card inner partial -->
<script id="dashboard-card-inner-template" type="text/x-handlebars-template">
  <ul class="card-inner-wrapper">
    {{#each data}}
      {{#ifNotEmpty this}}
        <span class="subheading light">{{@key}}</span>
        {{#each this}}
          {{#each this}}
          <li class="card-inner border-bottom" data-card-name="{{full_name}}">
            <img class="card-picture" src="{{defaultPhoto photo_url}}" alt="{{full_name}}">
            <h4><strong>{{full_name}}</strong> <span class="badge pull-right" data-role="{{role}}">{{role}}</span></h4>
            <div class="light"><a href="mailto:{{user_contacts.email}}">{{user_contacts.email}}</a></div>
            <span class="light"><a href="tel:{{user_contacts.call}}">{{user_contacts.call}}</a></span>
            <ul class="border-top card-content">
              <li class="small light">{{convertUnixTime start}} - {{convertUnixTime end}}</li>
            </ul>
          </li>
          {{/each}}
        {{/each}}
      {{/ifNotEmpty}}
    {{/each}}
    <a class="btn btn-blue card-btn" href="/team/{{name}}" data-navigo> View Team Calendar </a>
  </ul>
</script>

<!--// **********************
  Search Page
*********************** //-->

<script id="search-template" type="text/x-handlebars-template">
  <div class="subheader search">
    <form class="container-fluid main-search">
      <h1>What are you looking for?</h1>
      <div class="search-wrapper">
        <span class="search-input-wrapper">
          <input type="text" class="form-control search-input typeahead" placeholder="Search for teams or services" />
          <i class="loader loader-small"></i>
        </span>
        <button id="submit-search" class="btn btn-white">Search</button>
      </div>
    </form>
  </div>
  <div class="main container-fluid">
    <ul class="search-results">
    </ul>
    {{#if this.pinned}}
      <div class="landing-teams" id="pinned-teams">
        <h3>Pinned Teams</h3>
        <div class="card-wrap col-3">
          {{#each this.pinned}}
          <div class="module module-card dashboard-card card-column" data-team="{{this}}">
            <div class="module-card-heading border-bottom">
              <h4>
                <span>
                  <a href="/team/{{this}}" data-navigo>{{this}}</a>
                </span>
              </h4>
              <span class="remove-card-column">
                <i class="svg-icon grey-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
                    <path d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" />
                  </svg>
                </i>
              </span>
            </div>
            <div class="dashboard-card-inner">
              <i class="loader"></i>
            </div>
          </div>
          {{/each}}
        </div>
      </div>
      {{/if}}
      {{#if this.recent}}
      <div class="landing-teams" id="recent-teams">
        <h3>Recently Viewed Teams</h3>
        <div class="card-wrap col-3">
          {{#each this.recent}}
          <div class="module module-card dashboard-card card-column" data-team="{{this}}">
            <div class="module-card-heading border-bottom">
              <h4>
                <span>
                  <a href="/team/{{this}}" data-navigo>{{this}}</a>
                </span>
              </h4>
            </div>
            <div class="dashboard-card-inner">
              <i class="loader"></i>
            </div>
          </div>
          {{/each}}
        </div>
      </div>
    {{/if}}
  </div>
</script>

<!--// search results partial -->
<script id="search-results-template" type="text/x-handlebars-template">
  {{#if noResults}}
    <ul class="search-module">
      <h4>No teams, services, or users found</h4>
    </ul>
  {{else}}
    {{#ifExists teams}}
      <h3>Teams</h3>
      {{#if teams}}
        <ul class="search-module">
          {{#each teams}}
            <li class="result">
              <h4>
                <a href="/team/{{this}}" data-navigo>{{this}}</a>
              </h4>
            </li>
          {{/each}}
        </ul>
      {{else}}
        <ul class="search-module">
          <h4>No teams found</h4>
        </ul>
      {{/if}}
    {{/ifExists}}
    {{#ifExists services}}
      <h3>Services</h3>
      {{#ifNotEmpty services}}
        <div class="search-module">
          <table>
            <thead>
              <th> Team </th>
              <th> Services </th>
            </thead>
            {{#each services}}
              <tr>
                <td class="result"><h4> <a href="/team/{{@key}}" data-navigo>{{@key}} </a> </h4></td>
                <td>
                {{#each this.list}}
                  <li data-service-name="{{this}}" title="{{this}}">
                    <span>{{this}}</span>
                  </li>
                {{/each}}
                {{#isGreaterThan this.total 5}}
                  <li><a href="/team/{{@key}}/info" data-navigo> View all {{this.total}} services &raquo; </a></li>
                {{/isGreaterThan}}
                </td>
              </tr>
            {{/each}}
          </table>
        </div>
      {{else}}
        <ul class="search-module">
          <h4>No services found</h4>
        </ul>
      {{/ifNotEmpty}}
    {{/ifExists}}


    {{#ifExists users}}
      <h3>Users</h3>
      {{#if users}}
      <div class="search-module">
        <table>
          <thead>
            <th> Username </th>
            <th> Full name </th>
          </thead>
          {{#each users}}
            <tr>
              <td class="result"><h4> <a href="/dashboard/{{this.name}}" data-navigo>{{this.name}} </a> </h4></td>
              <td><h4> <p data-navigo>{{this.full_name}} </p> </h4></td>
            </tr>
          {{/each}}
        </table>
      </div>
      {{else}}
        <ul class="search-module">
          <h4>No users found</h4>
        </ul>
      {{/if}}
    {{/ifExists}}

  {{/if}}
</script>

<!--// landing teams partial -->
<script id="landing-teams-inner-template" type="text/x-handlebars-template">
  <ul class="card-inner-wrapper">
    {{#ifNotEmpty data.current.primary}}
      <span class="subheading light">On Call Now</span>
      <li class="card-inner border-bottom" data-card-name="{{data.current.primary.0.full_name}}">
        <img class="card-picture" src="{{defaultPhoto data.current.primary.0.photo_url}}" alt="{{data.current.primary.0.full_name}}">
        <h4><strong><a class="landing-teams-name" target="_blank" href="mailto:{{data.current.primary.0.user_contacts.email}}">{{data.current.primary.0.full_name}}</a></strong> <span class="badge pull-right" data-role="{{data.current.primary.0.role}}">{{data.current.primary.0.role}}</span></h4>

        {{#if data.current.primary.0.user_contacts.call}}
          <span class="light"><a href="tel:{{data.current.primary.0.user_contacts.call}}">{{data.current.primary.0.user_contacts.call}}</a></span>
        {{else}}
          <span class="error-text">No phone number found!</span>
        {{/if}}
        <ul class="border-top card-content">
          <li class="small light">{{convertUnixTime data.current.primary.0.start}} - {{convertUnixTime data.current.primary.0.end}}</li>
        </ul>
      </li>
    {{else}}
      <div style="text-align:center;">No on call data found</div>
    {{/ifNotEmpty}}
  </ul>
</script>

<!--// **********************
  Team Subheader Partial
*********************** //-->

<script id="team-subheader-template" type="text/x-handlebars-template">
  <div class="subheader">
    <div class="container-fluid">
      <div class="pull-left">
        {{#isEqual page "info"}}
          <h3>
            {{name}}
            <span class="edit-team-name">
              <i class="svg-icon svg-icon-pencil" data-toggle="modal" data-target="#team-edit-modal" data-modal-action="oncall.team.updateTeamName" data-modal-title="Update Team Info" data-modal-name="{{#if name}}{{name}}{{else}}{{@key}}{{/if}}" data-modal-email="{{email}}" data-modal-slack="{{slack_channel}}" data-modal-timezone="{{scheduling_timezone}}" data-modal-irisplan="{{iris_plan}}" data-modal-iris-enabled="{{iris_enabled}}" data-modal-override-phone="{{override_phone_number}}" data-admin-action="true">
                <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 8 8" style="fill: currentColor">
                  <path d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z" />
                </svg>
              </i>
            </span>
          </h3>
        {{else}}
          <h3>{{name}}</h3>
        {{/isEqual}}
        <h4>
          {{#if email}}
            <a target="_blank" href="mailto:{{email}}">{{email}}</a>
          {{else}}
            No Email
          {{/if}}
        </h4>
        {% endraw %} {% if slack_instance %} {% raw %}
        <h4>
          {{#if slack_channel}}
            <a href="https://{% endraw %}{{slack_instance}}{% raw %}.slack.com/messages/{{stripHash slack_channel}}/" target="_blank">{{slack_channel}}</a>
          {{else}}
            No Slack Channel
          {{/if}}
        </h4>
        {% endraw %} {% endif %} {% raw %}
      </div>
      <div class="pull-right">
        <span data-admin-action="true">
        {{#isEqual page "info"}}
          <button id="#delete-team" class="btn btn-white" data-toggle="modal" data-target="#confirm-action-modal" data-modal-action="oncall.team.deleteTeam" data-modal-title="Delete {{name}}" data-modal-content="Delete {{name}}?"> Delete team </button>
          <button class="btn btn-white add-roster-btn" data-toggle="modal" data-target="#input-modal" data-modal-action="oncall.team.info.addRoster" data-modal-title="Add roster" data-modal-placeholder="Roster Name"> Add roster </button>
        {{/isEqual}}
        </span>
        <span>
          <button id="pin-team" class="btn btn-white" data-toggle="modal" data-target="#confirm-action-modal" data-modal-action="oncall.team.pinTeam" data-modal-title="Pin {{name}}" data-modal-content="Pin {{name}} to landing page?"> Pin to home </button>
        </span>
      </div>
    </div>
  </div>
  <nav class="subnav">
    <ul class="container-fluid">
      <li {{#isEqual page "calendar"}}class="active"{{/isEqual}} href="/team/{{name}}" data-navigo> Calendar </li>
      <li {{#isEqual page "info"}}class="active"{{/isEqual}} href="/team/{{name}}/info" data-navigo> Team Info </li>
      <li data-admin-action="true" {{#isEqual page "schedules"}}class="active"{{/isEqual}} href="/team/{{name}}/schedules" data-navigo> Schedule Templates </li>
      <li data-admin-action="true" {{#isEqual page "subscriptions"}}class="active"{{/isEqual}} href="/team/{{name}}/subscriptions" data-navigo> Subscriptions </li>
      <li data-admin-action="true" {{#isEqual page "audit"}}class="active"{{/isEqual}} href="/team/{{name}}/audit" data-navigo> Audit </li>
      {{#isEqual page "calendar"}}
        <span class="timezone-display-container pull-right">
          Display Timezone:
          <span class="timezone-display dark"></span>
          <i class="svg-icon svg-icon-question" data-toggle="modal" data-target="#calendar-timezone-modal" title="Learn about calendar timezones">
            <svg xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 10 10">
              <path d="M2.47 0c-.85 0-1.48.26-1.88.66-.4.4-.54.9-.59 1.28l1 .13c.04-.25.12-.5.31-.69.19-.19.49-.38 1.16-.38.66 0 1.02.16 1.22.34.2.18.28.4.28.66 0 .83-.34 1.06-.84 1.5-.5.44-1.16 1.08-1.16 2.25v.25h1v-.25c0-.83.31-1.06.81-1.5.5-.44 1.19-1.08 1.19-2.25 0-.48-.17-1.02-.59-1.41-.43-.39-1.07-.59-1.91-.59zm-.5 7v1h1v-1h-1z"
              transform="translate(2)" />
            </svg>
          </i>
        </span>
      {{/isEqual}}
      {{#isEqual page "schedules"}}
        <span class="timezone-display-container pull-right">
          Team Scheduling Timezone: <span class="dark">{{scheduling_timezone}}</span>
          <i class="svg-icon svg-icon-question" data-toggle="modal" data-target="#scheduling-timezone-modal" title="Learn about scheduling timezones">
            <svg xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 10 10">
              <path d="M2.47 0c-.85 0-1.48.26-1.88.66-.4.4-.54.9-.59 1.28l1 .13c.04-.25.12-.5.31-.69.19-.19.49-.38 1.16-.38.66 0 1.02.16 1.22.34.2.18.28.4.28.66 0 .83-.34 1.06-.84 1.5-.5.44-1.16 1.08-1.16 2.25v.25h1v-.25c0-.83.31-1.06.81-1.5.5-.44 1.19-1.08 1.19-2.25 0-.48-.17-1.02-.59-1.41-.43-.39-1.07-.59-1.91-.59zm-.5 7v1h1v-1h-1z"
              transform="translate(2)" />
            </svg>
          </i>
        </span>
      {{/isEqual}}
    </ul>
  </nav>
</script>

<!--// **********************
  Team.calendar Page
*********************** //-->

<script id="team-calendar-template" type="text/x-handlebars-template">
  {{#if error}}
    {{>error-page this}}
  {{else}}
    <div class="subheader-wrapper">
      {{>team-subheader name=name page="calendar"}}
    </div>
    <div class="main container-fluid">
      <div class="col-md-3 col-left-edge">
        <div id="oncall-now-container">
          <!--// oncall now render here -->
        </div>
        <div id="calendar-types-container">
          <!--// calendar types render here -->
        </div>
        {{#each rosters}}
          <div class="card-column">
            <div class="module module-card module-top-edge" data-col-name="{{#if name}}{{name}}{{else}}{{@key}}{{/if}}">
              <div class="module-heading module-card-heading border-bottom">
                <h4>
                  <span>
                    {{#if name}}
                      {{name}}
                    {{else}}
                      {{@key}}
                    {{/if}}
                  </span>
                </h4>
              </div>
              <ul class="card-inner-wrapper">
                {{#each users}}
                  {{>card-inner-slim}}
                {{/each}}
              </ul>
            </div>
          </div>
        {{/each}}
      </div>
      <div class="col-md-9 col-right-edge">
        <div class="module" id="calendar-container">
          <!--// calendar renders here -->
        </div>
        <div class="calendar-tip">
          <i class="svg-icon svg-icon-info">
            <svg xmlns="http://www.w3.org/2000/svg" width="22px" height="22px" viewBox="0 0 8 8" style="fill: #ffc41e">
              <path d="M3 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-1.5 2.5c-.83 0-1.5.67-1.5 1.5h1c0-.28.22-.5.5-.5s.5.22.5.5-1 1.64-1 2.5c0 .86.67 1.5 1.5 1.5s1.5-.67 1.5-1.5h-1c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-.36 1-1.84 1-2.5 0-.81-.67-1.5-1.5-1.5z" transform="translate(2)" />
            </svg>
          </i>
          Tip: Click and drag on calendar dates to create a new event or <a href="#" data-toggle="modal" data-target="#override-details-modal">substitute an existing event</a>.
        </div>
      </div>
    </div>
    <!--// Override explanation modal -->
    <div class="modal fade" id="override-details-modal" tabindex="-1" role="dialog" aria-labelledby="override-details">
      <div class="modal-dialog" role="document">
        <form class="modal-form modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">Substitute an event</h4>
          </div>
          <div class="modal-body">
            Use event substitution to override an existing event with your new event. <br />Toggling the substitute option on will provide a list of events of the same role within the time frame specified. <br />Check the event ( or events if they are consecutive ) you want to override and Oncall will split the existing event[s] for you.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </form>
      </div>
    </div>
    <!--// timezone explanation modal -->
    <div class="modal fade" id="calendar-timezone-modal" tabindex="-1" role="dialog" aria-labelledby="calendar-timezone">
      <div class="modal-dialog" role="document">
        <form class="modal-form modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">Calendar Timezones</h4>
          </div>
          <div class="modal-body">
            The calendar timezone is set at the user level and what all current events are displayed in. It is also used when creating or editing events on the calendar. If no timezone is set by the user, it will default to system time. <br /><br />
            The calendar timezone can be set on the user settings page ( click on your avatar > settings ).
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </form>
      </div>
    </div>
  {{/if}}
</script>

<!--// Card inner slim partial -->
<script id="card-inner-slim-template" type="text/x-handlebars-template">
  <li class="card-inner card-inner-slim" data-card-name="{{this.name}}" data-collapsed="true">
    <img class="card-picture-small" src="{{getUserInfo this @root.users 'photo_url'}}" alt="{{getUserInfo this @root.users 'full_name'}}">
    <span class="card-inner-user">
      <strong>{{getUserInfo this @root.users 'full_name'}}</strong>
    </span>
    {{#unless this.in_rotation}}
      <span class="badge badge-gray pull-right">Out Of Rotation</span>
    {{/unless}}
    <div class="light small">
      <i class="svg-icon svg-icon-chevron svg-icon-chevron-down pull-right">
        <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 10 10" style="fill: currentColor">
          <path d="M1.5 0l-1.5 1.5 4 4 4-4-1.5-1.5-2.5 2.5-2.5-2.5z" transform="translate(0 1)" />
        </svg>
      </i>
      <i class="svg-icon svg-icon-chevron svg-icon-chevron-up pull-right">
        <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 10 10" style="fill: currentColor">
          <path d="M4 0l-4 4 1.5 1.5 2.5-2.5 2.5 2.5 1.5-1.5-4-4z" transform="translate(0 1)" />
        </svg>
      </i>
      Call:
      {{#isEqual 'Unknown' (getUserInfo this @root.users 'contacts.call') }}
        {% endraw %}
          {{missing_number_note|safe}}
        {% raw %}
      {{else}}
        <a href="tel:{{getUserInfo this @root.users 'contacts.call'}}"> {{getUserInfo this @root.users 'contacts.call'}} </a>
      {{/isEqual}}
      <ul class="card-inner-extra">
        <li>
          SMS:
          {{#isEqual 'Unknown' (getUserInfo this @root.users 'contacts.sms') }}
            {% endraw %}
              {{missing_number_note|safe}}
            {% raw %}
          {{else}}
            <a href="tel:{{getUserInfo this @root.users 'contacts.sms'}}"> {{getUserInfo this @root.users 'contacts.sms'}} </a>
          {{/isEqual}}
        </li>
        <li> Slack: <a>{{getUserInfo this @root.users 'contacts.slack'}}</a> </li>
        <li> E-Mail: <a target="_blank" href="mailto:{{getUserInfo this @root.users 'contacts.email'}}"> {{getUserInfo this @root.users 'contacts.email'}} </a> </li>
      </ul>
    </div>
  </li>
</script>

<!--// Show types on calendar partial -->
<script id="calendar-types-template" type="text/x-handlebars-template">
  <div class="module module-card calendar-types module-top-edge">
    <div class="module-heading module-card-heading border-bottom">
      <h4>Show on calendar</h4>
    </div>
    <ul>
    {{#each this.roles}}
      <li>
        <input type="checkbox" id="show-{{this.name}}" data-type="{{this.name}}"
        value="{{this.name}}" {{#inArray this.name ../currentViewRoles}} checked {{/inArray}}>
        <label for="show-{{this.name}}">{{this.name}}</label>
        <span class="color-swatch" data-type="{{this.name}}"></span>
      </li>
    {{/each}}
    </ul>
  </div>
</script>

<!--// On call now partial -->
<script id="card-oncall-template" type="text/x-handlebars-template">
  <div class="module module-card module-top-edge">
    <div class="module-heading module-card-heading border-bottom text-actions" id="oncall-now-heading">
      <h4>On Call Now </h4>
      {{#if showEscalate}}
      <span class="pull-right" data-toggle="modal" data-target="#team-escalate-modal" id="escalate-btn">
        <svg class="svg-icon grey-icon magic" xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 10 10">
          <path d="M4 0c-1.1 0-2 .9-2 2 0 1.04-.52 1.98-1.34 2.66-.41.34-.66.82-.66 1.34h8c0-.52-.24-1-.66-1.34-.82-.68-1.34-1.62-1.34-2.66 0-1.1-.89-2-2-2zm-1 7c0 .55.45 1 1 1s1-.45 1-1h-2z" />
        </svg>
        Escalate
      </span>
      {{/if}}
    </div>
    <ul>
      {{#if oncallNow}}
        {{#each oncallNow}}
          {{#each this}}
          <li class="card-inner card-inner-slim border-bottom" data-card-name="{{full_name}}" data-collapsed="{{#ifExists collapsed}}{{collapsed}}{{else}}true{{/ifExists}}">
            <img class="card-picture-small" src="{{defaultPhoto photo_url}}" alt="{{full_name}}">
            <span class="card-inner-user">
              <strong>{{full_name}}</strong>
            </span>
            <span class="badge pull-right" data-role="{{role}}">{{role}}</span>
            <ul class="card-inner-extra light small">
              <li> Call: {{#if user_contacts.call}} <a href="tel:{{user_contacts.call}}"> {{user_contacts.call}} </a> {{else}} <span class="error-text">No number found!</span> {{/if}} </li>
              <li> SMS: {{#if user_contacts.sms}} <a href="tel:{{user_contacts.sms}}"> {{user_contacts.sms}} </a> {{else}} <span class="error-text">No number found!</span> {{/if}} </li>
              <li> Slack: <a>{{user_contacts.slack}}</a> </li>
              <li> E-Mail: <a target="_blank" href="mailto:{{user_contacts.email}}"> {{user_contacts.email}} </a> </li>
            </ul>
            <ul class="border-top card-content">
              <li class="small light">
                {{ convertUnixTime start}}  - <br> {{convertUnixTime end}}
                <i class="svg-icon svg-icon-chevron svg-icon-chevron-down pull-right">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 10 10" style="fill: currentColor">
                    <path d="M1.5 0l-1.5 1.5 4 4 4-4-1.5-1.5-2.5 2.5-2.5-2.5z" transform="translate(0 1)" />
                  </svg>
                </i>
                <i class="svg-icon svg-icon-chevron svg-icon-chevron-up pull-right">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 10 10" style="fill: currentColor">
                    <path d="M4 0l-4 4 1.5 1.5 2.5-2.5 2.5 2.5 1.5-1.5-4-4z" transform="translate(0 1)" />
                  </svg>
                </i>
              </li>
            </ul>
          </li>
          {{/each}}
        {{/each}}
      {{else}}
        <li> No one is on call. </li>
      {{/if}}
    </ul>
  </div>
  <!-- Team Escalation modal -->
  <div class="modal fade" id="team-escalate-modal" tabindex="-1" role="dialog" aria-labelledby="team-escalate">
    <div class="modal-dialog" role="document">
      <form class="modal-form modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title">Escalate</h4>
        </div>
        <div class="modal-body">
          <p>
            Escalating to the team will trigger an Iris incident with the provided description below, with your name
            associated as the requester. This incident will trigger an escalation following the Iris plan configured
            for this team, which is currently: <b>{{ iris_plan }}.</b>
          </p>
          <p>
            <label class="light" for="escalate-plan"> Escalation Plan: </label>
            <select name="from" class="form-control" id="escalate-plan">
              {{#if custom_plan}}
                <option value="custom">{{custom_plan}}</option>
              {{/if}}
              <option value="medium">{{medium_plan}}</option>
              <option value="urgent">{{urgent_plan}}</option>
            </select>
          <p id="escalate-plan-description">
          </p>
          </p>

          <p>
            <label class="light" for="escalate-description"> Description: </label>
            <textarea name="escalate_description" id="escalate-description" class="form-control" placeholder="Description"></textarea>
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary modal-cta" id="escalate-btn" data-dismiss="modal"><span class="btn-text">Escalate</span> <i class="loader loader-small"></i></button>
        </div>
      </form>
    </div>
  </div>
</script>

<!--// **********************
  Team.Audit Page
*********************** //-->
<script id="team-audit-template" type="text/x-handlebars-template">
  {{#if error}}
    {{>error-page this}}
  {{else}}
    <div class="subheader-wrapper">
      {{>team-subheader name=name page="audit"}}
    </div>
    <div class="main container-fluid">
      <h3 class="module-heading"> Audit </h3>
      <div class="module">
        <div>
         <label class="light"> Audit from: </label><input type="text" id="audit-date" class="form-control" placeholder="YYYY/MM/DD">
                  <button type="button" class="btn btn-primary" id="refresh-audit-btn"> <span class="btn-text">Refresh Data</span> <i class="loader loader-small"></i> </button>
                </div>

        <table class="audit-table display">
          <thead>
            <tr>
              <th> Timestamp
                <i class="svg-icon grey-icon sort-icon sort">
                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14">
                  <path d="M8 8.5q0 0.203-0.148 0.352l-3.5 3.5q-0.148 0.148-0.352 0.148t-0.352-0.148l-3.5-3.5q-0.148-0.148-0.148-0.352t0.148-0.352 0.352-0.148h7q0.203 0 0.352 0.148t0.148 0.352zM8 5.5q0 0.203-0.148 0.352t-0.352 0.148h-7q-0.203 0-0.352-0.148t-0.148-0.352 0.148-0.352l3.5-3.5q0.148-0.148 0.352-0.148t0.352 0.148l3.5 3.5q0.148 0.148 0.148 0.352z"></path>
                  </svg>
                </i>
                <i class="svg-icon grey-icon sort-icon sort-asc">
                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="14" viewBox="0 0 8 14">
                    <path d="M8 5.5q0 0.203-0.148 0.352t-0.352 0.148h-7q-0.203 0-0.352-0.148t-0.148-0.352 0.148-0.352l3.5-3.5q0.148-0.148 0.352-0.148t0.352 0.148l3.5 3.5q0.148 0.148 0.148 0.352z"></path>
                  </svg>
                </i>
                <i class="svg-icon grey-icon sort-icon sort-desc">
                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="14" viewBox="0 0 8 14">
                    <path d="M8 8.5q0 0.203-0.148 0.352l-3.5 3.5q-0.148 0.148-0.352 0.148t-0.352-0.148l-3.5-3.5q-0.148-0.148-0.148-0.352t0.148-0.352 0.352-0.148h7q0.203 0 0.352 0.148t0.148 0.352z"></path>
                  </svg>
                </i>
              </th>
              <th> Owner
                <i class="svg-icon grey-icon sort-icon sort">
                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14">
                  <path d="M8 8.5q0 0.203-0.148 0.352l-3.5 3.5q-0.148 0.148-0.352 0.148t-0.352-0.148l-3.5-3.5q-0.148-0.148-0.148-0.352t0.148-0.352 0.352-0.148h7q0.203 0 0.352 0.148t0.148 0.352zM8 5.5q0 0.203-0.148 0.352t-0.352 0.148h-7q-0.203 0-0.352-0.148t-0.148-0.352 0.148-0.352l3.5-3.5q0.148-0.148 0.352-0.148t0.352 0.148l3.5 3.5q0.148 0.148 0.148 0.352z"></path>
                  </svg>
                </i>
                <i class="svg-icon grey-icon sort-icon sort-asc">
                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="14" viewBox="0 0 8 14">
                    <path d="M8 5.5q0 0.203-0.148 0.352t-0.352 0.148h-7q-0.203 0-0.352-0.148t-0.148-0.352 0.148-0.352l3.5-3.5q0.148-0.148 0.352-0.148t0.352 0.148l3.5 3.5q0.148 0.148 0.148 0.352z"></path>
                  </svg>
                </i>
                <i class="svg-icon grey-icon sort-icon sort-desc">
                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="14" viewBox="0 0 8 14">
                    <path d="M8 8.5q0 0.203-0.148 0.352l-3.5 3.5q-0.148 0.148-0.352 0.148t-0.352-0.148l-3.5-3.5q-0.148-0.148-0.148-0.352t0.148-0.352 0.352-0.148h7q0.203 0 0.352 0.148t0.148 0.352z"></path>
                  </svg>
                </i>
              </th>
              <th> Action
                <i class="svg-icon grey-icon sort-icon sort">
                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14">
                  <path d="M8 8.5q0 0.203-0.148 0.352l-3.5 3.5q-0.148 0.148-0.352 0.148t-0.352-0.148l-3.5-3.5q-0.148-0.148-0.148-0.352t0.148-0.352 0.352-0.148h7q0.203 0 0.352 0.148t0.148 0.352zM8 5.5q0 0.203-0.148 0.352t-0.352 0.148h-7q-0.203 0-0.352-0.148t-0.148-0.352 0.148-0.352l3.5-3.5q0.148-0.148 0.352-0.148t0.352 0.148l3.5 3.5q0.148 0.148 0.148 0.352z"></path>
                  </svg>
                </i>
                <i class="svg-icon grey-icon sort-icon sort-asc">
                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="14" viewBox="0 0 8 14">
                    <path d="M8 5.5q0 0.203-0.148 0.352t-0.352 0.148h-7q-0.203 0-0.352-0.148t-0.148-0.352 0.148-0.352l3.5-3.5q0.148-0.148 0.352-0.148t0.352 0.148l3.5 3.5q0.148 0.148 0.148 0.352z"></path>
                  </svg>
                </i>
                <i class="svg-icon grey-icon sort-icon sort-desc">
                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="14" viewBox="0 0 8 14">
                    <path d="M8 8.5q0 0.203-0.148 0.352l-3.5 3.5q-0.148 0.148-0.352 0.148t-0.352-0.148l-3.5-3.5q-0.148-0.148-0.148-0.352t0.148-0.352 0.352-0.148h7q0.203 0 0.352 0.148t0.148 0.352z"></path>
                  </svg>
                </i>
              </th>
              <th> Context
                <i class="svg-icon grey-icon sort-icon sort">
                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14">
                  <path d="M8 8.5q0 0.203-0.148 0.352l-3.5 3.5q-0.148 0.148-0.352 0.148t-0.352-0.148l-3.5-3.5q-0.148-0.148-0.148-0.352t0.148-0.352 0.352-0.148h7q0.203 0 0.352 0.148t0.148 0.352zM8 5.5q0 0.203-0.148 0.352t-0.352 0.148h-7q-0.203 0-0.352-0.148t-0.148-0.352 0.148-0.352l3.5-3.5q0.148-0.148 0.352-0.148t0.352 0.148l3.5 3.5q0.148 0.148 0.148 0.352z"></path>
                  </svg>
                </i>
                <i class="svg-icon grey-icon sort-icon sort-asc">
                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="14" viewBox="0 0 8 14">
                    <path d="M8 5.5q0 0.203-0.148 0.352t-0.352 0.148h-7q-0.203 0-0.352-0.148t-0.148-0.352 0.148-0.352l3.5-3.5q0.148-0.148 0.352-0.148t0.352 0.148l3.5 3.5q0.148 0.148 0.148 0.352z"></path>
                  </svg>
                </i>
                <i class="svg-icon grey-icon sort-icon sort-desc">
                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="14" viewBox="0 0 8 14">
                    <path d="M8 8.5q0 0.203-0.148 0.352l-3.5 3.5q-0.148 0.148-0.352 0.148t-0.352-0.148l-3.5-3.5q-0.148-0.148-0.148-0.352t0.148-0.352 0.352-0.148h7q0.203 0 0.352 0.148t0.148 0.352z"></path>
                  </svg>
                </i>
              </th>
            </tr>
          </thead>
          <tbody>
          {{#each this.audits}}
            <tr>
              <td> {{this.timestamp}} </td>
              <td> {{this.owner}} </td>
              <td> {{this.action}} </td>
              <td class="audit-context">{{this.context}}</td>
            </tr>
          {{/each}}
          </tbody>
        </table>
      </div>
    </div>
{{/if}}
</script>

<!--// **********************
  Team.subscriptions Page
*********************** //-->
<script id="team-subscriptions-template" type="text/x-handlebars-template">
  {{#if error}}
    {{>error-page this}}
  {{else}}
    <div class="subheader-wrapper">
      {{>team-subheader name=name page="subscriptions"}}
    </div>
    <div class="main container-fluid">
      <h3 class="module-heading"> Subscriptions <button id="add-subscription" class="btn btn-primary pull-right">+ New Subscription</button></h3>
      <div class="add-subscription-container">
        <!--// create form renders here -->
      </div>
      <div class="module module-subscriptions-container">
        <h4 class="module-heading border-bottom"> You have <span class="subscription-count"> 0 </span> subscriptions </h4>
        <div class="module-subscriptions-wrapper clearfix" data-type="subscription">
          {{#each this.subscriptions}}
            {{>module-subscription viewType="schedule-item"}}
          {{/each}}
        </div>
      </div>
    </div>
{{/if}}
</script>

<script id="module-subscription-template" type="text/x-handlebars-template">
  <div class="module module-card module-subscription" data-role="{{role}}" data-team="{{subscription}}">
    <ul class="subscription-details">
      <li>
        <label class="light label-col">Team:</label>
        <span class="data-col">{{subscription}}</span>
      </li>
      <li>
        <label class="light label-col">Role:</label>
        <span class="data-col">{{role}} </span>
      </li>
    </ul>
    <div class="subscription-actions border-top">
        <span class="delete-{{viewType}}" data-toggle="modal" data-target="#confirm-action-modal" data-modal-action="oncall.team.subscriptions.deleteSubscription" data-modal-title="Delete subscription" data-modal-content="Delete subscription to {{role}} events from {{subscription}}?">
          <i class="svg-icon svg-icon-trash grey-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 8 8">
              <path d="M3 0c-.55 0-1 .45-1 1h-1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1h-1c0-.55-.45-1-1-1h-1zm-2 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19v-4.81h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1z" />
            </svg>
          </i>
        Delete
      </span>
    </div>
  </div>
</script>

<!-- subscription create partial -->
<script id="module-subscription-create-template" type="text/x-handlebars-template">
  <form class="module module-card module-subscription-create" >
    <div class="module-heading module-card-heading border-bottom">
      <h4>
          Create a new subscription
      </h4>
    </div>
    <div class="subscription-create-body">
        Add
          <select name="from" class="form-control subscription-role">
            {{#each roles}}
              <option value="{{this.name}}" {{isSelected ../selected_subscription.role this.name}}>
                {{this.name}}
              </option>
            {{/each}}
          </select>
        events from the
        <span id="subscription-team-container">
          <input type="text" class="form-control typeahead subscription-team" placeholder="Team" data-type="teams" />
        </span>
        calendar to this team's calendar.
    <div class="border-top subscription-actions clearfix">
      <div class="pull-right">
        <button id="save-subscription" class="btn btn-primary" type="submit"><span class="btn-text">Save</span> <i class="loader loader-small"></i> </button>
        <button class="btn btn-blue delete-subscription" type="button" data-toggle="modal" data-target="#confirm-action-modal" data-modal-action="oncall.team.subscriptions.deleteSubscriptionItem" data-modal-title="Your changes are unsaved" data-modal-content="Aborting now will lose unsaved changes."> Cancel </button>
      </div>
    </div>
  </form>
</script>

<!--// **********************
  Team.schedules Page
*********************** //-->

<script id="team-schedules-template" type="text/x-handlebars-template">
  {{#if error}}
    {{>error-page this}}
  {{else}}
    <div class="subheader-wrapper">
      {{>team-subheader name=name page="schedules"}}
    </div>
    <div class="main container-fluid clearfix">
      <h4 class="clearfix module-heading">
        <div class="pull-right">
          <button id="add-schedule" class="btn btn-primary">+ New Schedule</button>
        </div>
      </h4>
      <div class="add-schedule-container">
      </div>
      <div class="module schedule-container" data-collapsed="false">
        <h4 class="module-heading border-bottom">
          You have <span class="schedule-count"> 0 </span> schedules
          <i class="svg-icon svg-icon-question" data-toggle="modal" data-target="#schedule-details-modal" title="Learn about schedules">
            <svg xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 10 10">
              <path d="M2.47 0c-.85 0-1.48.26-1.88.66-.4.4-.54.9-.59 1.28l1 .13c.04-.25.12-.5.31-.69.19-.19.49-.38 1.16-.38.66 0 1.02.16 1.22.34.2.18.28.4.28.66 0 .83-.34 1.06-.84 1.5-.5.44-1.16 1.08-1.16 2.25v.25h1v-.25c0-.83.31-1.06.81-1.5.5-.44 1.19-1.08 1.19-2.25 0-.48-.17-1.02-.59-1.41-.43-.39-1.07-.59-1.91-.59zm-.5 7v1h1v-1h-1z"
              transform="translate(2)" />
            </svg>
          </i>
          <span class="toggle-schedule-view pull-right">
            <i class="svg-icon svg-icon-chevron svg-icon-chevron-down pull-right">
              <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 10 10" style="fill: currentColor">
                <path d="M1.5 0l-1.5 1.5 4 4 4-4-1.5-1.5-2.5 2.5-2.5-2.5z" transform="translate(0 1)" />
              </svg>
            </i>
            <i class="svg-icon svg-icon-chevron svg-icon-chevron-up pull-right">
              <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 10 10" style="fill: currentColor">
                <path d="M4 0l-4 4 1.5 1.5 2.5-2.5 2.5 2.5 1.5-1.5-4-4z" transform="translate(0 1)" />
              </svg>
            </i>
          </span>
        </h4>
        <div class="module-schedule-wrapper clearfix">
        {{#each rosters}}
            {{#each schedules}}
              {{>module-schedule}}
            {{/each}}
        {{/each}}
        </div>
      </div>
      <div class="module" id="calendar-container">
        <!--// calendar renders here -->
      </div>
    </div>
    <!--// Schedules explanation modal -->
    <div class="modal fade" id="schedule-details-modal" tabindex="-1" role="dialog" aria-labelledby="schedule-details">
      <div class="modal-dialog" role="document">
        <form class="modal-form modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">How scheduling works</h4>
          </div>
          <div class="modal-body">
            A schedule defines how future events should be populated on the calendar based on existing rosters. The current scheduler tries to pick the team member who has not been oncall the longest as the owner of the next event. The scheduler also takes all existing future events, for example vacations, into account to avoid creating conflicting events. <br /><br />
            We have a background job that checks all the schedules every hour and populates the team calendar for the number of days specified in the "Auto Populate Threshold" setting.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </form>
      </div>
    </div>
    <!--// Scheduling timezone modal -->
    <div class="modal fade" id="scheduling-timezone-modal" tabindex="-1" role="dialog" aria-labelledby="schedule-timezone">
      <div class="modal-dialog" role="document">
        <form class="modal-form modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">Team Scheduling Timezones</h4>
          </div>
          <div class="modal-body">
            The scheduling timezone is determined by the team timezone selected when the team is created. This timezone is used by the scheduler when populating the calendar and IS NOT related to the individual user timezones used on the calendar page.<br /><br />
            Note: You can edit the team timezone by going to team info > clicking the pencil icon. Please note changing this timezone will affect all events created by the scheduler for the entire team.
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </form>
      </div>
    </div>

    <!--// Populate schedule modal  -->
    <div class="modal fade" id="populate-schedule-modal" tabindex="-1" role="dialog" aria-labelledby="populate-schedule">
      <div class="modal-dialog" role="document">
        <form class="modal-form modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">Populate Schedule</h4>
          </div>
          <div class="modal-body">
            <div class="clearfix">
              <div class="pull-left">
                <p>Populating the calendar will re-run the scheduler and generate events from the selected start date onwards. Note: Only existing events generated by this schedule ( highlighted below ) will be replaced. Events generated by other schedules will not be affected.</p>
                <div>
                  <label class="light">Populate threshold:</label> <span id="populate-schedule-threshold"></span>
                </div>
                <div>
                  <label class="light"> Populate start time: </label><input type="text" id="populate-schedule-date" class="form-control" placeholder="YYYY/MM/DD">
                  <button type="button" class="btn btn-primary" id="populate-schedule-btn"> <span class="btn-text">Populate</span> <i class="loader loader-small"></i> </button>
                  <button type="button" class="btn btn-blue" id="preview-schedule-btn"> <span class="btn-text">Preview</span> <i class="loader loader-small"></i> </button>
                </div>
              </div>
            </div>
            <div id="modal-calendar-container" class="border-top"> <i class="loader loader-small"></i> </div>
          </div>
        </form>
      </div>
    </div>
  {{/if}}
</script>

<!-- // schedule view partial -->
<script id="module-schedule-template" type="text/x-handlebars-template">
  <div class="module module-card module-schedule" data-role="{{role}}" data-roster="{{roster}}" data-advanced="{{advanced_mode}}" data-id="{{id}}" data-model="{{stringify this}}">
    <ul class="schedule-details">
      <li>
        <label class="light label-col">ID:</label>
        <span class="data-col schedule-id">{{id}}</span>
      </li>
      <li>
        <label class="light label-col">Roster:</label>
        <span class="data-col schedule-roster">{{roster}}</span>
      </li>
      <li>
        <label class="light label-col">Role:</label>
        <span class="data-col schedule-role">{{role}}</span>
      </li>
      <li>
        <label class="light label-col" title="Auto Populate Threshold">Threshold:</label>
        <span class="data-col schedule-auto-populate-threshold">{{auto_populate_threshold}} Days</span>
      </li>
      <li>
        <label class="light label-col">Rotation:</label>
        <ul class="data-col schedule-rotation">
          {{#if is_12_hr}}
            {{#isEqual events.length 7}}
              {{timeSince events.[0].start 'toString'}} - Weekly (12 hr)
            {{else}}
              {{timeSince events.[0].start 'toString'}} - Bi-Weekly (12 hr)
            {{/isEqual}}
          {{else}}
            {{#if advanced_mode}}
              {{#each events}}
                {{timeSince start 'toString'}} - {{timeSince end 'toString'}}<br />
              {{/each}}
            {{else}}
              {{#isEqual events.[0].duration 604800000}}
                {{timeSince events.[0].start 'toString'}} - Weekly
              {{else}}
                {{timeSince events.[0].start 'toString'}} - Bi-Weekly
              {{/isEqual}}
            {{/if}}
          {{/if}}
        </ul>
      </li>
      <li>
        <label class="light label-col" title="Scheduler">Scheduler:</label>
        <span class="data-col schedule-algorithm">{{friendlyScheduler scheduler.name}}</span>
      </li>
    </ul>
    <div class="schedule-actions text-actions">
      <span class="populate-schedule pull-left" data-toggle="modal" data-target="#populate-schedule-modal">
        <i class="svg-icon svg-icon-cal grey-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 8 8">
            <path d="M0 0v2h7v-2h-7zm0 3v4.91c0 .05.04.09.09.09h6.81c.05 0 .09-.04.09-.09v-4.91h-7zm1 1h1v1h-1v-1zm2 0h1v1h-1v-1zm2 0h1v1h-1v-1zm-4 2h1v1h-1v-1zm2 0h1v1h-1v-1z" />
          </svg>
        </i>
        Populate
      </span>
      <span class="edit-schedule-item pull-right">
        <i class="svg-icon svg-icon-pencil grey-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="13px" height="13px" viewBox="0 0 8 8">
            <path d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z" />
          </svg>
        </i>
        Edit
      </span>
    </div>
  </div>
</script>

<!-- // schedule create partial -->
<script id="module-schedule-create-template" type="text/x-handlebars-template">
  <form class="module module-card module-schedule-create" data-advanced="{{#ifExists selected_schedule}}{{selected_schedule.advanced_mode}}{{else}}0{{/ifExists}}" {{#if selected_schedule.id}} data-edit-id="{{selected_schedule.id}}" {{/if}} {{#if selected_schedule.role}} data-role="{{selected_schedule.role}}" {{/if}} data-scheduler="{{#if selected_schedule.scheduler}}{{selected_schedule.scheduler.name}}{{else}}default{{/if}}" {{#if selected_schedule.scheduler.data}}  data-schedule-data="{{stringify selected_schedule.scheduler.data}}"{{/if}}>
    <div class="module-heading module-card-heading border-bottom">
      <h4>
        {{#if selected_schedule.id}}
          Edit schedule {{selected_schedule.id}}
        {{else}}
          Create a new schedule
        {{/if}}
        <div class="pull-right">
          <div class="toggle-input pull-right">
            <input type="checkbox" class="toggle-advanced" id="toggle-advanced-{{selected_schedule.id}}" {{#if selected_schedule.advanced_mode}} checked {{/if}}>
            <label for="toggle-advanced-{{selected_schedule.id}}">Advanced</label>
          </div>
        </div>
      </h4>
    </div>
    <div class="clearfix">
      <div class="schedule-details col-md-9">
        <div class="schedule-row clearfix">
          <div class="col-md-4">
            <label class="label-col">Role:</label>
            <span class="data-col">
              <select name="from" class="form-control schedule-role">
                {{#each roles}}
                  <option value="{{this.name}}" {{isSelected ../selected_schedule.role this.name}}>
                    {{this.name}}
                  </option>
                {{/each}}
              </select>
            </span>
          </div>
          <div class="col-md-4">
            <label class="label-col">Roster:</label>
            <span class="data-col">
              <select name="from" class="form-control schedule-roster">
                {{#each rosters}}
                  <option value="{{@key}}" {{isSelected ../selected_schedule.roster @key}}>{{@key}}</option>
                {{/each}}
              </select>
            </span>
          </div>
          <div class="col-md-4">
            <label class="label-col">Auto Populate Threshold (days):</label>
            <br>
            <span class="data-col">
              <input type="number" class="form-control auto-populate-threshold" value="{{#ifExists selected_schedule.auto_populate_threshold}}{{selected_schedule.auto_populate_threshold}}{{else}}21{{/ifExists}}" placeholder="Days">
            </span>
          </div>
        </div>
        <div class="schedule-row clearfix">
          <ul class="schedule-basic">
            {{#if selected_schedule.events}}
              {{#if selected_schedule.is_12_hr}}
                {{>rotation-item selected_schedule.events.[0] simple=true is_12_hr=true}}
              {{else}}
                {{>rotation-item selected_schedule.events.[0] simple=true}}
              {{/if}}
            {{else}}
              {{>rotation-item simple=true}}
            {{/if}}
          </ul>
          {{#unless selected_schedule.advanced_mode}}
            <div class="schedule-row schedule-is-12-hr clearfix">
              <input type="checkbox" id="twelve-hour" {{#if selected_schedule.is_12_hr}} checked {{/if}}>
              <label for="twelve-hour">Limit shifts to 12 hours</label>
            </div>
          {{/unless}}
          <ul class="schedule-advanced">
            {{#if selected_schedule.events}}
              {{#each selected_schedule.events}}
                {{>rotation-item this}}
              {{/each}}
            {{else}}
              {{>rotation-item}}
            {{/if}}
            <div class="schedule-row">
              <span class="add-rotation-item light col-md-4">
                <i class="svg-icon svg-icon-plus grey-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 8 8"><path d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z" /></svg>
                </i>
                Add another row
              </span>
            </div>
          </ul>
        </div>
      </div>
      <div class="schedule-algo col-md-3">
        <label class="label-col">Scheduling Algorithms:</label>
        <br>
        <select name="from" class="form-control schedule-algorithm" id="schedule-algorithm">
          <option value="default" {{isSelected 'default' selected_schedule.scheduler.name}}> Default </option>
          <option value="round-robin" {{isSelected 'round-robin' selected_schedule.scheduler.name}}> Round-robin </option>
          <option value="no-skip-matching" {{isSelected 'no-skip-matching' selected_schedule.scheduler.name}}> Default (allow duplicate) </option>
        </select>
        <div class="scheduler-type-container light">
          <!-- scheduler specific data renders here -->
        </div>
      </div>
    </div>
    <div class="border-top schedule-actions">
      <div class="pull-right">
        <button class="btn btn-primary preview-schedule" type="button"> Preview </button>
        <button class="btn btn-primary" type="submit" id="save-schedule"><span class="btn-text">Save</span> <i class="loader loader-small"></i> </button>
        <button class="btn btn-blue delete-schedule-item" type="button" data-toggle="modal" data-target="#confirm-action-modal" data-modal-action="oncall.team.schedules.deleteScheduleItem" data-modal-title="Your changes are unsaved" data-modal-content="Aborting now will lose unsaved changes."> Cancel </button>
      </div>
      <div class="pull-left">
        {{#if selected_schedule.id}}
          <button class="btn btn-danger" type="button" data-toggle="modal" data-target="#confirm-action-modal" data-modal-action="oncall.team.schedules.deleteScheduleItem" data-modal-title="Delete schedule {{selected_schedule.id}}" data-schedule-id="{{selected_schedule.id}}" data-modal-content="Delete schedule {{selected_schedule.id}}?"> Delete </button>
        {{/if}}
      </div>
    </div>
  </form>
</script>

<!-- // rotation item partial -->
<script id="rotation-item-template" type="text/x-handlebars-template">
  <li class="rotation-item clearfix">
    <div class="col-md-2">
      <label for="rotation-start-day">Start day:</label>
      <br>
      <select name="from" class="form-control rotation-start-day" id="rotation-start-day">
        <option data-index="0" {{isSelected startDayIndex 0}}>Sunday</option>
        <option data-index="1" {{isSelected startDayIndex 1}}>Monday</option>
        <option data-index="2" {{isSelected startDayIndex 2}}>Tuesday</option>
        <option data-index="3" {{isSelected startDayIndex 3}}>Wednesday</option>
        <option data-index="4" {{isSelected startDayIndex 4}}>Thursday</option>
        <option data-index="5" {{isSelected startDayIndex 5}}>Friday</option>
        <option data-index="6" {{isSelected startDayIndex 6}}>Saturday</option>
      </select>
    </div>
    <div class="col-md-2">
      <label for="rotation-start-time">Time:</label>
      <br>
      <input class="form-control rotation-start-time" value="{{startTime}}" maxlength="5" placeholder="HH:MM" id="rotation-start-time">
    </div>
    {{#if simple}}
      <div class="col-md-4">
        <label>Rotate:</label>
        <br>
        <select name="time" class="form-control rotation-end-duration">
          <option value="7" {{#if totalEvents}} {{isSelected totalEvents 7}} {{else}} {{isSelected duration 7}} {{/if}}>Weekly</option>
          <option value="14" {{#if totalEvents}} {{isSelected totalEvents 14}} {{else}} {{isSelected duration 14}} {{/if}}>Bi-Weekly</option>
        </select>
      </div>
    {{else}}
      <div class="col-md-2">
        <label>Duration:</label>
        <br>
        <input type="number" class="form-control rotation-end-val" value="{{#if duration}}{{duration}}{{else}}1{{/if}}">
      </div>
      <div class="col-md-5">
        <label></label>
        <br>
        <select name="time" class="form-control rotation-end-duration">
          <option value="minutes" {{isSelected durationUnit "minutes"}}>Minutes</option>
          <option value="hours" {{isSelected durationUnit "hours"}}>Hours</option>
          <option value="days"  {{isSelected durationUnit "days"}} {{#unless duration}}selected{{/unless}}>Days</option>
          <option value="weeks" {{isSelected durationUnit "weeks"}}>Weeks</option>
        </select>
        <span class="remove-rotation-item light">
          <i class="svg-icon svg-icon-close grey-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 8 8" style="fill:currentColor">
              <path d="M1.41 0l-1.41 1.41.72.72 1.78 1.81-1.78 1.78-.72.69 1.41 1.44.72-.72 1.81-1.81 1.78 1.81.69.72 1.44-1.44-.72-.69-1.81-1.78 1.81-1.81.72-.72-1.44-1.41-.69.72-1.78 1.78-1.81-1.78-.72-.72z" />
            </svg>
          </i>
        </span>
      </div>
    {{/if}}
  </li>
</script>

<!-- //****
      Scheduler algorithm templates
      ***** -->

<!-- // default-scheduler-template -->
<script id="default-scheduler-template" type="text/x-handlebars-template">
  The default scheduler prioritizes users who haven't been on-call for the longest period of time. It respects conflicting events on the team's calendar as well (for example, it will not schedule someone to be on-call if that user has a vacation marked).
</script>

<!-- // round-robin-scheduler-template -->
<script id="round-robin-scheduler-template" type="text/x-handlebars-template">
  Determines employee order
  <div class="round-robin-scheduler">
    Set Order <span class="light">(Drag to reorder)</span>
    <ul class="draggable">
      {{#each this}}
        <li draggable="true" data-user="{{this}}">
          <svg aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="bars" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-bars fa-w-14"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z" class=""></path></svg>
          {{this}}
        </li>
      {{/each}}
    </ul>
  </div>
</script>

<!-- allow-duplicate scheduler template -->
<script id="allow-duplicate-scheduler-template" type="text/x-handlebars-template">
  The Default (allow duplicate) scheduler uses the same algorithm as Default, but allows more than one user to be on-call at the same time for a given role. This lets you have duplicate primary events across several schedule templates.
</script>

<!--// **********************
  Team.info Page
*********************** //-->

<script id="team-info-template" type="text/x-handlebars-template">
  {{#if error}}
    {{>error-page this}}
  {{else}}
    <div class="subheader-wrapper">
      {{>team-subheader name=name page="info"}}
    </div>
    <div class="main container-fluid clearfix team-info">
      <aside class="pull-left col-md-3 col-left-edge">
          <div class="module module-card" data-col-name="admins">
            <div class="module-heading module-card-heading border-bottom">
              <span class="light"> Admin </span>
            </div>
            <ul class="card-inner-wrapper">
            {{#if admins}}
              {{#each admins}}
                {{>card-inner}}
              {{/each}}
            {{/if}}
            </ul>
            {{>add-card-item buttonText="+ add admin" placeholder="Username"}}
          </div>
          <div class="module module-card" data-col-name="services">
            <div class="module-heading module-card-heading border-bottom">
              <span class="light"> Services </span>
            </div>
            <ul class="card-inner-wrapper services-inner">
            {{#if services}}
              {{#each services}}
                {{>service-item}}
              {{/each}}
            {{/if}}
            </ul>
            <!--// {{>add-card-item buttonText="+ add a service" placeholder="Service name" type="services"}} -->
          </div>
      </aside>
      <section class="pull-left col-md-9 col-left-edge card-wrap">
        {{#each rosters}}
          {{>card-column}}
        {{/each}}
        <div class="card-column" data-admin-action="true">
          <div class="module module-card">
            <div class="module-heading module-card-heading border-bottom">
              <h4>
                <span class="card-heading">
                  Add a new roster
                </span>
              </h4>
            </div>
            <button class="btn btn-blue card-btn add-roster" data-toggle="modal" data-target="#input-modal" data-modal-action="oncall.team.info.addRoster" data-modal-title="Add roster" data-modal-placeholder="Roster Name"> + add roster </button>
          </div>
        </div>
      </section>
    </div>
  {{/if}}
</script>

<!--// card column partial -->
<script id="card-column-template" type="text/x-handlebars-template">
  <div class="card-column">
    <div class="module module-card" data-col-name="{{#if name}}{{name}}{{else}}{{@key}}{{/if}}">
      <div class="module-heading module-card-heading border-bottom">
        <span class="remove-card-column" data-admin-action="true" data-toggle="modal" data-target="#confirm-action-modal" data-modal-action="oncall.team.info.removeRoster" data-modal-title="Delete roster" data-modal-content="Delete {{#if name}}{{name}}{{else}}{{@key}}{{/if}} roster?">
          <i class="svg-icon svg-icon-trash grey-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 8 8">
              <path d="M3 0c-.55 0-1 .45-1 1h-1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1h-1c0-.55-.45-1-1-1h-1zm-2 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19v-4.81h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1z" />
            </svg>
          </i>
        </span>
        <span class="light card-subheading">Roster</span>
        <h4>
          <span class="card-heading">
            {{#if name}}
              {{name}}
            {{else}}
              {{@key}}
            {{/if}}
          </span>
          <i class="svg-icon svg-icon-pencil grey-icon edit-card-heading" data-admin-action="true" data-toggle="modal" data-target="#input-modal" data-modal-action="oncall.team.info.updateRosterName" data-modal-title="Update Roster Name" data-modal-placeholder="Roster name" data-modal-val="{{#if name}}{{name}}{{else}}{{@key}}{{/if}}">
            <svg xmlns="http://www.w3.org/2000/svg" width="13px" height="13px" viewBox="0 0 8 8">
              <path d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z" />
            </svg>
          </i>
        </h4>
      </div>
      <ul class="card-inner-wrapper">
        {{#if users}}
          {{#each users}}
            {{>card-inner}}
          {{/each}}
        {{/if}}
      </ul>
      {{>add-card-item buttonText="+ add team member" placeholder="Username"}}
    </div>
  </div>
</script>

<!--// card inner template partial -->
<script id="card-inner-template" type="text/x-handlebars-template">
  {{#if newItem}}
    <li class="card-inner border-bottom" data-card-name="{{user.name}}">
      <img class="card-picture" src="{{defaultPhoto user.photo_url}}" alt="{{user.name}}">
      <strong class="card-inner-user"> {{user.full_name}} </strong>
      {{#unless admin}}
        <button class="badge toggle-rotation pull-right" data-in-rotation="true"> <span class="active-text">In Rotation</span> <span class="inactive-text">Out Of Rotation</span> </button>
      {{/unless}}
      <ul class="border-top card-content">
        <li> <a target="_blank" href="mailto:{{user.contacts.email}}"> {{user.contacts.email}} </a> </li>
        <li> <span class="light"> Call </span> {{#if user.contacts.call}} <a href="tel:{{user.contacts.call}}" target="_blank"> {{user.contacts.call}} </a> {{else}} <span class="error-text">No number found!</span> {{/if}} </li>
        <li> <span class="light"> SMS </span> {{#if user.contacts.sms}} <a href="tel:{{user.contacts.sms}}" target="_blank"> {{user.contacts.sms}} </a> {{else}} <span class="error-text">No number found!</span> {{/if}} </li>
        <li> <span class="light"> Slack </span> <a> {{user.contacts.slack}} </a> </li>
        <span class="close remove-card-item" data-admin-action="true" data-toggle="modal" data-target="#confirm-action-modal" data-modal-action="oncall.team.info.removeCardItem" data-modal-title="Remove {{user.full_name}}" data-modal-content="Delete {{user.full_name}} from roster?">
          <i class="svg-icon svg-icon-trash">
            <svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 8 8">
              <path d="M3 0c-.55 0-1 .45-1 1h-1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1h-1c0-.55-.45-1-1-1h-1zm-2 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19v-4.81h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1z" />
            </svg>
          </i>
        </span>
      </ul>
    </li>
  {{else}}
    <li class="card-inner border-bottom" data-card-name="{{this.name}}">
      <img class="card-picture" src="{{getUserInfo this @root.users 'photo_url'}}" alt="{{getUserInfo this @root.users 'full_name'}}">
      <strong class="card-inner-user"> {{getUserInfo this @root.users 'full_name'}} </strong>
      {{#ifExists this.in_rotation}}
        <button class="badge toggle-rotation pull-right" data-in-rotation="{{this.in_rotation}}"> <span class="active-text">In Rotation</span> <span class="inactive-text">Out Of Rotation</span> </button>
      {{/ifExists}}
      <ul class="border-top card-content">
        <li> <a target="_blank" href="mailto:{{getUserInfo this @root.users 'contacts.email'}}"> {{getUserInfo this @root.users 'contacts.email'}} </a> </li>
        <li>
          <span class="light"> Call </span>
          {{#isEqual 'Unknown' (getUserInfo this @root.users 'contacts.call') }}
            {% endraw %}
              {{missing_number_note|safe}}
            {% raw %}
          {{else}}
            <a href="tel:{{getUserInfo this @root.users 'contacts.call'}}"> {{getUserInfo this @root.users 'contacts.call'}} </a>
          {{/isEqual}}
        </li>
        <li>
          <span class="light"> SMS </span>
          {{#isEqual 'Unknown' (getUserInfo this @root.users 'contacts.sms') }}
            {% endraw %}
              {{missing_number_note|safe}}
            {% raw %}
          {{else}}
            <a href="tel:{{getUserInfo this @root.users 'contacts.sms'}}"> {{getUserInfo this @root.users 'contacts.sms'}} </a>
          {{/isEqual}}
        </li>
        <li> <span class="light"> Slack </span> <a> {{getUserInfo this @root.users 'contacts.slack'}} </a></li>
        <span class="close remove-card-item" data-admin-action="true" data-toggle="modal" data-target="#confirm-action-modal" data-modal-action="oncall.team.info.removeCardItem" data-modal-title="Remove {{getUserInfo this @root.users 'full_name'}}" data-modal-content="Delete {{getUserInfo this @root.users 'full_name'}} from roster?">
          <i class="svg-icon svg-icon-trash">
            <svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 8 8">
              <path d="M3 0c-.55 0-1 .45-1 1h-1c-.55 0-1 .45-1 1h7c0-.55-.45-1-1-1h-1c0-.55-.45-1-1-1h-1zm-2 3v4.81c0 .11.08.19.19.19h4.63c.11 0 .19-.08.19-.19v-4.81h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1v3.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-3.5h-1z" />
            </svg>
          </i>
        </span>
      </ul>
    </li>
  {{/if}}
</script>

<!--// add card item partial -->
<script id="add-card-item-template" type="text/x-handlebars-template">
  <div class="add-item-wrapper" data-view="button" data-admin-action="true">
    <button class="btn btn-blue card-btn add-card-item"> {{buttonText}} </button>
    <form class="add-item-form">
      <span class="error-text"></span>
      <input type="text" name="add-item-name" class="form-control add-item-name typeahead" placeholder="{{placeholder}}" data-type="{{type}}" />
      <div class="add-item-actions">
        <button type="button" class="btn btn-blue cancel-card-item"> Cancel </button>
        <button class="btn btn-primary save-card-item"> <span class="btn-text">Add</span> <i class="loader loader-small"></i></button>
      </div>
    </form>
  </div>
</script>

<!--// add service item partial -->
<script id="service-item-template" type="text/x-handlebars-template">
  <li class="pill" data-service-name="{{this}}" title="{{this}}">
    <span>{{this}}</span>
  </li>
</script>

<!--// **********************
  Settings Subheader Partial
*********************** //-->

<script id="settings-subheader-template" type="text/x-handlebars-template">
  <div class="subheader">
    <div class="container-fluid">
      <h3>User Settings</h3>
    </div>
  </div>
  <nav class="subnav">
    <ul class="container-fluid">
      <li {{#isEqual page "settings"}}class="active"{{/isEqual}} href="/user/{{username}}" data-navigo> Settings </li>
      <li {{#isEqual page "notifications"}}class="active"{{/isEqual}} href="/user/{{username}}/notifications" data-navigo> Notifications </li>
    </ul>
  </nav>
</script>

<!--// **********************
  Settings Page
*********************** //-->

<script id="settings-template" type="text/x-handlebars-template">
  <div class="subheader-wrapper">
    {{>settings-subheader username=name page="settings"}}
  </div>
  <div class="main container-fluid">
{% endraw %}
    {{user_setting_note|safe}}
{% raw %}
    <form class="module clearfix" id="user-settings-form">
      <table width="100%">
        <tr>
          <td>Profile Picture</td>
          <td>
            <span class="profile-picture">
              <img class="headshot" src="{{defaultPhoto photo_url}}" alt="{{name}}">
            </span>
          </td>
        </tr>
        <tr>
          <td>Name</td>
          <td>
            <span>{{full_name}}</span>
          </td>
        </tr>
        <tr>
          <td>Display Timezone</td>
          <td>
            <select class="form-control" name="time_zone">
              {{#each timezones}}
                <option value="{{this}}" {{isSelected ../time_zone this}}>{{this}}</option>
              {{/each}}
            </select>
          </td>
        </tr>
        {{#each contactmodes}}
        <tr>
          <td>{{label}}</td>
          <td>
            <span>
            {% endraw %} {% if usercontact_ui_readonly %} {% raw %}
              {{#inArray mode ../telmodes}}
                  {{#if value}}
                    <a href="tel:{{value}}"> {{value}} </a>
                  {{else}}
                    {% endraw %}
                      {{missing_number_note|safe}}
                    {% raw %}
                  {{/if}}
              {{/inArray}}
              {{^inArray mode ../telmodes}}
                <span>{{value}}</span>
              {{/inArray}}
            {% endraw %} {% else %} {% raw %}
                <input type="text" name="contactmode-{{mode}}" id="{{mode}}" class="form-control" value="{{value}}" />
            {% endraw %} {% endif %} {% raw %}
            </span>
          </td>
        </tr>
        {{/each}}
      </table>
      <button type="submit" id="save-settings" class="btn btn-primary btn-sm pull-right"><span class="btn-text">Save Changes</span> <i class="loader loader-small"></i></button>
    </form>
  </div>
</script>

<!--// **********************
  Notifications Page
*********************** //-->

<script id="notifications-template" type="text/x-handlebars-template">
  <div class="subheader-wrapper">
    {{>settings-subheader username=name page="notifications"}}
  </div>
  <div class="main container-fluid">
    <h3 class="module-heading"> Reminders <button id="add-reminder" class="btn btn-primary pull-right">+ New Reminder</button></h3>
    <div class="reminder-create-container">
      <!--// create form renders here -->
    </div>
    <div class="module module-notifications-container">
      <h4 class="module-heading border-bottom"> You have <span class="notification-count"> 0 </span> reminders </h4>
      <div class="module-notifications-wrapper clearfix" data-type="reminder">
        {{#each this.notifications}}
          {{#if this.time_before}}
            {{>module-notification viewType="reminder" typeMap=../../typeMap}}
          {{/if}}
        {{/each}}
      </div>
    </div>
    <h3 class="module-heading"> Notifications <button id="add-notification" class="btn btn-primary pull-right">+ New Notification</button></h3>
    <div class="notification-create-container">
      <!--// create form renders here -->
    </div>
    <div class="module module-notifications-container">
      <h4 class="module-heading border-bottom"> You have <span class="notification-count"> 0 </span> notifications </h4>
      <div class="module-notifications-wrapper clearfix" data-type="notification">
        {{#each this.notifications}}
          {{#if this.only_if_involved}}
            {{>module-notification viewType="notification" typeMap=../../typeMap}}
          {{/if}}
        {{/each}}
      </div>
    </div>
  </div>
</script>

<!-- // notifications/reminders view partial -->
<script id="module-notification-template" type="text/x-handlebars-template">
  <div class="module module-card module-notification" data-time="{{time_before}}" data-role="{{role}}" data-team="{{team}}" data-id="{{id}}" data-model="{{stringify this}}">
    <ul class="notifications-details">
      <li>
        <label class="light label-col">ID:</label>
        <span class="data-col notification-id">{{id}}</span>
      </li>
      {{#if time_before}}
      <li>
        <label class="light label-col">Time:</label>
        <span class="data-col notification-roster">{{scaleSeconds time_before 'duration'}} {{scaleSeconds time_before 'unit'}}</span>
      </li>
      {{/if}}
      <li>
        <label class="light label-col">Event:</label>
        <span class="data-col notification-event">{{#if time_before}}Before event{{else}}When event is{{/if}} {{lookup typeMap type}}</span>
      </li>
      <li>
        <label class="light label-col">Team:</label>
        <span class="data-col">{{team}}</span>
      </li>
      <li>
        <label class="light label-col">Method:</label>
        <span class="data-col">{{mode}}</span>
      </li>
      <li>
        <label class="light label-col">Roles:</label>
        <span class="data-col notification-role" title="{{#each roles}} {{this}} {{/each}}">
          {{#each roles}} {{this}} {{/each}}
        </span>
      </li>
    </ul>
    <div class="notification-actions border-top">
      <span class="edit-{{viewType}} pull-right">
        <i class="svg-icon svg-icon-pencil">
          <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 8 8" style="fill: currentColor">
            <path d="M6 0l-1 1 2 2 1-1-2-2zm-2 2l-4 4v2h2l4-4-2-2z" />
          </svg>
        </i>
        Edit
      </span>
    </div>
  </div>
</script>

<!-- // notifications/reminders create partial -->
<script id="module-notification-create-template" type="text/x-handlebars-template">
  <form class="module module-card module-notification-create" {{#ifExists selected.id}} data-edit-id="{{selected.id}}" {{/ifExists}} data-type="{{#isEqual createType 'reminder'}}reminder{{else}}notification{{/isEqual}}">
    <div class="module-heading module-card-heading border-bottom">
      <h4>
        {{#if selected.id}}
          Edit
        {{else}}
          Create a new
        {{/if}}
        {{#isEqual createType 'notification'}}
          notification
        {{else}}
          reminder {{#ifExists selected.id}} {{selected.id}} {{/ifExists}}
        {{/isEqual}}
      </h4>
    </div>
    <div class="notification-create-body">
      {{#isEqual createType 'reminder'}}
        Remind me via
        <select class="form-control notification-create-mode" name="mode">
          {{#each modes}}
          <option value="{{this}}" {{isSelected this ../selected.mode}}>{{this}}</option>
          {{/each}}
        </select>
        <input type="number" min="1" class="form-control notification-create-time" value="{{#ifExists selected.time_before}}{{scaleSeconds selected.time_before 'duration'}}{{/ifExists}}" name="time_before">
        <select name="time_before_unit" class="form-control notification-create-unit">
          <option value="minutes" {{isSelected (scaleSeconds selected.time_before 'unit') "minutes"}}>Minutes</option>
          <option value="hours" {{isSelected (scaleSeconds selected.time_before 'unit') "hours"}}>Hours</option>
          <option value="days"  {{isSelected (scaleSeconds selected.time_before 'unit') "days"}} {{#unless selected.time_before}}selected{{/unless}}>Days</option>
          <option value="weeks" {{isSelected (scaleSeconds selected.time_before 'unit') "weeks"}}>Weeks</option>
        </select>
        before my
        <span class="multi-select notification-create-role">
          <select class="form-control multi-select-initial">
            <option>Roles</option>
          </select>
          <div class="multi-select-overlay"></div>
          <ul class="multi-select-options">
            {{#each roles}}
            <li>
              <input type="checkbox" value="{{this.name}}"
                     id="reminder-create-{{this.name}}-{{../selected.id}}"
                     {{isCheckedMulti this.name ../selected.roles}}>
              <label for="reminder-create-{{this.name}}-{{../selected.id}}">{{this.name}}</label>
            </li>
            {{/each}}
          </ul>
        </span>
        shift
        <select class="form-control notification-create-type" name="type">
          {{#each types}}
            {{#isEqual is_reminder 1}}
            <option value="{{name}}" {{isSelected name ../../selected.type}}>{{display}}</option>
            {{/isEqual}}
          {{/each}}
        </select>
        for
        <select class="form-control notification-create-team" name="team">
          {{#each teams}}
          <option value="{{this}}" {{isSelected this ../selected.team}}>{{this}}</option>
          {{/each}}
        </select>
      {{else}}
        Notify me via
        <select class="form-control notification-create-mode" name="mode">
          {{#each modes}}
          <option value="{{this}}" {{isSelected this ../selected.mode}}>{{this}}</option>
          {{/each}}
        </select>
        when a
        <span class="multi-select notification-create-role">
          <select class="form-control multi-select-initial">
            <option>Roles</option>
          </select>
          <div class="multi-select-overlay"></div>
          <ul class="multi-select-options">
            {{#each roles}}
            <li>
              <input type="checkbox" value="{{this.name}}"
                     id="notification-create-{{this.name}}-{{../selected.id}}"
                     {{isCheckedMulti this.name ../selected.roles}}>
              <label for="notification-create-{{this.name}}-{{../selected.id}}">{{this.name}}</label>
            </li>
            {{/each}}
          </ul>
        </span>
        event is
        <select class="form-control notification-create-type" name="type">
          {{#each types}}
            {{#isEqual is_reminder 0}}
            <option value="{{name}}" {{isSelected name ../selected.type}}>{{display}}</option>
            {{/isEqual}}
          {{/each}}
        </select>
        on the
        <select class="form-control notification-create-team" name="team">
          {{#each teams}}
          <option value="{{this}}" {{isSelected this ../selected.team}}>{{this}}</option>
          {{/each}}
        </select>
        calendar <b>if I am involved.</b>
      {{/isEqual}}
    </div>
    <div class="border-top notification-actions clearfix">
      <div class="pull-right">
        <button class="btn btn-primary save-notification" type="submit"><span class="btn-text">Save</span> <i class="loader loader-small"></i> </button>
        <button class="btn btn-blue delete-notification" type="button" data-toggle="modal" data-target="#confirm-action-modal" data-modal-action="oncall.settings.notifications.deleteNotification" data-modal-title="Your changes are unsaved" data-modal-content="Aborting now will lose unsaved changes."> Cancel </button>
      </div>
      <div class="pull-left">
        {{#if selected.id}}
          <button class="btn btn-danger" type="button" data-toggle="modal" data-target="#confirm-action-modal" data-modal-action="oncall.settings.notifications.deleteNotification" data-modal-title="Delete notification {{selected.id}}" data-notification-id="{{selected.id}}" data-modal-content="Delete notification {{selected.id}}?"> Delete </button>
        {{/if}}
      </div>
    </div>
  </form>
</script>

<!--// **********************
  Errors Page
*********************** //-->

<script id="error-page-template" type="text/x-handlebars-template">
  <div class="main floating-module error-page">
    <div class="module">
      <div class="logo-wrapper">
        <img src="/static/images/oncall_logo_blue.png" width="100" alt="Oncall logo">
      </div>
      <div>
        <h1 class="error-code">{{error_code}}</h1>
        <div class="error-status">{{error_status}}</div>
        <div class="error-text">{{error_text}}</div>
      </div>
    </div>
  </div>
</script>
{% endraw %}
{% endblock %}
