<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
  <header>
    <div class="left">
      <button type="button" (click)="cancel()">{{ "cancel" | i18n }}</button>
    </div>
    <h1 class="center">
      <span class="title">{{ title }}</span>
    </h1>
    <div class="right">
      <button type="submit" [disabled]="form.loading">
        <span [hidden]="form.loading">{{ "save" | i18n }}</span>
        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
      </button>
    </div>
  </header>
  <main tabindex="-1" *ngIf="cipher">
    <app-callout type="info" *ngIf="allowOwnershipOptions() && !allowPersonal">
      {{ "personalOwnershipPolicyInEffect" | i18n }}
    </app-callout>
    <div class="box">
      <h2 class="box-header">
        {{ "itemInformation" | i18n }}
      </h2>
      <div class="box-content">
        <div class="box-content-row" *ngIf="!editMode" appBoxRow>
          <label for="type">{{ "type" | i18n }}</label>
          <select id="type" name="Type" [(ngModel)]="cipher.type">
            <option *ngFor="let o of typeOptions" [ngValue]="o.value">{{ o.name }}</option>
          </select>
        </div>
        <div class="box-content-row" appBoxRow>
          <label for="name">{{ "name" | i18n }}</label>
          <input
            id="name"
            type="text"
            name="Name"
            [(ngModel)]="cipher.name"
            [readonly]="!cipher.edit && editMode"
          />
        </div>
        <!-- Login -->
        <div *ngIf="cipher.type === cipherType.Login">
          <div class="box-content-row box-content-row-flex" appBoxRow>
            <div class="row-main">
              <label for="loginUsername">{{ "username" | i18n }}</label>
              <input
                id="loginUsername"
                type="text"
                name="Login.Username"
                [(ngModel)]="cipher.login.username"
                inputmode="email"
                appInputVerbatim
                [readonly]="!cipher.edit && editMode"
              />
            </div>
            <div class="action-buttons">
              <button
                type="button"
                class="row-btn"
                appStopClick
                appA11yTitle="{{ 'generateUsername' | i18n }}"
                (click)="generateUsername()"
                *ngIf="!(!cipher.edit && editMode)"
              >
                <i class="bwi bwi-fw bwi-lg bwi-generate" aria-hidden="true"></i>
              </button>
            </div>
          </div>
          <div class="box-content-row box-content-row-flex" appBoxRow>
            <div class="row-main">
              <label for="loginPassword">{{ "password" | i18n }}</label>
              <input
                id="loginPassword"
                class="monospaced"
                type="{{ showPassword ? 'text' : 'password' }}"
                name="Login.Password"
                [(ngModel)]="cipher.login.password"
                appInputVerbatim
                [disabled]="!cipher.viewPassword"
                [readonly]="!cipher.edit && editMode"
              />
            </div>
            <div class="action-buttons">
              <button
                type="button"
                #checkPasswordBtn
                class="row-btn btn"
                appA11yTitle="{{ 'checkPassword' | i18n }}"
                (click)="checkPassword()"
                [appApiAction]="checkPasswordPromise"
                [disabled]="$any(checkPasswordBtn).loading"
                *ngIf="cipher.viewPassword"
              >
                <i
                  class="bwi bwi-fw bwi-lg bwi-check-circle"
                  [hidden]="$any(checkPasswordBtn).loading"
                  aria-hidden="true"
                ></i>
                <i
                  class="bwi bwi-fw bwi-lg bwi-spinner bwi-spin"
                  [hidden]="!$any(checkPasswordBtn).loading"
                  aria-hidden="true"
                ></i>
              </button>
              <button
                type="button"
                class="row-btn"
                appStopClick
                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                (click)="togglePassword()"
                *ngIf="cipher.viewPassword && cipher.login.password"
                [attr.aria-pressed]="showPassword"
              >
                <i
                  class="bwi bwi-fw bwi-lg"
                  aria-hidden="true"
                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                ></i>
              </button>
              <button
                type="button"
                class="row-btn"
                appStopClick
                appA11yTitle="{{ 'generatePassword' | i18n }}"
                (click)="generatePassword()"
                *ngIf="cipher.viewPassword && !(!cipher.edit && editMode)"
              >
                <i class="bwi bwi-fw bwi-lg bwi-generate" aria-hidden="true"></i>
              </button>
            </div>
          </div>

          <!--Passkey-->
          <div
            class="box"
            *ngIf="cipher.login.hasFido2Credentials && !cloneMode"
            tabindex="0"
            attr.aria-label="{{ 'typePasskey' | i18n }} {{ fido2CredentialCreationDateValue }}"
          >
            <div class="box-content">
              <div class="box-content-row box-content-row-multi text-muted" appBoxRow>
                <button
                  type="button"
                  appStopClick
                  (click)="removePasskey()"
                  appA11yTitle="{{ 'removePasskey' | i18n }}"
                >
                  <i class="bwi bwi-fw bwi-minus-circle bwi-lg" aria-hidden="true"></i>
                </button>
                <div class="row-main">
                  <span class="row-label">{{ "typePasskey" | i18n }}</span>
                  {{ "dateCreated" | i18n }}
                  {{ cipher.login.fido2Credentials[0].creationDate | date: "short" }}
                </div>
              </div>
            </div>
          </div>

          <div class="box-content-row box-content-row-flex" appBoxRow>
            <div class="row-main">
              <label for="loginTotp">{{ "authenticatorKeyTotp" | i18n }}</label>
              <input
                id="loginTotp"
                type="{{ showTotpSeed ? 'text' : 'password' }}"
                name="Login.Totp"
                class="monospaced"
                [(ngModel)]="cipher.login.totp"
                appInputVerbatim
                [disabled]="!cipher.viewPassword"
                [readonly]="!cipher.edit && editMode"
              />
            </div>
            <div class="action-buttons">
              <button
                type="button"
                class="row-btn"
                appStopClick
                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                (click)="toggleTotpSeed()"
                *ngIf="cipher.viewPassword && cipher.login.totp"
                [attr.aria-pressed]="showTotpSeed"
              >
                <i
                  class="bwi bwi-fw bwi-lg"
                  aria-hidden="true"
                  [ngClass]="{ 'bwi-eye': !showTotpSeed, 'bwi-eye-slash': showTotpSeed }"
                ></i>
              </button>
              <button
                type="button"
                class="row-btn"
                appStopClick
                appA11yTitle="{{ 'copyTOTP' | i18n }}"
                (click)="copy(cipher.login.totp, 'totp', 'TOTP')"
                *ngIf="cipher.viewPassword"
              >
                <i class="bwi bwi-fw bwi-lg bwi-clone" aria-hidden="true"></i>
              </button>
              <button
                type="button"
                class="row-btn"
                appStopClick
                appA11yTitle="{{ 'totpCapture' | i18n }}"
                (click)="captureTOTPFromTab()"
                *ngIf="!(!cipher.edit && editMode)"
              >
                <i class="bwi bwi-fw bwi-lg bwi-camera" aria-hidden="true"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- Card -->
        <div *ngIf="cipher.type === cipherType.Card">
          <div class="box-content-row" appBoxRow>
            <label for="cardCardholderName">{{ "cardholderName" | i18n }}</label>
            <input
              id="cardCardholderName"
              type="text"
              name="Card.CardCardholderName"
              [(ngModel)]="cipher.card.cardholderName"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row box-content-row-flex" appBoxRow>
            <div class="row-main">
              <label for="cardNumber">{{ "number" | i18n }}</label>
              <input
                id="cardNumber"
                class="monospaced"
                type="{{ showCardNumber ? 'text' : 'password' }}"
                name="Card.Number"
                (input)="onCardNumberChange()"
                [(ngModel)]="cipher.card.number"
                appInputVerbatim
                [readonly]="!cipher.edit && editMode"
              />
            </div>
            <div class="action-buttons">
              <button
                type="button"
                class="row-btn"
                appStopClick
                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                (click)="toggleCardNumber()"
                [attr.aria-pressed]="showCardNumber"
              >
                <i
                  class="bwi bwi-fw bwi-lg"
                  aria-hidden="true"
                  [ngClass]="{ 'bwi-eye': !showCardNumber, 'bwi-eye-slash': showCardNumber }"
                ></i>
              </button>
            </div>
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="cardBrand">{{ "brand" | i18n }}</label>
            <span *ngIf="!(!cipher.edit && editMode); else readonlyCardBrand">
              <select id="cardBrand" name="Card.Brand" [(ngModel)]="cipher.card.brand">
                <option *ngFor="let o of cardBrandOptions" [ngValue]="o.value">{{ o.name }}</option>
              </select>
            </span>
            <ng-template #readonlyCardBrand>
              <input
                id="cardBrand"
                name="Card.Brand"
                type="text"
                [readonly]="true"
                [value]="cipher.card.brand"
              />
            </ng-template>
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="cardExpMonth">{{ "expirationMonth" | i18n }}</label>
            <span *ngIf="!(!cipher.edit && editMode); else readonlyCardExpMonth">
              <select id="cardExpMonth" name="Card.ExpMonth" [(ngModel)]="cipher.card.expMonth">
                <option *ngFor="let o of cardExpMonthOptions" [ngValue]="o.value">
                  {{ o.name }}
                </option>
              </select>
            </span>
            <ng-template #readonlyCardExpMonth>
              <input
                id="cardExpMonth"
                name="Card.ExpMonth"
                type="text"
                [readonly]="true"
                [value]="getCardExpMonthDisplay()"
              />
            </ng-template>
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="cardExpYear">{{ "expirationYear" | i18n }}</label>
            <input
              id="cardExpYear"
              type="text"
              name="Card.ExpYear"
              [(ngModel)]="cipher.card.expYear"
              placeholder="{{ 'ex' | i18n }} {{ currentDate | date: 'yyyy' }}"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row box-content-row-flex" appBoxRow>
            <div class="row-main">
              <label for="cardCode">{{ "securityCode" | i18n }}</label>
              <input
                id="cardCode"
                class="monospaced"
                type="{{ showCardCode ? 'text' : 'password' }}"
                name="Card.Code"
                [(ngModel)]="cipher.card.code"
                appInputVerbatim
                [readonly]="!cipher.edit && editMode"
              />
            </div>
            <div class="action-buttons">
              <button
                type="button"
                class="row-btn"
                appStopClick
                appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                (click)="toggleCardCode()"
                [attr.aria-pressed]="showCardCode"
              >
                <i
                  class="bwi bwi-fw bwi-lg"
                  aria-hidden="true"
                  [ngClass]="{ 'bwi-eye': !showCardCode, 'bwi-eye-slash': showCardCode }"
                ></i>
              </button>
            </div>
          </div>
        </div>
        <!-- Identity -->
        <div *ngIf="cipher.type === cipherType.Identity">
          <div class="box-content-row" appBoxRow>
            <label for="idTitle">{{ "title" | i18n }}</label>
            <span *ngIf="!(!cipher.edit && editMode); else readonlyIdTitle">
              <select id="idTitle" name="Identity.Title" [(ngModel)]="cipher.identity.title">
                <option *ngFor="let o of identityTitleOptions" [ngValue]="o.value">
                  {{ o.name }}
                </option>
              </select>
            </span>
            <ng-template #readonlyIdTitle>
              <input
                id="idTitle"
                name="Identity.Title"
                type="text"
                [readonly]="true"
                [value]="cipher.identity.title"
              />
            </ng-template>
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idFirstName">{{ "firstName" | i18n }}</label>
            <input
              id="idFirstName"
              type="text"
              name="Identity.FirstName"
              [(ngModel)]="cipher.identity.firstName"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idMiddleName">{{ "middleName" | i18n }}</label>
            <input
              id="idMiddleName"
              type="text"
              name="Identity.MiddleName"
              [(ngModel)]="cipher.identity.middleName"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idLastName">{{ "lastName" | i18n }}</label>
            <input
              id="idLastName"
              type="text"
              name="Identity.LastName"
              [(ngModel)]="cipher.identity.lastName"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idUsername">{{ "username" | i18n }}</label>
            <input
              id="idUsername"
              type="text"
              name="Identity.Username"
              [(ngModel)]="cipher.identity.username"
              appInputVerbatim
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idCompany">{{ "company" | i18n }}</label>
            <input
              id="idCompany"
              type="text"
              name="Identity.Company"
              [(ngModel)]="cipher.identity.company"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idSsn">{{ "ssn" | i18n }}</label>
            <input
              id="idSsn"
              type="text"
              name="Identity.SSN"
              [(ngModel)]="cipher.identity.ssn"
              appInputVerbatim
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idPassportNumber">{{ "passportNumber" | i18n }}</label>
            <input
              id="idPassportNumber"
              type="text"
              name="Identity.PassportNumber"
              [(ngModel)]="cipher.identity.passportNumber"
              appInputVerbatim
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idLicenseNumber">{{ "licenseNumber" | i18n }}</label>
            <input
              id="idLicenseNumber"
              type="text"
              name="Identity.LicenseNumber"
              [(ngModel)]="cipher.identity.licenseNumber"
              appInputVerbatim
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idEmail">{{ "email" | i18n }}</label>
            <input
              id="idEmail"
              type="text"
              name="Identity.Email"
              [(ngModel)]="cipher.identity.email"
              appInputVerbatim
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idPhone">{{ "phone" | i18n }}</label>
            <input
              id="idPhone"
              type="text"
              name="Identity.Phone"
              [(ngModel)]="cipher.identity.phone"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idAddress1">{{ "address1" | i18n }}</label>
            <input
              id="idAddress1"
              type="text"
              name="Identity.Address1"
              [(ngModel)]="cipher.identity.address1"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idAddress2">{{ "address2" | i18n }}</label>
            <input
              id="idAddress2"
              type="text"
              name="Identity.Address2"
              [(ngModel)]="cipher.identity.address2"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idAddress3">{{ "address3" | i18n }}</label>
            <input
              id="idAddress3"
              type="text"
              name="Identity.Address3"
              [(ngModel)]="cipher.identity.address3"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idCity">{{ "cityTown" | i18n }}</label>
            <input
              id="idCity"
              type="text"
              name="Identity.City"
              [(ngModel)]="cipher.identity.city"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idState">{{ "stateProvince" | i18n }}</label>
            <input
              id="idState"
              type="text"
              name="Identity.State"
              [(ngModel)]="cipher.identity.state"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idPostalCode">{{ "zipPostalCode" | i18n }}</label>
            <input
              id="idPostalCode"
              type="text"
              name="Identity.PostalCode"
              [(ngModel)]="cipher.identity.postalCode"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
          <div class="box-content-row" appBoxRow>
            <label for="idCountry">{{ "country" | i18n }}</label>
            <input
              id="idCountry"
              type="text"
              name="Identity.Country"
              [(ngModel)]="cipher.identity.country"
              [readonly]="!cipher.edit && editMode"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="box" *ngIf="cipher.type === cipherType.Login">
      <div class="box-content">
        <ng-container *ngIf="cipher.login.hasUris">
          <div
            role="group"
            class="box-content-row box-content-row-multi"
            appBoxRow
            *ngFor="let u of cipher.login.uris; let i = index; trackBy: trackByFunction"
            attr.aria-label="{{ 'uriPosition' | i18n: i + 1 }}"
          >
            <button
              type="button"
              appStopClick
              (click)="removeUri(u)"
              appA11yTitle="{{ 'remove' | i18n }}"
            >
              <i class="bwi bwi-fw bwi-minus-circle bwi-lg" aria-hidden="true"></i>
            </button>
            <div class="row-main">
              <label for="loginUri{{ i }}">{{ "uriPosition" | i18n: i + 1 }}</label>
              <input
                id="loginUri{{ i }}"
                type="text"
                name="Login.Uris[{{ i }}].Uri"
                [(ngModel)]="u.uri"
                [hidden]="$any(u).showUriOptionsInput === true"
                placeholder="{{ 'ex' | i18n }} https://google.com"
                inputmode="url"
                appInputVerbatim
              />
              <label for="loginUriMatch{{ i }}" class="sr-only">
                {{ "currentUri" | i18n }} {{ i + 1 }}
              </label>
              <select
                *ngIf="currentUris && currentUris.length"
                id="currentUris{{ i }}"
                name="Login.Uris[{{ i }}].CurrentUris"
                [(ngModel)]="u.uri"
                [hidden]="!$any(u).showCurrentUris"
              >
                <option [ngValue]="null">-- {{ "select" | i18n }} --</option>
                <option *ngFor="let u of currentUris" [ngValue]="u">{{ u }}</option>
              </select>
              <label for="loginUriMatch{{ i }}" class="sr-only">
                {{ "matchDetection" | i18n }} {{ i + 1 }}
              </label>
              <select
                id="loginUriMatch{{ i }}"
                name="Login.Uris[{{ i }}].Match"
                [(ngModel)]="u.match"
                [hidden]="
                  $any(u).showOptions === false || ($any(u).showOptions == null && u.match == null)
                "
                (change)="loginUriMatchChanged(u)"
              >
                <option *ngFor="let o of uriMatchOptions" [ngValue]="o.value">{{ o.name }}</option>
              </select>
            </div>
            <div class="action-buttons">
              <button
                type="button"
                *ngIf="currentUris && currentUris.length"
                class="row-btn"
                appStopClick
                appA11yTitle="{{ 'toggleCurrentUris' | i18n }}"
                (click)="toggleUriInput(u)"
                [attr.aria-pressed]="$any(u).showCurrentUris === true"
              >
                <i aria-hidden="true" class="bwi bwi-fw bwi-lg bwi-list"></i>
              </button>
              <button
                type="button"
                class="row-btn"
                appStopClick
                appA11yTitle="{{ 'toggleOptions' | i18n }}"
                (click)="toggleUriOptions(u)"
                [attr.aria-pressed]="$any(u).showOptions === true"
              >
                <i class="bwi bwi-fw bwi-lg bwi-cog" aria-hidden="true"></i>
              </button>
            </div>
          </div>
        </ng-container>
        <button
          type="button"
          appStopClick
          (click)="addUri()"
          class="box-content-row box-content-row-newmulti single-line"
          *ngIf="!(!cipher.edit && editMode)"
        >
          <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i> {{ "newUri" | i18n }}
        </button>
      </div>
    </div>
    <div class="box" *ngIf="showAutoFillOnPageLoadOptions">
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <label for="autofillOnPageLoad">{{ "itemAutoFillOnPageLoad" | i18n }} </label>
          <select
            id="autofillOnPageLoad"
            name="AutofillOnPageLoad"
            [disabled]="reprompt"
            [(ngModel)]="cipher.login.autofillOnPageLoad"
          >
            <option *ngFor="let o of autofillOnPageLoadOptions" [ngValue]="o.value">
              {{ o.name }}
            </option>
          </select>
        </div>
      </div>
      <div class="box-footer !tw-mb-0 !tw-pb-0" *ngIf="reprompt">
        {{ "turnOffMasterPasswordPromptToEditField" | i18n }}
      </div>
    </div>
    <div class="box">
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <label for="folder">{{ "folder" | i18n }}</label>
          <select id="folder" name="FolderId" [(ngModel)]="cipher.folderId">
            <option *ngFor="let f of folders$ | async" [ngValue]="f.id">{{ f.name }}</option>
          </select>
        </div>
        <div class="box-content-row box-content-row-checkbox" appBoxRow>
          <label for="favorite">{{ "favorite" | i18n }}</label>
          <input id="favorite" type="checkbox" name="Favorite" [(ngModel)]="cipher.favorite" />
        </div>
        <div class="box-content-row box-content-row-checkbox" appBoxRow *ngIf="canUseReprompt">
          <label for="passwordPrompt">
            {{ "passwordPrompt" | i18n }}
            <a
              target="_blank"
              rel="noreferrer"
              appA11yTitle="{{ 'learnMore' | i18n }}"
              href="https://bitwarden.com/help/managing-items/#protect-individual-items"
            >
              <i class="bwi bwi-question-circle" aria-hidden="true"></i>
            </a>
          </label>
          <input
            id="passwordPrompt"
            type="checkbox"
            name="PasswordPrompt"
            [ngModel]="reprompt"
            (change)="repromptChanged()"
            [disabled]="!cipher.edit && editMode"
          />
        </div>
        <button
          type="button"
          class="box-content-row box-content-row-flex text-default single-line"
          appStopClick
          (click)="attachments()"
          *ngIf="editMode && showAttachments && !cloneMode"
        >
          <div class="row-main">{{ "attachments" | i18n }}</div>
          <i
            class="bwi bwi-external-link bwi-lg bwi-fw"
            aria-hidden="true"
            *ngIf="openAttachmentsInPopup"
          ></i>
          <i
            class="bwi bwi-angle-right row-sub-icon"
            aria-hidden="true"
            *ngIf="!openAttachmentsInPopup"
          ></i>
        </button>
        <button
          type="button"
          class="box-content-row box-content-row-flex text-default"
          appStopClick
          (click)="editCollections()"
          *ngIf="editMode && cipher.organizationId && !cloneMode"
        >
          <div class="row-main">{{ "collections" | i18n }}</div>
          <i class="bwi bwi-angle-right row-sub-icon" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="box">
      <h2 class="box-header">
        <label for="notes">{{ "notes" | i18n }}</label>
      </h2>
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <textarea
            id="notes"
            name="Notes"
            rows="6"
            [(ngModel)]="cipher.notes"
            [readonly]="!cipher.edit && editMode"
          ></textarea>
        </div>
      </div>
    </div>
    <app-vault-add-edit-custom-fields
      *ngIf="!(!cipher.hasFields && !cipher.edit && editMode)"
      [cipher]="cipher"
      [thisCipherType]="cipher.type"
      [editMode]="editMode"
    >
    </app-vault-add-edit-custom-fields>
    <div class="box" *ngIf="allowOwnershipOptions()">
      <h2 class="box-header">
        {{ "ownership" | i18n }}
      </h2>
      <div class="box-content">
        <div class="box-content-row" appBoxRow>
          <label for="organizationId">{{ "whoOwnsThisItem" | i18n }}</label>
          <select
            id="organizationId"
            class="form-control"
            name="OrganizationId"
            [(ngModel)]="cipher.organizationId"
            (change)="organizationChanged()"
          >
            <option *ngFor="let o of ownershipOptions" [ngValue]="o.value">{{ o.name }}</option>
          </select>
        </div>
      </div>
    </div>
    <div class="box" *ngIf="(!editMode || cloneMode) && cipher.organizationId">
      <h2 class="box-header">
        {{ "collections" | i18n }}
      </h2>
      <div class="box-content" *ngIf="!collections || !collections.length">
        <div class="box-content-row padded no-hover">
          {{ "noCollectionsInList" | i18n }}
        </div>
      </div>
      <div class="box-content" *ngIf="collections && collections.length">
        <div
          class="box-content-row box-content-row-checkbox"
          *ngFor="let c of collections; let i = index"
          appBoxRow
        >
          <label for="collection_{{ i }}">{{ c.name }}</label>
          <input
            id="collection_{{ i }}"
            type="checkbox"
            [(ngModel)]="$any(c).checked"
            name="Collection[{{ i }}].Checked"
          />
        </div>
      </div>
    </div>
    <div class="box list" *ngIf="editMode && !cloneMode && !(!cipher.edit && editMode)">
      <div class="box-content single-line">
        <button
          type="button"
          class="box-content-row"
          appStopClick
          (click)="delete()"
          [appApiAction]="deletePromise"
          #deleteBtn
        >
          <div class="row-main text-danger">
            <div class="icon text-danger" aria-hidden="true">
              <i class="bwi bwi-trash bwi-lg bwi-fw" [hidden]="$any(deleteBtn).loading"></i>
              <i
                class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
                [hidden]="!$any(deleteBtn).loading"
              ></i>
            </div>
            <span>{{ "deleteItem" | i18n }}</span>
          </div>
        </button>
      </div>
    </div>
  </main>
</form>
