@if (hasPersonalDetails) {
  <section class="tw-mb-5 bit-compact:tw-mb-4">
    <bit-section-header>
      <h2 bitTypography="h6">{{ "personalDetails" | i18n }}</h2>
    </bit-section-header>

    <read-only-cipher-card>
      @if (cipher.identity.fullName) {
        <bit-form-field>
          <bit-label [appTextDrag]="cipher.identity.fullName">{{ "name" | i18n }}</bit-label>
          <input
            bitInput
            id="fullName"
            [value]="cipher.identity.fullName"
            readonly
            data-testid="name"
          />
          <button
            type="button"
            bitIconButton="bwi-clone"
            bitSuffix
            [label]="'copyName' | i18n"
            [appCopyClick]="cipher.identity.fullName"
            showToast
            [valueLabel]="'name' | i18n"
            data-testid="copy-name"
          ></button>
        </bit-form-field>
      }
      @if (cipher.identity.username) {
        <bit-form-field>
          <bit-label [appTextDrag]="cipher.identity.username">{{ "username" | i18n }}</bit-label>
          <input
            bitInput
            id="username"
            [value]="cipher.identity.username"
            readonly
            data-testid="username"
          />
          <button
            type="button"
            bitIconButton="bwi-clone"
            bitSuffix
            [label]="'copyUsername' | i18n"
            [appCopyClick]="cipher.identity.username"
            showToast
            [valueLabel]="'username' | i18n"
          ></button>
        </bit-form-field>
      }
      @if (cipher.identity.company) {
        <bit-form-field>
          <bit-label [appTextDrag]="cipher.identity.company">{{ "company" | i18n }}</bit-label>
          <input
            bitInput
            id="company"
            [value]="cipher.identity.company"
            readonly
            data-testid="company"
          />
          <button
            type="button"
            bitIconButton="bwi-clone"
            bitSuffix
            [label]="'copyCompany' | i18n"
            [appCopyClick]="cipher.identity.company"
            showToast
            [valueLabel]="'company' | i18n"
            data-testid="copy-company"
          ></button>
        </bit-form-field>
      }
    </read-only-cipher-card>
  </section>
}

@if (hasIdentificationDetails) {
  <section class="tw-mb-5 bit-compact:tw-mb-4">
    <bit-section-header>
      <h2 bitTypography="h6">{{ "identification" | i18n }}</h2>
    </bit-section-header>

    <read-only-cipher-card>
      @if (cipher.identity.ssn) {
        <bit-form-field>
          <bit-label [appTextDrag]="cipher.identity.ssn">{{ "ssn" | i18n }}</bit-label>
          <input
            bitInput
            id="ssn"
            type="password"
            [value]="cipher.identity.ssn"
            readonly
            data-testid="ssn"
          />
          <button
            type="button"
            bitIconButton
            bitSuffix
            bitPasswordInputToggle
            data-testid="ssn-toggle"
          ></button>
          <button
            type="button"
            bitIconButton="bwi-clone"
            bitSuffix
            [label]="'copySSN' | i18n"
            [appCopyClick]="cipher.identity.ssn"
            showToast
            [valueLabel]="'ssn' | i18n"
            data-testid="copy-ssn"
          ></button>
        </bit-form-field>
      }
      @if (cipher.identity.passportNumber) {
        <bit-form-field>
          <bit-label [appTextDrag]="cipher.identity.passportNumber">{{
            "passportNumber" | i18n
          }}</bit-label>
          <input
            id="passportNumber"
            bitInput
            type="password"
            [value]="cipher.identity.passportNumber"
            readonly
            data-testid="passport"
          />
          <button
            type="button"
            bitIconButton
            bitSuffix
            bitPasswordInputToggle
            data-testid="passport-toggle"
          ></button>
          <button
            type="button"
            bitIconButton="bwi-clone"
            bitSuffix
            [label]="'copyPassportNumber' | i18n"
            [appCopyClick]="cipher.identity.passportNumber"
            showToast
            [valueLabel]="'passportNumber' | i18n"
            data-testid="copy-passport"
          ></button>
        </bit-form-field>
      }
      @if (cipher.identity.licenseNumber) {
        <bit-form-field>
          <bit-label [appTextDrag]="cipher.identity.licenseNumber">{{
            "licenseNumber" | i18n
          }}</bit-label>
          <input
            bitInput
            id="licenseNumber"
            [value]="cipher.identity.licenseNumber"
            readonly
            data-testid="license"
          />
          <button
            type="button"
            bitIconButton="bwi-clone"
            bitSuffix
            [label]="'copyLicenseNumber' | i18n"
            [appCopyClick]="cipher.identity.licenseNumber"
            showToast
            [valueLabel]="'licenseNumber' | i18n"
            data-testid="copy-license"
          ></button>
        </bit-form-field>
      }
    </read-only-cipher-card>
  </section>
}

@if (hasContactDetails) {
  <section class="tw-mb-5 bit-compact:tw-mb-4">
    <bit-section-header>
      <h2 bitTypography="h6">{{ "contactInfo" | i18n }}</h2>
    </bit-section-header>

    <read-only-cipher-card>
      @if (cipher.identity.email) {
        <bit-form-field>
          <bit-label [appTextDrag]="cipher.identity.email">{{ "email" | i18n }}</bit-label>
          <input bitInput id="email" [value]="cipher.identity.email" readonly data-testid="email" />
          <button
            type="button"
            bitIconButton="bwi-clone"
            bitSuffix
            [label]="'copyEmail' | i18n"
            [appCopyClick]="cipher.identity.email"
            showToast
            [valueLabel]="'email' | i18n"
            data-testid="copy-email"
          ></button>
        </bit-form-field>
      }
      @if (cipher.identity.phone) {
        <bit-form-field>
          <bit-label [appTextDrag]="cipher.identity.phone">{{ "phone" | i18n }}</bit-label>
          <input bitInput id="phone" [value]="cipher.identity.phone" readonly data-testid="phone" />
          <button
            type="button"
            bitIconButton="bwi-clone"
            bitSuffix
            [label]="'copyPhone' | i18n"
            [appCopyClick]="cipher.identity.phone"
            showToast
            [valueLabel]="'phone' | i18n"
            data-testid="copy-phone"
          ></button>
        </bit-form-field>
      }
      @if (addressFields) {
        <bit-form-field>
          <bit-label [appTextDrag]="addressFields">{{ "address" | i18n }}</bit-label>
          <textarea
            bitInput
            id="address"
            class="tw-resize-none"
            [value]="addressFields"
            [rows]="addressRows"
            readonly
            data-testid="address"
          ></textarea>
          <button
            type="button"
            bitIconButton="bwi-clone"
            bitSuffix
            [label]="'copyAddress' | i18n"
            [appCopyClick]="addressFields"
            showToast
            [valueLabel]="'address' | i18n"
            data-testid="copy-address"
          ></button>
        </bit-form-field>
      }
    </read-only-cipher-card>
  </section>
}