<ng-container *ngIf="selection">
  <div *ngIf="user">
    <div *ngIf="keys.length">
      <legend i18n>Keys</legend>
      <cd-table
        [data]="keys"
        [columns]="keysColumns"
        columnMode="flex"
        selectionType="single"
        forceIdentifier="true"
        (updateSelection)="updateKeysSelection($event)"
      >
        <cd-table-actions
          class="table-actions"
          [permission]="{ read: true }"
          [selection]="selection"
          [tableActions]="tableAction"
        ></cd-table-actions>
      </cd-table>
    </div>

    <legend i18n>Details</legend>
    <table
      class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md"
    >
      <tbody>
        <tr>
          <td i18n
              class="bold w-25">Tenant</td>
          <td class="w-75">{{ user.tenant }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold w-25">User ID</td>
          <td class="w-75">{{ user.uid }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold w-25">Username</td>
          <td class="w-75">{{ user.uid }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold">Full name</td>
          <td>{{ user.display_name }}</td>
        </tr>
        <tr *ngIf="user.email?.length">
          <td i18n
              class="bold">Email address</td>
          <td>{{ user.email }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold">Suspended</td>
          <td>{{ user.suspended | booleanText }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold">System user</td>
          <td>{{ user.system | booleanText }}</td>
        </tr>
        <tr>
          <td i18n
              class="bold">Maximum buckets</td>
          <td>{{ user.max_buckets | map: maxBucketsMap }}</td>
        </tr>
        @if (user.type === 'rgw' && selection.account?.id){
        <tr>
          <td i18n
              class="bold">Managed policies</td>
          <td i18n>{{ extractPolicyNamesFromArns(user.managed_user_policies) }}</td>
        </tr>
        }
        <tr *ngIf="user.subusers && user.subusers.length">
          <td i18n
              class="bold">Subusers</td>
          <td>
            <div *ngFor="let subuser of user.subusers">
              {{ subuser.id }} ({{ subuser.permissions }})
            </div>
          </td>
        </tr>
        <tr *ngIf="user.caps && user.caps.length">
          <td i18n
              class="bold">Capabilities</td>
          <td>
            <div *ngFor="let cap of user.caps">{{ cap.type }} ({{ cap.perm }})</div>
          </td>
        </tr>
        <tr *ngIf="user.mfa_ids?.length">
          <td i18n
              class="bold">MFAs(Id)</td>
          <td>{{ user.mfa_ids | join }}</td>
        </tr>
      </tbody>
    </table>

    <ng-container *ngIf="selection.account && selection.account?.id">
      <legend i18n>Account Details</legend>
      <table class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md"
             id="accountsDetails">
        <tbody>
          <tr>
            <td i18n
                class="bold w-25">Account ID</td>
            <td class="w-75">{{ selection.account?.id }}</td>
          </tr>
          <tr>
            <td i18n
                class="bold w-25">Name</td>
            <td class="w-75">{{ selection.account?.name }}</td>
          </tr>
          <tr>
            <td i18n
                class="bold w-25">Tenant</td>
            <td class="w-75">{{ selection.account?.tenant || '-'}}</td>
          </tr>
          <tr>
            <td i18n
                class="bold w-25">User type</td>
            <td class="w-75"
                i18n>{{ user?.type === 'root' ? 'Account root user' : 'rgw user' }}</td>
          </tr>
        </tbody>
      </table>
    </ng-container>

    <!-- User quota -->
    <div *ngIf="user.user_quota">
      <legend i18n>User quota</legend>
      <table
        class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md"
      >
        <tbody>
          <tr>
            <td i18n
                class="bold w-25">Enabled</td>
            <td class="w-75">{{ user.user_quota.enabled | booleanText }}</td>
          </tr>
          <tr>
            <td i18n
                class="bold">Maximum size</td>
            <td *ngIf="!user.user_quota.enabled">-</td>
            <td *ngIf="user.user_quota.enabled && user.user_quota.max_size <= -1"
                i18n>
              Unlimited
            </td>
            <td *ngIf="user.user_quota.enabled && user.user_quota.max_size > -1">
              {{ user.user_quota.max_size | dimlessBinary }}
            </td>
          </tr>
          <tr>
            <td i18n
                class="bold">Maximum objects</td>
            <td *ngIf="!user.user_quota.enabled">-</td>
            <td *ngIf="user.user_quota.enabled && user.user_quota.max_objects <= -1"
                i18n>
              Unlimited
            </td>
            <td *ngIf="user.user_quota.enabled && user.user_quota.max_objects > -1">
              {{ user.user_quota.max_objects }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Bucket quota -->
    <div *ngIf="user.bucket_quota">
      <legend i18n>Bucket quota</legend>
      <table
        class="cds--data-table--sort cds--data-table--no-border cds--data-table cds--data-table--md"
      >
        <tbody>
          <tr>
            <td i18n
                class="bold w-25">Enabled</td>
            <td class="w-75">{{ user.bucket_quota.enabled | booleanText }}</td>
          </tr>
          <tr>
            <td i18n
                class="bold">Maximum size</td>
            <td *ngIf="!user.bucket_quota.enabled">-</td>
            <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_size <= -1"
                i18n>
              Unlimited
            </td>
            <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_size > -1">
              {{ user.bucket_quota.max_size | dimlessBinary }}
            </td>
          </tr>
          <tr>
            <td i18n
                class="bold">Maximum objects</td>
            <td *ngIf="!user.bucket_quota.enabled">-</td>
            <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_objects <= -1"
                i18n>
              Unlimited
            </td>
            <td *ngIf="user.bucket_quota.enabled && user.bucket_quota.max_objects > -1">
              {{ user.bucket_quota.max_objects }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- User Rate Limit -->
    <div *ngIf="user.user_ratelimit">
      <cd-rgw-rate-limit-details
        [rateLimitConfig]="user.user_ratelimit"
        [type]="'user'"
      ></cd-rgw-rate-limit-details>
    </div>
  </div>
</ng-container>
