<span page-title ng-model="syncPlan">{{ 'Sync Plan:' | translate }} {{ syncPlan.name }}</span>

<div class="row">
  <div class="col-sm-6">
    <h4 translate>Basic Information</h4>

    <dl class="dl-horizontal dl-horizontal-left">
      <dt translate>Name</dt>
      <dd bst-edit-text="syncPlan.name"
          on-save="save(syncPlan)"
          readonly="denied('edit_sync_plans', syncPlan)">
      </dd>

      <dt translate>Description</dt>
      <dd bst-edit-textarea="syncPlan.description"
          on-save="save(syncPlan)"
          readonly="denied('edit_sync_plans', syncPlan)">
      </dd>

      <dt translate>Start Date</dt>
      <dd bst-edit-custom="syncPlan.syncDate"
          formatter="date"
          formatter-options="'MMMM d, y, hh:mm a'"
          on-save="save(syncPlan)"
          readonly="denied('edit_sync_plans', syncPlan)">

        <div class="row">
          <div class="col-sm-5">
            <div class="input-group">
              <input type="text" uib-datepicker-popup id="syncDate" name="syncDate" ng-model="syncPlan.syncDate"
                     class="form-control" is-open="isOpen" show-weeks="false" tabindex="4" required/>
              <span class="input-group-btn">
                 <button type="button" class="btn btn-default" ng-click="isOpen = !isOpen">
                   <i class="fa fa-calendar"></i>
                 </button>
               </span>
            </div>
          </div>
        </div>

        <div uib-timepicker show-meridian="false" id="syncTime" name="syncTime" ng-model="syncPlan.syncTime" tabindex="5"></div>
      </dd>

      <dt translate>Next Sync</dt>
      <dd><long-date-time date="syncPlan.next_sync" /></dd>

      <dt translate>Recurring Logic</dt>
      <dd>
        <a href="/foreman_tasks/recurring_logics/{{syncPlan.foreman_tasks_recurring_logic_id}}">
          {{ syncPlan.foreman_tasks_recurring_logic_id }}
        </a>
      </dd>

      <dt translate>Sync Enabled</dt>
      <dd bst-edit-checkbox="syncPlan.enabled"
          readonly="denied('edit_sync_plans', syncPlan)"
          formatter="booleanToYesNo"
          on-save="save(syncPlan)">
      </dd>

      <dt translate>Interval</dt>
      <dd bst-edit-select="syncPlan.interval"
          formatter="translate"
          readonly="denied('edit_sync_plans', syncPlan)"
          selector="syncPlan.interval"
          options="intervals"
          options-format="value.id as value.value for value in options"
          on-save="save(syncPlan)"
          on-cancel="cancelCronEdit()"
          forced-working-mode="editedInterval"
          forced-working-text="workingText"
          edit-trigger="editInterval">
      </dd>

      <div ng-show="syncPlan.interval === 'custom cron'">
      <dt translate>Cron Logic</dt>
      <dd bst-edit-text="syncPlan.cron_expression"
          on-save="save(syncPlan)"
          on-cancel="cancelCronEdit()"
          readonly="denied('edit_sync_plans', syncPlan)"
          edit-trigger="editInterval">
      </dd>
      </div>
      <dt translate>Products</dt>
      <dd>
        <a ui-sref="sync-plan.products.list">
          {{ syncPlan.products.length }}
        </a>
      </dd>
    </dl>
  </div>
</div>