<mat-grid-list cols="2" rowHeight="45%">
  <mat-grid-tile colspan="1" rowspan="1">
    <mat-card class="card">
      <mat-card-title class="card-title">Keywords</mat-card-title>
      <mat-card-content>
        <mat-form-field class="example-chip-list" appearance="fill">
          <mat-label>Keywords</mat-label>
          <mat-chip-list #chipList aria-label="Keyword selection">
            <mat-chip
              *ngFor="let keyword of keywords"
              (removed)="removeKeyword(keyword)"
            >
              {{ keyword.name }}
              <button matChipRemove>
                <mat-icon>cancel</mat-icon>
              </button>
            </mat-chip>
            <input
              placeholder="New keyword..."
              [matChipInputFor]="chipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              [matChipInputAddOnBlur]="addOnBlur"
              (matChipInputTokenEnd)="addKeyword($event)"
            />
          </mat-chip-list>
        </mat-form-field>
        <span
          >*To add a keyword, after writing, either press enter or click outside
          of keyword input field.</span
        >
      </mat-card-content>
    </mat-card>
  </mat-grid-tile>
  <mat-grid-tile colspan="1" rowspan="2">
    <mat-card class="card placeholderRHS">
      <mat-card-title class="card-title">
        <span>Add automatic updates</span>
      </mat-card-title>
      <mat-card-content class="cron-content">
        <form
          name="form"
          (ngSubmit)="f.form.valid && setCronString()"
          #f="ngForm"
          novalidate
          class="backgorund form"
        >
          <cron-editor
            class="cron-editor"
            [formControl]="cronForm"
            [options]="cronOptions"
          ></cron-editor>
          <div class="form-group footer-buttons">
            <button class="btn btn-primary btn-block">Add</button>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </mat-grid-tile>
  <mat-grid-tile colspan="1" rowspan="1">
    <mat-card class="card">
      <mat-card-title class="card-title">Shares</mat-card-title>
      <mat-card-content>
        <mat-form-field class="example-chip-list" appearance="fill">
          <mat-label>Shares</mat-label>
          <mat-chip-list #sharesList aria-label="Share selection">
            <mat-chip
              *ngFor="let share of shares"
              (removed)="removeShare(share)"
            >
              {{ share.isin }}
              <button matChipRemove>
                <mat-icon>cancel</mat-icon>
              </button>
            </mat-chip>
            <input
              placeholder="New share..."
              [matChipInputFor]="sharesList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
              [matChipInputAddOnBlur]="addOnBlur"
              (matChipInputTokenEnd)="addShare($event)"
            />
          </mat-chip-list>
        </mat-form-field>
        <span
          >*To add a share, after writing, either press enter or click outside
          of keyword input field.</span
        >
      </mat-card-content>
    </mat-card>
  </mat-grid-tile>
</mat-grid-list>
