<div class="modal-header text-center bg-primary">
  <header class="text-white">
    <div style="font-size: 62px;">
      <span c8yIcon="c8y-report"></span>
    </div>
    <h4 class="text-uppercase">
      <span *ngIf="actionType === ActionType.CREATE" translate>New export schedule</span>
      <span *ngIf="actionType === ActionType.EDIT" translate>Edit export schedule</span>
      <span *ngIf="actionType === ActionType.DUPLICATE" translate>Duplicate export schedule</span>
    </h4>
  </header>
</div>

<div class="modal-body">
  <p class="lead text-center p-t-24 m-b-0" translate>On schedule send export via email</p>
</div>
<div class="modal-inner-scroll smart-rule-control">
  <form #scheduleForm="ngForm" class="edit-smart-rule-details">
    <div class="list-group">
      <div class="list-group-item bg-gray-white">
        <div class="smart-list-icon-label">
          <span class="dot bg-primary-light m-r-8">1</span>
          <strong translate>Frequency</strong>
        </div>
        <div class="p-t-16">
          <div class="form-group">
            <cron [cronIn]="cronExpression" (emitter)="getCron($event)" name="cron"></cron>
          </div>
        </div>
      </div>
      <div class="list-group-item">
        <div class="smart-list-icon-label">
          <span class="dot bg-primary-light m-r-8">2</span>
          <div class="d-inline-block">
            <strong translate>Send email</strong>
            <p class="help-block text-muted small p-absolute">
              <i class="text-info m-r-4 text-14" c8yIcon="info-circle"></i>
              <span translate
                >Enter one or more valid email addresses, separated with a comma.</span
              >
            </p>
          </div>
        </div>
        <div class="p-t-24">
          <div class="form-group">
            <label class="control-label" translate>Send to</label>
            <c8y-form-group>
              <input
                emails
                type="text"
                class="form-control"
                name="to"
                [(ngModel)]="emailTo"
                placeholder="{{
                  'e.g. joe.doe@example.com,john.smith@example.com`LOCALIZE`' | translate
                }}"
                required
              />
            </c8y-form-group>
          </div>

          <div class="form-group">
            <label class="control-label" translate>CC</label>
            <c8y-form-group>
              <input
                emails
                type="text"
                class="form-control span"
                name="cc"
                placeholder="{{
                  'e.g. joe.doe@example.com,john.smith@example.com`LOCALIZE`' | translate
                }}"
                [(ngModel)]="emailCc"
              />
            </c8y-form-group>
          </div>

          <div class="form-group">
            <label class="control-label" translate>BCC</label>
            <c8y-form-group>
              <input
                emails
                type="text"
                class="form-control span"
                name="bcc"
                placeholder="{{
                  'e.g. joe.doe@example.com,john.smith@example.com`LOCALIZE`' | translate
                }}"
                [(ngModel)]="emailBcc"
              />
            </c8y-form-group>
          </div>

          <div class="form-group">
            <label class="control-label" translate>Reply to (single email address)</label>
            <c8y-form-group>
              <input
                email
                type="text"
                class="form-control span"
                name="replyTo"
                placeholder="{{ 'e.g. joe.doe@example.com`LOCALIZE`' | translate }}"
                [(ngModel)]="emailReplyTo"
              />
            </c8y-form-group>
          </div>

          <div class="form-group">
            <label class="control-label" translate>Subject</label>
            <c8y-form-group>
              <input
                type="text"
                class="form-control span"
                name="subject"
                [(ngModel)]="emailSubject"
                placeholder="{{ 'e.g. Daily report' | translate }}"
                required
              />
            </c8y-form-group>
          </div>

          <div class="form-group">
            <label class="control-label" translate>Message</label>
            <c8y-form-group>
              <textarea
                class="form-control"
                name="text"
                [(ngModel)]="emailText"
                placeholder="{{ 'Message' | translate }}"
                rows="4"
                required
              ></textarea>
              <p class="help-block text-muted">
                {{ placeholdersInfo | translate }}
              </p>
            </c8y-form-group>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<div class="modal-footer">
  <button class="btn btn-default" (click)="cancel()" title="{{ 'Cancel' | translate }}">
    {{ 'Cancel' | translate }}
  </button>
  <button
    class="btn btn-primary"
    (click)="save()"
    [disabled]="!validCron || !scheduleForm.form.valid"
  >
    <span>
      <span *ngIf="actionType === ActionType.CREATE" title="{{ 'Create' | translate }}">
        {{ 'Create' | translate }}
      </span>
      <span *ngIf="actionType === ActionType.EDIT" title="{{ 'Save' | translate }}">
        {{ 'Save' | translate }}
      </span>
      <span *ngIf="actionType === ActionType.DUPLICATE" title="{{ 'Duplicate' | translate }}">
        {{ 'Duplicate' | translate }}
      </span>
    </span>
  </button>
</div>