@let cart = this.cart();
@let term = this.term();
@let hideTerm = this.hidePricingTerm();
<div class="tw-size-full">
  <div class="tw-flex tw-items-center tw-pb-2 tw-gap-0.5">
    <div class="tw-flex tw-items-center">
      @if (this.header(); as header) {
        <ng-container *ngTemplateOutlet="header; context: { total: total() }" />
      } @else {
        <h2
          bitTypography="h4"
          id="purchase-summary-heading"
          class="!tw-m-0"
          data-testid="purchase-summary-heading-total"
        >
          {{ "total" | i18n }}: {{ total() | currency: "USD" : "symbol" }} USD
        </h2>
        <span bitTypography="h3">&nbsp;</span>
        @if (!hideTerm) {
          <span bitTypography="body1" class="tw-text-muted"> / {{ term }} </span>
        }
      }
    </div>
    <button
      type="button"
      size="small"
      (click)="toggleExpanded()"
      [bitIconButton]="isExpanded() ? 'bwi-angle-up' : 'bwi-angle-down'"
      [label]="
        isExpanded() ? ('Collapse purchase details' | i18n) : ('Expand purchase details' | i18n)
      "
      [attr.aria-expanded]="isExpanded()"
      [attr.aria-controls]="'purchase-summary-details'"
      data-testid="toggle-purchase-summary-details"
    ></button>

    @if (showDiscountBadges()) {
      @for (discount of cart.discounts; track discount) {
        <billing-discount-badge class="tw-mr-1" [discount]="discount"></billing-discount-badge>
      }
    }
  </div>

  @if (isExpanded()) {
    <div id="purchase-summary-details" class="tw-pb-2">
      <!-- Password Manager Section -->
      <div id="password-manager" class="tw-border-b tw-border-secondary-100 tw-pb-2">
        <div class="tw-flex tw-justify-between tw-mb-1">
          <h3 bitTypography="h5" class="tw-text-muted tw-font-semibold">
            {{ "passwordManager" | i18n }}
          </h3>
        </div>

        <!-- Password Manager Members -->
        <div id="password-manager-members" class="tw-flex tw-justify-between">
          <div class="tw-flex-1">
            @let passwordManagerSeats = cart.passwordManager.seats;
            <div bitTypography="body1" class="tw-text-muted tw-font-normal">
              {{ passwordManagerSeats.quantity }}
              {{
                translateWithParams(
                  passwordManagerSeats.translationKey,
                  passwordManagerSeats.translationParams
                )
              }}
              @if (!passwordManagerSeats.hideBreakdown) {
                x
                {{ passwordManagerSeats.cost | currency: "USD" : "symbol" }}
                @if (!hideTerm) {
                  /
                  {{ term }}
                }
              }
            </div>
          </div>
          <div
            bitTypography="body1"
            class="tw-text-muted tw-font-normal"
            data-testid="password-manager-total"
          >
            {{ passwordManagerSeatsTotal() | currency: "USD" : "symbol" }}
          </div>
        </div>

        <!-- Password Manager Seats Discount -->
        @if (passwordManagerSeatsDiscountAmount() > 0) {
          <div class="tw-flex tw-justify-between" data-testid="password-manager-seats-discount">
            <div
              bitTypography="body1"
              class="tw-text-success-600"
              data-testid="password-manager-seats-discount-label"
            >
              {{ passwordManagerSeatsDiscountLabel() }}
            </div>
            <div
              bitTypography="body1"
              class="tw-text-success-600"
              data-testid="password-manager-seats-discount-amount"
            >
              -{{ passwordManagerSeatsDiscountAmount() | currency: "USD" : "symbol" }}
            </div>
          </div>
        }

        <!-- Additional Storage -->
        @let additionalStorage = cart.passwordManager.additionalStorage;
        @if (additionalStorage) {
          <div id="additional-storage" class="tw-flex tw-justify-between">
            <div class="tw-flex-1">
              <div bitTypography="body1" class="tw-text-muted tw-font-normal">
                {{ additionalStorage.quantity }}
                {{
                  translateWithParams(
                    additionalStorage.translationKey,
                    additionalStorage.translationParams
                  )
                }}
                @if (!additionalStorage.hideBreakdown) {
                  x {{ additionalStorage.cost | currency: "USD" : "symbol" }}
                  @if (!hideTerm) {
                    /
                    {{ term }}
                  }
                }
              </div>
            </div>
            <div
              bitTypography="body1"
              class="tw-text-muted tw-font-normal"
              data-testid="additional-storage-total"
            >
              {{ additionalStorageTotal() | currency: "USD" : "symbol" }}
            </div>
          </div>
        }
      </div>

      <!-- Secrets Manager Section -->
      @let secretsManagerSeats = cart.secretsManager?.seats;
      @if (secretsManagerSeats) {
        <div id="secrets-manager" class="tw-border-b tw-border-secondary-100 tw-py-2">
          <div class="tw-flex tw-justify-between">
            <div bitTypography="h5" class="tw-text-muted tw-font-semibold">
              {{ "secretsManager" | i18n }}
            </div>
          </div>

          <!-- Secrets Manager Members -->
          <div id="secrets-manager-members" class="tw-flex tw-justify-between">
            <div bitTypography="body1" class="tw-text-muted tw-font-normal">
              {{ secretsManagerSeats.quantity }}
              {{
                translateWithParams(
                  secretsManagerSeats.translationKey,
                  secretsManagerSeats.translationParams
                )
              }}
              @if (!secretsManagerSeats.hideBreakdown) {
                x
                {{ secretsManagerSeats.cost | currency: "USD" : "symbol" }}
                @if (!hideTerm) {
                  /
                  {{ term }}
                }
              }
            </div>
            <div
              bitTypography="body1"
              class="tw-text-muted tw-font-normal"
              data-testid="secrets-manager-seats-total"
            >
              {{ secretsManagerSeatsTotal() | currency: "USD" : "symbol" }}
            </div>
          </div>

          <!-- Additional Service Accounts -->
          @let additionalServiceAccounts = cart.secretsManager?.additionalServiceAccounts;
          @if (additionalServiceAccounts) {
            <div id="additional-service-accounts" class="tw-flex tw-justify-between">
              <div bitTypography="body1" class="tw-text-muted tw-font-normal">
                {{ additionalServiceAccounts.quantity }}
                {{
                  translateWithParams(
                    additionalServiceAccounts.translationKey,
                    additionalServiceAccounts.translationParams
                  )
                }}
                @if (!additionalServiceAccounts.hideBreakdown) {
                  x
                  {{ additionalServiceAccounts.cost | currency: "USD" : "symbol" }}
                  @if (!hideTerm) {
                    /
                    {{ term }}
                  }
                }
              </div>
              <div
                bitTypography="body1"
                class="tw-text-muted"
                data-testid="additional-service-accounts-total"
              >
                {{ additionalServiceAccountsTotal() | currency: "USD" : "symbol" }}
              </div>
            </div>
          }
        </div>
      }

      <!-- Discounts -->
      @for (discountItem of discountLineItems(); track discountItem.label) {
        @if (discountItem.amount > 0) {
          <div
            class="tw-flex tw-justify-between tw-border-b tw-border-secondary-100 tw-py-2"
            data-testid="discount-section"
          >
            <div bitTypography="body1" class="tw-text-success-600">{{ discountItem.label }}</div>
            <div bitTypography="body1" class="tw-text-success-600" data-testid="discount-amount">
              -{{ discountItem.amount | currency: "USD" : "symbol" }}
            </div>
          </div>
        }
      }

      <!-- Credit -->
      @if (creditAmount() > 0) {
        <div
          id="credit-section"
          class="tw-flex tw-justify-between tw-border-b tw-border-secondary-100 tw-py-2"
          data-testid="credit-section"
        >
          <div bitTypography="body1" class="tw-text-muted tw-font-normal">
            {{ translateWithParams(cart.credit!.translationKey, cart.credit!.translationParams) }}
          </div>
          <div
            bitTypography="body1"
            class="tw-text-muted tw-font-normal"
            data-testid="credit-amount"
          >
            -{{ creditAmount() | currency: "USD" : "symbol" }}
          </div>
        </div>
      }

      <!-- Estimated Tax -->
      <div
        id="estimated-tax-section"
        class="tw-flex tw-justify-between tw-border-b tw-border-secondary-100 tw-pt-2 tw-pb-0.5"
      >
        <h3 bitTypography="h5" class="tw-text-muted tw-font-semibold">
          {{ "estimatedTax" | i18n }}
        </h3>
        <div bitTypography="body1" class="tw-text-muted" data-testid="estimated-tax">
          {{ estimatedTax() | currency: "USD" : "symbol" }}
        </div>
      </div>

      <!-- Total -->
      <div id="total-section" class="tw-flex tw-justify-between tw-items-center tw-pt-2">
        <h3 bitTypography="h5" class="tw-text-muted tw-font-semibold">{{ "total" | i18n }}</h3>
        <div bitTypography="body1" class="tw-text-muted" data-testid="final-total">
          {{ total() | currency: "USD" : "symbol" }}
          @if (!hidePricingTerm()) {
            / {{ term }}
          }
        </div>
      </div>
    </div>
  }
</div>