@if (canManage) {
  <div class="flex max-w-6xl flex-col gap-6">
    @if (membership(); as currentMembership) {
      <section class="flex flex-col gap-4 rounded-lg border border-divider-regular p-4">
        <div class="grid grid-cols-1 gap-4 md:grid-cols-3 xl:grid-cols-6">
          <div>
            <div class="text-sm text-text-tertiary">
              {{ 'XP.Membership.CurrentScopePlan' | translate: { Default: 'Current management-scope plan' } }}
            </div>
            <div class="font-medium">{{ currentMembership.plan?.name || currentMembership.planId }}</div>
          </div>
          <div>
            <div class="text-sm text-text-tertiary">
              {{ 'XP.Membership.Status' | translate: { Default: 'Status' } }}
            </div>
            <z-badge zType="outline" zShape="pill" class="mt-1">
              {{
                'XP.Membership.MemberStatuses.' + currentMembership.status
                  | translate: { Default: currentMembership.status }
              }}
            </z-badge>
          </div>
          <div>
            <div class="text-sm text-text-tertiary">
              {{ 'XP.Membership.Source' | translate: { Default: 'Source' } }}
            </div>
            <div class="font-medium">
              {{
                'XP.Membership.Sources.' + currentMembership.source | translate: { Default: currentMembership.source }
              }}
            </div>
          </div>
          <div>
            <div class="text-sm text-text-tertiary">
              {{ 'XP.Membership.RenewalMode' | translate: { Default: 'Renewal mode' } }}
            </div>
            <div class="font-medium">
              {{
                'XP.Membership.RenewalModes.' + currentMembership.renewalMode
                  | translate: { Default: currentMembership.renewalMode }
              }}
            </div>
          </div>
          <div>
            <div class="text-sm text-text-tertiary">
              {{ 'XP.Membership.RemainingPoints' | translate: { Default: 'Remaining points' } }}
            </div>
            <div class="font-medium">
              @if (isUnlimited()) {
                <span
                  [attr.aria-label]="'XP.Membership.Unlimited' | translate: { Default: 'Unlimited' }"
                  [title]="'XP.Membership.Unlimited' | translate: { Default: 'Unlimited' }"
                  >∞</span
                >
              } @else {
                {{ remainingPoints() | number: '1.0-2' }}
              }
            </div>
          </div>
          @if (canManagePersonalPoints) {
            <div>
              <div class="text-sm text-text-tertiary">
                {{ 'XP.Membership.PersonalPoints' | translate: { Default: 'Personal points' } }}
              </div>
              <div class="font-medium">{{ personalPointsBalance() | number: '1.0-2' }}</div>
            </div>
          }
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <div class="text-sm text-text-tertiary">
              {{ 'XP.Membership.UsedPoints' | translate: { Default: 'Used points' } }}
            </div>
            <div class="font-medium">
              @if (isUnlimited()) {
                {{ currentMembership.pointsUsed | number: '1.0-2' }} / ∞
              } @else {
                {{ currentMembership.pointsUsed | number: '1.0-2' }} /
                {{ currentMembership.pointsGranted | number: '1.0-2' }}
              }
            </div>
          </div>
          <div>
            <div class="text-sm text-text-tertiary">
              {{ 'XP.Membership.PeriodEnd' | translate: { Default: 'Period end' } }}
            </div>
            <div class="font-medium">{{ currentMembership.currentPeriodEnd | date: 'medium' }}</div>
          </div>
        </div>
        <z-progress-bar [progress]="usedPercent()" zShape="square" />

        <div class="flex flex-wrap justify-end gap-2 border-t border-divider-subtle pt-3">
          @if (currentMembership.status === MembershipStatusEnum.Active) {
            <button z-button zType="secondary" type="button" [disabled]="loading()" (click)="pause()">
              {{ 'XP.Membership.Pause' | translate: { Default: 'Pause' } }}
            </button>
          }
          @if (currentMembership.status === MembershipStatusEnum.Paused) {
            <button z-button zType="secondary" type="button" [disabled]="loading()" (click)="resume()">
              {{ 'XP.Membership.Resume' | translate: { Default: 'Resume' } }}
            </button>
          }
          @if (currentMembership.status !== MembershipStatusEnum.Expired) {
            <button z-button zType="destructive" type="button" [disabled]="loading()" (click)="revoke()">
              {{ 'XP.Membership.Revoke' | translate: { Default: 'Revoke' } }}
            </button>
          }
          @if (!isExternallyManagedMembership()) {
            <button z-button zType="outline" type="button" [disabled]="loading()" (click)="renew()">
              {{ 'XP.Membership.Renew' | translate: { Default: 'Renew' } }}
            </button>
          }
        </div>
      </section>
    } @else {
      <div class="rounded-lg border border-dashed border-divider-regular p-5 text-text-tertiary">
        {{
          'XP.Membership.NoUserMembership' | translate: { Default: 'No membership has been created for this user yet.' }
        }}
      </div>
    }

    @if (isTenantScope && scopeMemberships().length) {
      <section class="flex flex-col gap-4 rounded-lg border border-divider-regular p-4">
        <div>
          <div class="font-semibold text-text-primary">
            {{ 'XP.Membership.MembershipsByScope' | translate: { Default: 'Current plans by scope' } }}
          </div>
          <div class="text-sm text-text-tertiary">
            {{
              'XP.Membership.MembershipsByScopeHint'
                | translate
                  : {
                      Default: "View the tenant plan, each organization's current plan, and upcoming periods."
                    }
            }}
          </div>
        </div>

        <div class="divide-y divide-divider-subtle">
          @for (scopeMembership of scopeMemberships(); track scopeMembership.id) {
            <div class="flex flex-col gap-3 py-3 first:pt-0 last:pb-0">
              <div class="grid grid-cols-1 items-center gap-3 md:grid-cols-[1.2fr_1fr_auto_1fr]">
                <div class="min-w-0">
                  <div class="truncate font-medium text-text-primary">{{ scopeMembershipLabel(scopeMembership) }}</div>
                  <z-badge zType="outline" zShape="pill" class="mt-1">
                    @if (scopeMembership.organizationId) {
                      {{ 'XP.Membership.OrganizationScope' | translate: { Default: 'Organization membership' } }}
                    } @else {
                      {{ 'XP.Membership.TenantScope' | translate: { Default: 'Tenant membership' } }}
                    }
                  </z-badge>
                </div>
                <div class="min-w-0">
                  <div class="text-sm text-text-tertiary">
                    {{ 'XP.Membership.CurrentPlan' | translate: { Default: 'Current plan' } }}
                  </div>
                  <div class="flex min-w-0 flex-wrap items-center gap-2">
                    <span class="truncate font-medium text-text-primary">
                      {{ scopeMembership.plan?.name || scopeMembership.planId }}
                    </span>
                    @if (isEffectiveInScope(scopeMembership)) {
                      <z-badge zType="secondary" zShape="pill">
                        {{ 'XP.Membership.EffectiveInScope' | translate: { Default: 'Effective in this scope' } }}
                      </z-badge>
                    }
                    @if (isCurrentScopeMembership(scopeMembership)) {
                      <z-badge zType="outline" zShape="pill">
                        {{
                          'XP.Membership.CurrentManagementScope' | translate: { Default: 'Current management scope' }
                        }}
                      </z-badge>
                    }
                  </div>
                </div>
                <z-badge zType="outline" zShape="pill">
                  {{
                    'XP.Membership.MemberStatuses.' + scopeMembership.status
                      | translate: { Default: scopeMembership.status }
                  }}
                </z-badge>
                <div>
                  <div class="text-sm text-text-tertiary">
                    {{ 'XP.Membership.PeriodEnd' | translate: { Default: 'Period end' } }}
                  </div>
                  <div class="font-medium text-text-primary">
                    {{ scopeMembership.currentPeriodEnd | date: 'medium' }}
                  </div>
                </div>
              </div>

              @if (upcomingPeriodsForMembership(scopeMembership.id).length) {
                <div class="rounded-lg bg-components-panel-bg px-3">
                  <div class="flex items-center justify-between gap-3 border-b border-divider-subtle py-3">
                    <div class="text-sm font-medium text-text-primary">
                      {{ 'XP.Membership.UpcomingPeriods' | translate: { Default: 'Upcoming periods' } }}
                    </div>
                    <z-badge zType="secondary" zShape="pill">
                      {{ upcomingPeriodsForMembership(scopeMembership.id).length }}
                    </z-badge>
                  </div>
                  @for (period of upcomingPeriodsForMembership(scopeMembership.id); track period.id) {
                    <div
                      class="grid grid-cols-1 items-center gap-3 border-b border-divider-subtle py-3 last:border-b-0 md:grid-cols-[1fr_1.5fr_1fr_auto]"
                    >
                      <div>
                        <div class="text-sm text-text-tertiary">
                          {{ 'XP.Membership.Plan' | translate: { Default: 'Plan' } }}
                        </div>
                        <div class="font-medium text-text-primary">{{ period.planSnapshot.name }}</div>
                      </div>
                      <div>
                        <div class="text-sm text-text-tertiary">
                          {{ 'XP.Membership.EffectivePeriod' | translate: { Default: 'Effective period' } }}
                        </div>
                        <div class="font-medium text-text-primary">
                          {{ period.periodStart | date: 'medium' }} – {{ period.periodEnd | date: 'medium' }}
                        </div>
                      </div>
                      <div>
                        <div class="text-sm text-text-tertiary">
                          {{ 'XP.Membership.CyclePoints' | translate: { Default: 'Plan cycle points' } }}
                        </div>
                        <div class="font-medium text-text-primary">
                          @if (period.pointsGranted === null) {
                            <span
                              [attr.aria-label]="'XP.Membership.Unlimited' | translate: { Default: 'Unlimited' }"
                              [title]="'XP.Membership.Unlimited' | translate: { Default: 'Unlimited' }"
                              >∞</span
                            >
                          } @else {
                            {{ period.pointsGranted | number: '1.0-2' }}
                          }
                        </div>
                      </div>
                      <div class="flex justify-end">
                        @if (isExternallyManagedPeriod(period)) {
                          <span class="text-sm text-text-tertiary">
                            {{
                              'XP.Membership.ExternalPeriodManagedHint'
                                | translate: { Default: 'Refund and cancel in the billing system' }
                            }}
                          </span>
                        } @else if (period.organizationId) {
                          <span class="text-sm text-text-tertiary">
                            {{
                              'XP.Membership.ManageInOrganizationScope'
                                | translate: { Default: 'Switch to the organization scope to manage' }
                            }}
                          </span>
                        } @else if (!canCancelPeriod(period)) {
                          <span class="text-sm text-text-tertiary">
                            {{
                              'XP.Membership.CancelLaterPeriodsFirst'
                                | translate: { Default: 'Cancel later periods first' }
                            }}
                          </span>
                        } @else {
                          <button
                            z-button
                            zType="destructive"
                            zSize="sm"
                            type="button"
                            [disabled]="loading()"
                            (click)="cancelPeriod(period)"
                          >
                            {{ 'XP.Membership.CancelPeriod' | translate: { Default: 'Cancel period' } }}
                          </button>
                        }
                      </div>
                    </div>
                  }
                </div>
              }
            </div>
          }
        </div>
      </section>
    }

    @if (!isTenantScope && scheduledPeriods().length) {
      <section class="flex flex-col gap-4 rounded-lg border border-divider-regular p-4">
        <div class="flex flex-wrap items-start justify-between gap-3">
          <div>
            <div class="font-semibold text-text-primary">
              {{ 'XP.Membership.UpcomingPeriods' | translate: { Default: 'Upcoming periods' } }}
            </div>
            <div class="text-sm text-text-tertiary">
              {{
                'XP.Membership.UpcomingPeriodsHint'
                  | translate
                    : {
                        Default:
                          'Renewed periods start after the current period. The current period and its points stay unchanged.'
                      }
              }}
            </div>
          </div>
          <z-badge zType="outline" zShape="pill">{{ scheduledPeriods().length }}</z-badge>
        </div>

        <div class="divide-y divide-divider-subtle">
          @for (period of scheduledPeriods(); track period.id) {
            <div
              class="grid grid-cols-1 items-center gap-3 py-3 first:pt-0 last:pb-0 md:grid-cols-[1fr_1.5fr_1fr_auto]"
            >
              <div>
                <div class="text-sm text-text-tertiary">
                  {{ 'XP.Membership.Plan' | translate: { Default: 'Plan' } }}
                </div>
                <div class="font-medium">{{ period.planSnapshot.name }}</div>
              </div>
              <div>
                <div class="text-sm text-text-tertiary">
                  {{ 'XP.Membership.EffectivePeriod' | translate: { Default: 'Effective period' } }}
                </div>
                <div class="font-medium">
                  {{ period.periodStart | date: 'medium' }} – {{ period.periodEnd | date: 'medium' }}
                </div>
              </div>
              <div>
                <div class="text-sm text-text-tertiary">
                  {{ 'XP.Membership.CyclePoints' | translate: { Default: 'Plan cycle points' } }}
                </div>
                <div class="font-medium">
                  @if (period.pointsGranted === null) {
                    <span
                      [attr.aria-label]="'XP.Membership.Unlimited' | translate: { Default: 'Unlimited' }"
                      [title]="'XP.Membership.Unlimited' | translate: { Default: 'Unlimited' }"
                      >∞</span
                    >
                  } @else {
                    {{ period.pointsGranted | number: '1.0-2' }}
                  }
                </div>
              </div>
              <div class="flex justify-end">
                @if (isExternallyManagedPeriod(period)) {
                  <span class="text-sm text-text-tertiary">
                    {{
                      'XP.Membership.ExternalPeriodManagedHint'
                        | translate: { Default: 'Refund and cancel in the billing system' }
                    }}
                  </span>
                } @else if (!canCancelPeriod(period)) {
                  <span class="text-sm text-text-tertiary">
                    {{ 'XP.Membership.CancelLaterPeriodsFirst' | translate: { Default: 'Cancel later periods first' } }}
                  </span>
                } @else {
                  <button
                    z-button
                    zType="destructive"
                    zSize="sm"
                    type="button"
                    [disabled]="loading()"
                    (click)="cancelPeriod(period)"
                  >
                    {{ 'XP.Membership.CancelPeriod' | translate: { Default: 'Cancel period' } }}
                  </button>
                }
              </div>
            </div>
          }
        </div>
      </section>
    }

    @if (isExternallyManagedMembership()) {
      <div class="rounded-lg border border-divider-regular bg-components-panel-bg p-4 text-sm text-text-tertiary">
        {{
          'XP.Membership.ExternallyManagedMembershipHint'
            | translate
              : {
                  Default: 'This membership is managed by an external workflow and cannot be replaced or renewed here.'
                }
        }}
      </div>
    } @else {
      <form [formGroup]="assignmentForm" class="flex flex-col gap-3 rounded-lg bg-components-panel-bg p-4">
        <div class="font-semibold text-text-primary">
          {{ 'XP.Membership.AssignPlan' | translate: { Default: 'Assign plan' } }}
        </div>
        <div class="grid grid-cols-1 gap-3 lg:grid-cols-[minmax(220px,1fr)_180px_minmax(240px,1fr)_auto]">
          <z-form-field class="w-full">
            <z-select class="w-full" formControlName="planId">
              @for (plan of plans(); track plan.id) {
                <z-select-item [zValue]="plan.id">{{ plan.name }}</z-select-item>
              }
            </z-select>
          </z-form-field>
          <z-form-field class="w-full">
            <z-select class="w-full" formControlName="renewalMode">
              <z-select-item [zValue]="MembershipRenewalModeEnum.Auto">
                {{ 'XP.Membership.RenewalModes.auto' | translate: { Default: 'Auto renew' } }}
              </z-select-item>
              <z-select-item [zValue]="MembershipRenewalModeEnum.Manual">
                {{ 'XP.Membership.RenewalModes.manual' | translate: { Default: 'Manual renew' } }}
              </z-select-item>
            </z-select>
          </z-form-field>
          <z-form-field class="w-full">
            <input
              z-input
              formControlName="note"
              [placeholder]="'XP.Membership.AssignNote' | translate: { Default: 'Assignment note' }"
            />
          </z-form-field>
          <button
            z-button
            zType="default"
            type="button"
            [disabled]="loading() || assignmentForm.invalid"
            (click)="assign()"
          >
            {{ 'XP.Membership.Assign' | translate: { Default: 'Assign' } }}
          </button>
        </div>
      </form>
    }

    <section class="grid grid-cols-1 gap-4 xl:grid-cols-2">
      <form [formGroup]="cyclePointsForm" class="flex flex-col gap-3 rounded-lg border border-divider-regular p-4">
        <div>
          <div class="font-semibold text-text-primary">
            {{ 'XP.Membership.AdjustCyclePoints' | translate: { Default: 'Adjust cycle points' } }}
          </div>
          <div class="text-sm text-text-tertiary">
            {{
              'XP.Membership.CyclePointsHint' | translate: { Default: 'Only affects the current membership period.' }
            }}
          </div>
        </div>
        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-[110px_110px_minmax(160px,1fr)_auto]">
          <z-form-field class="w-full">
            <z-select class="w-full" formControlName="direction">
              <z-select-item zValue="increase">
                {{ 'XP.Membership.Increase' | translate: { Default: 'Increase' } }}
              </z-select-item>
              <z-select-item zValue="decrease">
                {{ 'XP.Membership.Decrease' | translate: { Default: 'Decrease' } }}
              </z-select-item>
            </z-select>
          </z-form-field>
          <z-form-field class="w-full">
            <input
              z-input
              type="number"
              min="0"
              step="0.001"
              formControlName="points"
              [placeholder]="'XP.Membership.Points' | translate: { Default: 'Points' }"
            />
          </z-form-field>
          <z-form-field class="w-full">
            <input
              z-input
              formControlName="reason"
              [placeholder]="'XP.Membership.AdjustReason' | translate: { Default: 'Adjustment reason' }"
            />
          </z-form-field>
          <button
            z-button
            zType="secondary"
            type="button"
            [disabled]="loading() || cyclePointsForm.invalid || !canAdjustCyclePoints()"
            (click)="adjust()"
          >
            {{ 'XP.Membership.Adjust' | translate: { Default: 'Adjust' } }}
          </button>
        </div>
      </form>

      @if (canManagePersonalPoints) {
        <form [formGroup]="personalPointsForm" class="flex flex-col gap-3 rounded-lg border border-divider-regular p-4">
          <div>
            <div class="font-semibold text-text-primary">
              {{ 'XP.Membership.AdjustPersonalPoints' | translate: { Default: 'Adjust personal points' } }}
            </div>
            <div class="text-sm text-text-tertiary">
              {{
                'XP.Membership.PersonalPointsHint'
                  | translate: { Default: 'Permanent balance. Membership cycle points are consumed first.' }
              }}
            </div>
          </div>
          <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-[110px_110px_minmax(160px,1fr)_auto]">
            <z-form-field class="w-full">
              <z-select class="w-full" formControlName="direction">
                <z-select-item zValue="increase">
                  {{ 'XP.Membership.Increase' | translate: { Default: 'Increase' } }}
                </z-select-item>
                <z-select-item zValue="decrease">
                  {{ 'XP.Membership.Decrease' | translate: { Default: 'Decrease' } }}
                </z-select-item>
              </z-select>
            </z-form-field>
            <z-form-field class="w-full">
              <input
                z-input
                type="number"
                min="0"
                step="0.001"
                formControlName="points"
                [placeholder]="'XP.Membership.Points' | translate: { Default: 'Points' }"
              />
            </z-form-field>
            <z-form-field class="w-full">
              <input
                z-input
                formControlName="reason"
                [placeholder]="'XP.Membership.AdjustReason' | translate: { Default: 'Adjustment reason' }"
              />
            </z-form-field>
            <button
              z-button
              zType="secondary"
              type="button"
              [disabled]="loading() || personalPointsForm.invalid"
              (click)="adjustPersonal()"
            >
              {{ 'XP.Membership.Adjust' | translate: { Default: 'Adjust' } }}
            </button>
          </div>
        </form>
      }
    </section>

    <section class="overflow-hidden rounded-lg border border-divider-regular">
      <div class="border-b border-divider-regular px-4 py-3">
        <div class="font-semibold text-text-primary">
          {{ 'XP.Membership.OperationHistory' | translate: { Default: 'Operation history' } }}
        </div>
        <div class="mt-1 text-sm text-text-tertiary">
          {{
            'XP.Membership.OperationHistoryHint'
              | translate: { Default: 'Recent assignments, point changes, renewals, and status changes.' }
          }}
        </div>
      </div>

      <div class="divide-y divide-divider-subtle">
        @for (entry of auditEntries(); track entry.id) {
          <div class="grid gap-2 px-4 py-3 md:grid-cols-[minmax(0,1fr)_minmax(8rem,auto)_minmax(8rem,auto)]">
            <div class="min-w-0">
              <div class="flex flex-wrap items-center gap-2">
                <span class="text-sm font-medium text-text-primary">
                  {{ 'XP.Membership.LedgerSource.' + entry.source | translate: { Default: entry.source } }}
                </span>
                <z-badge zType="outline" zShape="pill">{{ auditScopeLabel(entry) }}</z-badge>
                @if (entry.pointsDelta) {
                  <z-badge [zType]="entry.pointsDelta > 0 ? 'secondary' : 'outline'" zShape="pill">
                    {{ entry.pointsDelta > 0 ? '+' : '' }}{{ entry.pointsDelta | number: '1.0-2' }}
                  </z-badge>
                }
              </div>
              <div class="mt-1 truncate text-sm text-text-tertiary" [title]="auditReason(entry)">
                {{ auditReason(entry) }}
              </div>
            </div>
            <div>
              <div class="text-xs text-text-tertiary">
                {{ 'XP.Membership.Operator' | translate: { Default: 'Operator' } }}
              </div>
              <div class="mt-1 truncate text-sm text-text-primary" [title]="auditActorLabel(entry)">
                {{ auditActorLabel(entry) }}
              </div>
            </div>
            <div>
              <div class="text-xs text-text-tertiary">
                {{ 'XP.Membership.OperationTime' | translate: { Default: 'Time' } }}
              </div>
              <div class="mt-1 text-sm text-text-primary">{{ entry.createdAt | date: 'medium' }}</div>
            </div>
          </div>
        } @empty {
          <div class="px-4 py-8 text-center text-sm text-text-tertiary">
            {{ 'XP.Membership.NoOperationHistory' | translate: { Default: 'No membership operations yet.' } }}
          </div>
        }
      </div>
    </section>
  </div>
}