<div class="split-content">
  <div class="header">
    <h2 translate>Templates</h2>
    <div class="pull-right">
        <div class="sortbar pull-left">
           <span class="lab" translate>Filter:</span>
           <div class="dropdown" dropdown sd-dropdown-position>
             <button id="order_button" class="dropdown-toggle" dropdown-toggle>{{ filters[activeFilter].label | translate }} <b class="caret"></b>
             </button>
             <ul class="dropdown-menu left-submenu" id="order_selector">
                <li ng-repeat="f in filters track by $index" ng-class="{active: activeFilter === $index}">
                  <a href="" ng-click="filterBy($index)">{{ f.label | translate }}</a>
                </li>
             </ul>
           </div>
        </div>
        <button class="btn btn-info" ng-click="edit()">
          <i class="icon-plus-sign icon-white"></i> <span translate>Add New Template</span>
        </button>
    </div>
  </div>

  <div class="content">
      <div class="flex-grid box wrap-items small-2 medium-4 large-6">
          <div class="flex-item card-box template-card" ng-repeat="template in content_templates._items | templatesBy:filters[activeFilter]" ng-if="desks">
              <div class="card-box__header" ng-class="{'card-box__header--dark': !template.is_public}" >
                  <div class="dropdown" dropdown>
                      <button class="dropdown-toggle" dropdown-toggle>
                          <i class="icon-dots-vertical"></i>
                      </button>
                      <ul class="dropdown-menu more-activity-menu pull-right">
                          <li><div class="menu-label" translate>Actions</div></li>
                          <li class="divider"></li>
                          <li><button ng-click="edit(template)" title="{{:: 'Edit Template' | translate }}"><i class="icon-pencil"></i>{{:: 'Edit'| translate}}</button></li>
                          <li ng-if="template.template_type !== 'kill'"><button ng-click="remove(template)" title="{{:: 'Remove Template' | translate }}"><i class="icon-trash"></i>{{:: 'Remove'| translate}}</button></li>
                      </ul>
                  </div>
                  <div class="card-box__heading">{{ template.template_name }}</div>
              </div>
              <div class="card-box__content">
                  <ul class="card-box__content-list">
                      <li>
                          <h4 class="with-value">{{ :: 'Template type' | translate }} <span class="value-label">{{ template.template_type }}</span></h4>
                      </li>
                      <li ng-if="getTemplateDesk(template).name">
                          <h4>{{ :: 'Desk / Stage' | translate }}</h4>
                          <span>{{getTemplateDesk(template).name}} / {{getTemplateStage(template).name}}</span>
                      </li>
                      <li ng-if="template.schedule.is_active">
                          <h4>{{ :: 'Automated item creation' | translate }}</h4>
                          <span ng-repeat="day in template.schedule.day_of_week">
                              {{ :: weekdays[day] }}
                              <span ng-if="$index < template.schedule.day_of_week.length-1">, </span>
                          </span>
                          <span class="creation-time"> <i class="icon-time"></i> at {{ template.schedule.create_at | time }}<span>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
  </div>
</div>

<div sd-modal data-model="template" class="modal-responsive">
  <div class="modal-header template-header"> <a href="" class="close" ng-click="cancel()"><i class="icon-close-small"></i></a>
      <h3 ng-show="template._id"><span translate>Edit Template</span><span>"{{ origTemplate.template_name }}"</span></h3>
      <h3 translate ng-hide="template._id" translate>Add New Template</h3>
  </div>
  <div class="modal-body">
    <form name="templateForm">
    <div class="main-article">
      <div class="fieldset">
        <div class="field">
            <label for="template-name" translate>Template Name</label>
            <input id="template-name" required
              ng-model="template.template_name">
        </div>

        <div class="field">
            <label for="template-type" translate>Template Type</label>
            <select id="template-type" required
              ng-model="template.template_type"
              ng-options="type._id as type.label for type in types | filter:templatesFilter"></select>
        </div>

        <div class="field">
            <label for="template-is-private" translate>Desk Template</label>
            <div class="control">
              <span sd-switch ng-model="template.is_public"></span>
            </div>
        </div>

        <div class="field" ng-if="template.template_type !== 'kill' && content_types.length">
          <label for="template-profile" translate>Content Profile</label>
          <div class="control">
            <select id="template-profile" ng-model="item.profile" ng-options="type._id as type.label for type in content_types"></select>
          </div>
        </div>

        <div class="field" ng-if="template.template_type !== 'kill' && !content_types.length">
          <label for="template-profile" translate>Content Profile</label>
          <div class="control">
            <input type="text" id="template-profile" ng-model="item.profile">
          </div>
        </div>

        <div class="field" ng-if="template.template_type !== 'kill' && template.is_public">
          <label for="template-desk" translate>Desk</label>
          <div class="control">
            <select id="template-desk"
              ng-model="template.template_desk"
              ng-change="updateStages(template.template_desk)">
                <option value="" translate>None</option>
                <option ng-repeat="desk in desks._items track by desk._id" value="{{ desk._id }}" ng-selected="desk._id === template.template_desk">{{ :: desk.name }}</option>
            </select>
          </div>
        </div>

        <div class="field" ng-if="template.template_desk && stages && template.template_type !== 'kill' && template.is_public">
          <label for="template-stage" translate>Stage</label>
          <div class="control">
            <select id="template-stage"
              ng-model="template.template_stage">
              <option ng-repeat="stage in stages track by stage._id" value="{{ stage._id }}" ng-selected="stage._id === template.template_stage">{{ :: stage.name }}</option>
            </select>
          </div>
        </div>

        <div class="field" ng-if="template.template_desk && template.template_type !== 'kill' && template.is_public">
          <label for="schedule-toggle" translate>Automatically create item</label>
          <div class="control">
            <span sd-switch ng-model="template.schedule.is_active"></span>
          </div>
        </div>

        <div class="field" ng-if="template.schedule.is_active && template.template_type !== 'kill'">
          <label translate>On</label>
          <div class="day-filter-box clearfix" sd-weekday-picker data-model="template.schedule.day_of_week"></div>
        </div>

        <div class="field" ng-if="template.schedule.is_active && template.template_type !== 'kill'">
          <label translate>At</label>
          <span sd-timepicker ng-model="template.schedule.create_at"></span>
          <div sd-timezone data-timezone="template.schedule.time_zone"></div>
        </div>
      </div>

      <div class="fieldset" sd-article-edit></div>
    </div>
    </form>
  </div>
  <div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()" translate>Cancel</button>
    <button class="btn btn-primary"
      ng-click="save()"
      ng-disabled="templateForm.$invalid || (!templateForm.$invalid && !validSchedule())"

      translate>Save</button>
  </div>
</div>
