<div class="container">
  <span class="headline">
    Rules for "<strong>{{ rule.fullPath }}</strong
    >"
  </span>
  <ng-container *ngFor="let detail of rule.ruleDetails">
    <ng-container
      [ngTemplateOutlet]="detail.defaultRule ? defaultRuleTemplate : customRuleTemplate"
      [ngTemplateOutletContext]="{ detail: detail }"
    >
    </ng-container>
  </ng-container>
</div>

<ng-template #customRuleTemplate let-detail="detail">
  <div class="rule-row" data-testid="rule-row">
    <!-- always disabled in the first iteration -->
    <select [value]="detail.state" class="chip" disabled *ngIf="!detail.defaultRule">
      <option value="hidden">hidden</option>
      <option value="visible">visible</option>
      <option value="disabled">disabled</option>
      <option value="readonly">readonly</option>
      <option value="editable">editable</option>
    </select>
    <!-- always disabled in the first iteration -->
    <input class="chip readonly" disabled type="text" [value]="detail.condition || '-'" />
  </div>
</ng-template>

<ng-template #defaultRuleTemplate let-detail="detail">
  <div class="rule-row default-rule" data-testid="rule-row">
    <span class="chip">{{ detail.state }}</span>
    <span class="chip">{{ detail.condition || '-' }}</span>
  </div>
</ng-template>

./rule-editor.component.scss

@use '../../inspector.colors.scss' as *;
@use 'sass:color';

.headline {
  font-size: 15px;
  padding: 16px;
  display: block;
}

.rule-row {
  display: grid;
  padding: 4px 16px;
  grid-template-columns: 95px 1fr;
  align-items: center;
  gap: 8px;

  &:hover {
    background-color: color.adjust($debug-color-light, $lightness: 5%);
  }
}

.chip {
  font-family: 'Allianz Neo';
  background-color: $debug-color-dark;
  color: #fff;
  display: inline-block;
  padding: 0 8px;
  border-radius: 3px;
  border: none;
  min-width: 24px;
  vertical-align: middle;
  height: 24px;
  line-height: 24px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
}

// to be removed in the second iteration
.readonly {
  opacity: 0.7;
}

.default-rule .chip {
  background-color: transparent;
}