Untitled

<div class="ts-cell-refresh-capability">
    <mds-text size="lg" fontweight="bold" class="ts-cell-refresh-capability-header">{{
        labels.CELL_REFRESH_HEADING
        }}</mds-text>
    <mds-text size="md" class="mds-u-padding-bottom-sm ts-cell-refresh-capability-description">{{
        labels.CELL_REFRESH_DESCRIPTION
        }}</mds-text>
    <mds-form-field class="ts-cell-refresh-capability-options">
        <div class="mds-u-display-flex">
            <ng-container *ngFor="let option of options">
                <mds-card data-test="cell-refresh-capability-option"
                    class="mds-u-flex-grow-1 mds-u-padding-bottom-md mds-u-padding-right-lg"
                    [checked]="option.value === cell.cellRefresh" [name]="'cellCellRefresh-' + cell.order"
                    [selectable]="true" [selectiondisabled]="isDisabled" [selectedlabel]="option.label"
                    [unselectedlabel]="option.label" [value]="option.value"
                    (mdsSelectionChanged)="changeCellRefresh($event.detail)">
                    <div slot="card-body">
                        <mds-text size="sm">{{ labels['CELL_REFRESH_OPTION_DESCRIPTION_' + option.value] }}</mds-text>
                        <mds-text size="sm" class="mds-u-margin-top-sm">{{ labels['CELL_REFRESH_EXAMPLE_TEXT'] }} {{
                            exampleDate }}</mds-text>
                        <div class="mds-u-padding-top-sm">
                            <div class="mds-u-padding-top-sm">
                                <mds-label>{{ labels.BEFORE_REFRESH }}</mds-label>
                                <div *ngIf="cell?.purchasingPeriod" class="purchasePeriod">
                                    <span
                                        class="mds-u-bg-color-surface-light mds-u-border-radius-all mds-u-padding-all-xs mds-u-margin-top-xs mds-u-font-size-text-sm mds-u-font-color-ink-primary">
                                        <span class="mds-u-font-weight-bold">{{ labels.TIME_PERIODS_HEADING }}:</span>
                                        <span class="mds-u-font-weight-regular">{{
                                            cell | aslCellRefreshPeriod: 'before':option.value:false
                                            }}</span>
                                    </span>
                                </div>
                                <div class="purchasePeriod" *ngIf="cell?.purchasingPeriod">
                                    <span
                                        class="mds-u-bg-color-surface-light mds-u-border-radius-all mds-u-padding-all-xs mds-u-margin-top-xs">
                                        <span
                                            class="mds-u-font-size-text-sm mds-u-font-color-ink-primary mds-u-font-weight-bold">{{
                                            labels.TIME_PERIODS_HEADING }}:
                                        </span>
                                        <span
                                            class="mds-u-font-size-text-sm mds-u-font-color-ink-primary mds-u-font-weight-regular">{{
                                            cell | aslCellRefreshPeriod: 'before':option.value:false
                                            }}</span>
                                    </span>
                                </div>
                            </div>
                            <div class="mds-u-padding-top-sm">
                                <mds-label>{{ labels.AFTER_REFRESH }}</mds-label>
                                <div class="priorPeriod" *ngIf="cell?.priorPeriod"></div>
                                    <span
                                        class="mds-u-bg-color-surface-light mds-u-border-radius-all mds-u-padding-all-xs mds-u-margin-top-xs ">
                                        <span
                                            class="mds-u-font-size-text-sm mds-u-font-color-ink-primary mds-u-font-weight-bold">{{
                                            labels.PRIOR_PERIODS_HEADING }}:
                                        </span>
                                        <span
                                            class="mds-u-font-size-text-sm mds-u-font-color-ink-primary mds-u-font-weight-regular">{{
                                            cell | aslCellRefreshPeriod: 'after':option.value:true
                                            }}</span>
                                    </span>
                                </div>
                                <div class="purchasePeriod" *ngIf="cell?.purchasingPeriod">
                                    <span class="mds-u-bg-color-surface-light mds-u-border-radius-all mds-u-padding-all-xs mds-u-margin-top-xs" >
                                    <span
                                        class=" mds-u-font-size-text-sm mds-u-font-color-ink-primary
                                        mds-u-font-weight-bold">{{
                                        labels.TIME_PERIODS_HEADING }}:
                                    </span>
                                    <span
                                        class="mds-u-font-size-text-sm mds-u-font-color-ink-primary mds-u-font-weight-regular">{{
                                        cell | aslCellRefreshPeriod: 'after':option.value:false
                                        }}</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </mds-card>
            </ng-container>
        </div>
    </mds-form-field>
</div>