<div class="cron-job-builder">
  <h4>Cron Job Builder</h4>
  <div class="clr-row">
    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
      <div class="form-group">
        <label>Second</label>
        <select class="form-control" [(ngModel)]="second" (change)="onFieldChange()">
          <option *ngFor="let option of secondOptions" [value]="option.value">{{ option.label }}</option>
        </select>
      </div>
    </div>
    
    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
      <div class="form-group">
        <label>Minute</label>
        <select class="form-control" [(ngModel)]="minute" (change)="onFieldChange()">
          <option *ngFor="let option of minuteOptions" [value]="option.value">{{ option.label }}</option>
        </select>
      </div>
    </div>
    
    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
      <div class="form-group">
        <label>Hour</label>
        <select class="form-control" [(ngModel)]="hour" (change)="onFieldChange()">
          <option *ngFor="let option of hourOptions" [value]="option.value">{{ option.label }}</option>
        </select>
      </div>
    </div>
    
    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
      <div class="form-group">
        <label>Day of Month</label>
        <select class="form-control" [(ngModel)]="dayOfMonth" (change)="onFieldChange()">
          <option *ngFor="let option of dayOfMonthOptions" [value]="option.value">{{ option.label }}</option>
        </select>
      </div>
    </div>
    
    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
      <div class="form-group">
        <label>Month</label>
        <select class="form-control" [(ngModel)]="month" (change)="onFieldChange()">
          <option *ngFor="let option of monthOptions" [value]="option.value">{{ option.label }}</option>
        </select>
      </div>
    </div>
    
    <div class="clr-col-lg-2 clr-col-md-4 clr-col-sm-6 clr-col-12">
      <div class="form-group">
        <label>Day of Week</label>
        <select class="form-control" [(ngModel)]="dayOfWeek" (change)="onFieldChange()">
          <option *ngFor="let option of dayOfWeekOptions" [value]="option.value">{{ option.label }}</option>
        </select>
      </div>
    </div>
  </div>
  
  <div class="clr-row">
    <div class="clr-col-12">
      <div class="form-group">
        <label>Generated Cron Expression:</label>
        <input type="text" class="form-control" [value]="buildCronExpression()" readonly>
      </div>
    </div>
  </div>
  
  <div class="clr-row" *ngIf="cronDescription">
    <div class="clr-col-12">
      <div class="cron-description">
        <strong>Schedule Description:</strong> {{ cronDescription }}
      </div>
    </div>
  </div>
</div>