<section class="tw-mb-5 bit-compact:tw-mb-4">
  <bit-section-header>
    <h2 bitTypography="h6">{{ "customFields" | i18n }}</h2>
  </bit-section-header>
  <bit-card>
    @for (field of cipher.fields; track cipher.id; let last = $last, i = $index) {
      <div
        class="tw-border-secondary-300 [&_bit-form-field:last-of-type]:tw-mb-0"
        [ngClass]="{ 'tw-mb-4': !last }"
        data-testid="custom-field"
      >
        @if (field.type === fieldType.Text) {
          <bit-form-field>
            <bit-label [appTextDrag]="field.value">{{ field.name }}</bit-label>
            <textarea
              readonly
              bitInput
              [value]="field.value ?? ''"
              aria-readonly="true"
              [attr.aria-label]="emptyFieldAriaLabel(field)"
              vaultAutosizeReadOnlyTextArea
            ></textarea>
            @if (field.value) {
              <button
                bitIconButton="bwi-clone"
                bitSuffix
                type="button"
                [appCopyClick]="field.value"
                showToast
                [valueLabel]="field.name"
                [label]="'copyCustomField' | i18n: field.name"
                data-testid="copy-custom-field"
              ></button>
            }
          </bit-form-field>
        }
        @if (field.type === fieldType.Hidden) {
          <bit-form-field>
            <bit-label [appTextDrag]="field.value">{{ field.name }}</bit-label>
            @if (!revealedHiddenFields.includes(i)) {
              <input
                readonly
                bitInput
                type="password"
                [value]="field.value ?? ''"
                aria-readonly="true"
                [attr.aria-label]="emptyFieldAriaLabel(field)"
                class="tw-font-mono"
              />
            }
            <!-- `type="password"` is only available for inputs, but textarea should show the entire field when visible. -->
            @if (revealedHiddenFields.includes(i)) {
              <textarea
                readonly
                bitInput
                type="password"
                [value]="field.value ?? ''"
                aria-readonly="true"
                class="tw-font-mono"
                vaultAutosizeReadOnlyTextArea
              ></textarea>
            }
            @if (canViewPassword && revealedHiddenFields.includes(i)) {
              <button
                bitIconButton="bwi-numbered-list"
                bitSuffix
                type="button"
                data-testid="toggle-hidden-field-value-count"
                [label]="
                  (showHiddenValueCountFields.includes(i)
                    ? 'hideCharacterCount'
                    : 'showCharacterCount'
                  ) | i18n
                "
                [attr.aria-expanded]="showHiddenValueCountFields.includes(i)"
                appStopClick
                (click)="toggleCharacterCount(i)"
              ></button>
            }
            @if (canViewPassword && field.value) {
              <button
                bitSuffix
                type="button"
                bitIconButton
                bitPasswordInputToggle
                (toggledChange)="toggleHiddenField($event, i)"
              ></button>
            }
            @if (canViewPassword && field.value) {
              <button
                bitIconButton="bwi-clone"
                bitSuffix
                type="button"
                [appCopyClick]="field.value"
                showToast
                [valueLabel]="field.name"
                [label]="'copyCustomField' | i18n: field.name"
                (click)="logCopyEvent()"
              ></button>
            }
          </bit-form-field>
        }
        @if (showHiddenValueCountFields.includes(i) && revealedHiddenFields.includes(i)) {
          <div [ngClass]="{ 'tw-mt-3': true, 'tw-mb-2': true }">
            <bit-color-password [password]="field.value" [showCount]="true"></bit-color-password>
          </div>
        }
        @if (field.type === fieldType.Boolean) {
          <bit-form-control>
            <input
              bitCheckbox
              type="checkbox"
              [checked]="field.value === 'true'"
              aria-readonly="true"
              disabled
            />
            <bit-label [appTextDrag]="field.value">
              {{ field.name }}
            </bit-label>
          </bit-form-control>
        }
        @if (field.type === fieldType.Linked) {
          <bit-form-field>
            <bit-label> {{ "cfTypeLinked" | i18n }}: {{ field.name }} </bit-label>
            <input
              readonly
              bitInput
              type="text"
              [value]="getLinkedType(field.linkedId)"
              aria-readonly="true"
            />
          </bit-form-field>
        }
      </div>
    }
  </bit-card>
</section>
