@if (policy) {
  <div class="preview">
    <div
      class="dashed"
      [ngClass]="{ dark: theme === Theme.DARK, light: theme === Theme.LIGHT }"
      [style.background]="theme === Theme.DARK ? policy.backgroundColorDark : policy.backgroundColor"
    >
      <div class="login-wrapper" [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor">
        @if (policy.logoUrl && theme === Theme.LIGHT) {
          <img [src]="policy.logoUrl" alt="logo-mock" />
        }
        @if (policy.logoUrlDark && theme === Theme.DARK) {
          <img [src]="policy.logoUrlDark" alt="logo-mock" />
        }
        <h1 [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor">
          {{ 'POLICY.PRIVATELABELING.PREVIEW.TITLE' | translate }}
        </h1>
        <p [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor" class="desc-text">
          {{ 'POLICY.PRIVATELABELING.PREVIEW.SECOND' | translate }}
        </p>
        <cnsl-form-field class="formfield">
          <cnsl-label>Loginname</cnsl-label>
          <input
            cnslInput
            [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor"
            value="road.runner"
          />
        </cnsl-form-field>
        <div class="error-msg" [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor">
          <i
            class="las la-exclamation-circle"
            [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor"
          ></i>
          <span [style.color]="theme === Theme.DARK ? policy.warnColorDark : policy.warnColor">{{
            'POLICY.PRIVATELABELING.PREVIEW.ERROR' | translate
          }}</span>
        </div>
        <div class="btn-wrapper">
          <button
            mat-stroked-button
            [style.borderColor]="theme === Theme.DARK ? '#ffffff1f' : '#0000001f'"
            [style.color]="theme === Theme.DARK ? policy.fontColorDark : policy.fontColor"
          >
            {{ 'POLICY.PRIVATELABELING.PREVIEW.SECONDARYBUTTON' | translate }}
          </button>
          @if (theme === Theme.DARK) {
            <button mat-raised-button [style.background]="policy.primaryColorDark" [style.color]="contrastTextColor">
              {{ 'POLICY.PRIVATELABELING.PREVIEW.PRIMARYBUTTON' | translate }}
            </button>
          }
          @if (theme === Theme.LIGHT) {
            <button mat-raised-button [style.background]="policy.primaryColor" [style.color]="contrastTextColor">
              {{ 'POLICY.PRIVATELABELING.PREVIEW.PRIMARYBUTTON' | translate }}
            </button>
          }
        </div>
      </div>
    </div>
  </div>
}