<ion-grid class="ion-no-padding">
  <ion-card>
    <ion-row>
      <ion-col>
        <ion-item [class.disabled]="props.disabled">
          <ion-label style="white-space:pre-wrap">{{props.label}}</ion-label>
        </ion-item>
      </ion-col>
    </ion-row>
    @if (!isAllTrue()) {
      @if (props.description) {
        <ion-row>
          <ion-col>
            <ion-item [class.disabled]="props.disabled" lines="none">
              <ion-label style="white-space:pre-wrap">{{props.description}}</ion-label>
            </ion-item>
          </ion-col>
        </ion-row>
      }
      @if (props.attributes?.infoLine) {
        <ion-row class="ion-padding"
          style="align-items: center;line-height: 1.4;">
          <ion-col>
            <ion-icon color="primary" name="information-outline" size="small">
            </ion-icon>
          </ion-col>
          <ion-col size="11">
            <div>
              {{props.attributes?.infoLine }}
            </div>
          </ion-col>
        </ion-row>
      }
    }
    @for (step of steps; track step; let i = $index) {
      <ion-row class="ion-no-padding">
        <ion-col>
          <ion-item lines="none">
            <ion-label style="white-space:pre-wrap">{{step.label}}</ion-label>
            <ion-checkbox slot="end" [checked]="formControl.value[i]"
              (ionChange)="onCheckboxChange($event, i)" [disabled]="props.disabled">
            </ion-checkbox>
          </ion-item>
        </ion-col>
      </ion-row>
      @if (showContent(i)) {
        @if (step.description) {
          <ion-row class="ion-padding-bottom">
            <ion-col>
              <ion-item lines="none">
                <ion-text style="white-space: pre-line;" [innerHtml]="step.description"></ion-text>
              </ion-item>
            </ion-col>
          </ion-row>
        }
        @for (url of step.url; track url) {
          <ion-row class="ion-justify-content-center">
            <ion-item lines="none" class="ion-padding-bottom">
              <img class="center" [src]="url">
            </ion-item>
          </ion-row>
        }
      }
    }
  </ion-card>
</ion-grid>
