<ng-container *ngFor="let variation of variations">
  <div class="sky-padding-even-md" [attr.id]="'screenshot-' + variation.id">
    <h1>Character Count (reactive)</h1>

    <form novalidate [formGroup]="variation.formGroup">
      <div [attr.id]="'screenshot-character-count-' + variation.id">
        <div style="display: flex">
          <label
            class="sky-control-label"
            style="flex-grow: 1"
            [for]="reactiveInputBox.id"
            >First name {{ variation.id }}</label
          >

          <sky-character-counter-indicator #indicator />
        </div>

        <input
          #reactiveInputBox="skyId"
          class="sky-form-control"
          type="text"
          skyCharacterCounter
          skyId
          [formControl]="variation.control"
          [skyCharacterCounterIndicator]="indicator"
          [skyCharacterCounterLimit]="maxCharacterCount"
        />

        <div *ngIf="variation.control.errors" class="sky-error-label">
          Limit First name to {{ maxCharacterCount }} characters.
        </div>
      </div>

      <table>
        <tr>
          <th>Valid</th>
          <td>{{ variation.formGroup.valid }}</td>
        </tr>
        <tr>
          <th>Value</th>
          <td>{{ variation.control.value || 'Nothing entered...' }}</td>
        </tr>
      </table>
    </form>
  </div>

  <div class="sky-padding-even-md">
    <h1>Character Count (template-driven)</h1>

    <div>
      <div style="display: flex">
        <label
          class="sky-control-label"
          style="flex-grow: 1"
          [for]="templateInputBox.id"
        >
          First name {{ variation.id }}
        </label>

        <sky-character-counter-indicator #templateIndicator />
      </div>

      <input
        #templateInputBoxModel="ngModel"
        #templateInputBox="skyId"
        class="sky-form-control"
        type="text"
        skyCharacterCounter
        skyId
        [skyCharacterCounterIndicator]="templateIndicator"
        [skyCharacterCounterLimit]="maxCharacterCount"
        [(ngModel)]="variation.model"
      />

      <div *ngIf="templateInputBoxModel.errors" class="sky-error-label">
        Limit First name to {{ maxCharacterCount }} characters.
      </div>
    </div>

    <table>
      <tr>
        <th>Valid</th>
        <td>{{ templateInputBoxModel.valid }}</td>
      </tr>
      <tr>
        <th>Value</th>
        <td>{{ variation.model || 'Nothing entered...' }}</td>
      </tr>
    </table>
  </div>

  <div class="sky-padding-even-md">
    <h1>Input box</h1>

    <div [attr.id]="'screenshot-character-count-input-box-' + variation.id">
      <sky-input-box
        stacked="true"
        [characterLimit]="maxCharacterCount"
        [labelText]="'First name ' + variation.id"
      >
        <input type="text" [(ngModel)]="variation.model" />
      </sky-input-box>
    </div>
  </div>

  <div class="sky-padding-even-md">
    <h1>Input box no label</h1>

    <div
      [attr.id]="
        'screenshot-character-count-input-box-no-label-' + variation.id
      "
    >
      <sky-input-box stacked="true">
        <sky-character-counter-indicator #templateIndicatorInputBoxNoLabel />
        <input
          #characterCountInputBoxModelNoLabel="ngModel"
          class="sky-form-control"
          type="text"
          skyCharacterCounter
          [skyCharacterCounterIndicator]="templateIndicatorInputBoxNoLabel"
          [skyCharacterCounterLimit]="maxCharacterCount"
          [(ngModel)]="variation.model"
        />

        <div
          *ngIf="characterCountInputBoxModelNoLabel.errors"
          class="sky-error-label"
        >
          Limit First name to {{ maxCharacterCount }} characters.
        </div>
      </sky-input-box>
    </div>
  </div>
</ng-container>
<span *ngIf="ready | async" id="ready"></span>
