@if (workspaces()) {
  @if (workspaces().length === 0) {
    <div class="flex-1 flex justify-center items-center">
      <button type="button" class="btn btn-primary px-4 py-2 text-lg rounded-xl" (click)="newWorkspace()">
        {{ 'PAC.Xpert.CreateWorkspaceStart' | translate: { Default: 'Create a workspace to get started!' } }}
      </button>
    </div>
  } @else {
    <div class="p-4 mt-10 w-96">
      <h2 class="text-xl font-semibold mb-4">
        {{ 'PAC.Xpert.WelcomeBack' | translate: { Default: 'Welcome Back!' } }}
      </h2>
      <p class="mb-4">
        {{ 'PAC.Xpert.RecentWorkspaces' | translate: { Default: 'Here are your recently accessed workspaces:' } }}
      </p>
      <div class="grid grid-cols-1">
        @for (workspace of workspaces(); track workspace.id) {
          <div class="group rounded-xl py-2 pl-4 pr-2 flex items-center justify-between hover:bg-hover-bg">
            <div class="text-text-primary font-medium">
              @if (me().id === workspace.ownerId) {
                <i
                  class="ri-user-2-fill text-text-secondary"
                  [zTooltip]="'PAC.Xpert.YouAreOwner' | translate: { Default: 'You are owner' }"
                ></i>
              }
              {{ workspace.name }}
            </div>
            <button
              class="opacity-0 group-hover:opacity-100 bg-primary text-primary-foreground py-1 px-3 rounded-lg shadow-sm hover:bg-primary/80 transition-all"
              (click)="navigate(workspace)"
            >
              {{ 'PAC.Xpert.Open' | translate: { Default: 'Open' } }}
            </button>
          </div>
        }
      </div>
    </div>
  }
}