zitadel/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html

<app-meta-layout>
    <div class="max-width-container">
        <div class="head" *ngIf="project?.projectId">
            <a [routerLink]="[ '/projects' ]" mat-icon-button>
                <mat-icon class="icon">arrow_back</mat-icon>
            </a>
            <h1>{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.name}}</h1>
            <ng-template appHasRole [appHasRole]="['project.write:'+projectId, 'project.write']">
                <button matTooltip="{{'ACTIONS.EDIT' | translate}}" mat-icon-button (click)="editstate = !editstate"
                    aria-label="Edit project name" *ngIf="isZitadel === false">
                    <mat-icon *ngIf="!editstate">edit</mat-icon>
                    <mat-icon *ngIf="editstate">close</mat-icon>
                </button>
            </ng-template>
            <ng-template appHasRole [appHasRole]="['project.delete:'+projectId, 'project.delete']">
                <button matTooltip="{{'ACTIONS.DELETE' | translate}}" color="warn" mat-icon-button
                    (click)="deleteProject()" aria-label="Edit project name" *ngIf="isZitadel === false">
                    <i class="las la-trash"></i>
                </button>
            </ng-template>

            <span class="fill-space"></span>

            <button mat-stroked-button color="warn"
                [disabled]="isZitadel || (['project.write', 'project.write:'+ project.projectId]| hasRole | async) == false"
                *ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="state-button"
                (click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
            <button mat-stroked-button color="warn"
                [disabled]="isZitadel || (['project.write', 'project.write:'+ project.projectId]| hasRole | async) == false"
                *ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="state-button"
                (click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>

            <div class="full-width">
                <div class="line">
                    <ng-container *ngIf="editstate">
                        <mat-form-field *ngIf="editstate && project?.name" class="formfield"
                            hintLabel="The name is required!">
                            <mat-label>{{'PROJECT.NAME' | translate}}</mat-label>
                            <input matInput [(ngModel)]="project.name" name="name" />
                        </mat-form-field>
                        <button class="icon-button" *ngIf="editstate" mat-icon-button (click)="updateName()">
                            <mat-icon>check</mat-icon>
                        </button>
                    </ng-container>
                    <span class="fill-space"></span>
                </div>
                <p class="desc">{{ 'PROJECT.PAGES.DESCRIPTION' | translate }}</p>
                <p *ngIf="isZitadel" class="zitadel-warning">{{'PROJECT.PAGES.ZITADELPROJECT' | translate}}</p>
            </div>
        </div>

        <ng-container *ngIf="project">
            <ng-template appHasRole [appHasRole]="['project.app.read:' + project.projectId, 'project.app.read']">
                <app-application-grid *ngIf="grid" [disabled]="isZitadel" (changeView)="grid = false"
                    [projectId]="projectId"></app-application-grid>
                <app-card *ngIf="!grid" title="{{ 'PROJECT.APP.TITLE' | translate }}">
                    <div class="card-actions" card-actions>
                        <button mat-icon-button (click)="grid = true">
                            <i matTooltip="show grid view" class="las la-th-large"></i>
                        </button>
                    </div>
                    <app-applications [disabled]="isZitadel" [projectId]="projectId"></app-applications>
                </app-card>
            </ng-template>

            <ng-container *ngIf="isZitadel == false">
                <ng-template appHasRole
                    [appHasRole]="['project.grant.read:' + project.projectId, 'project.grant.read']">
                    <app-card title="{{ 'PROJECT.GRANT.TITLE' | translate }}"
                        description="{{ 'PROJECT.GRANT.DESCRIPTION' | translate }}">
                        <app-project-grants
                            [disabled]="((['project.grant.write', 'project.grant.write:'+ project.projectId]| hasRole | async) && (['org.global.read']| hasRole | async))== false"
                            [projectId]="projectId">
                        </app-project-grants>
                    </app-card>
                </ng-template>

                <ng-template appHasRole [appHasRole]="['project.role.read:' + project.projectId, 'project.role.read']">
                    <app-card title="{{ 'PROJECT.ROLE.TITLE' | translate }}"
                        description="{{ 'PROJECT.ROLE.DESCRIPTION' | translate }}">
                        <app-project-roles
                            [disabled]="(['project.role.write', 'project.role.write:'+ project.projectId]| hasRole | async) == false"
                            [actionsVisible]="true" [projectId]="projectId">
                        </app-project-roles>
                    </app-card>
                </ng-template>

                <ng-template appHasRole [appHasRole]="['user.grant.read']">
                    <app-card *ngIf="project?.projectId" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
                        description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
                        <app-user-grants [context]="UserGrantContext.OWNED_PROJECT" [projectId]="projectId"
                            [allowCreate]="(['user.grant.write', 'user.grant.write:'+projectId] | hasRole) | async"
                            [allowDelete]="(['user.grant.delete','user.grant.delete:'+projectId] | hasRole) | async">
                        </app-user-grants>
                    </app-card>
                </ng-template>
            </ng-container>
        </ng-container>
    </div>
    <div class="side" metainfo>
        <div class="details">
            <div class="row">
                <span class="first">{{'PROJECT.STATE.TITLE' | translate}}:</span>
                <span *ngIf="project && project.state !== undefined"
                    class="second">{{'PROJECT.STATE.'+project.state | translate}}</span>
            </div>
        </div>

        <mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
            <mat-tab label="Details">
                <app-contributors *ngIf="project" [loading]="loading$ | async" [totalResult]="totalMemberResult"
                    [membersSubject]="membersSubject" title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
                    description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}" (addClicked)="openAddMember()"
                    (showDetailClicked)="showDetail()" (refreshClicked)="loadMembers()"
                    [disabled]="(['project.member.write', 'project.member.write:'+ project.projectId]| hasRole | async) == false">
                </app-contributors>
            </mat-tab>
            <mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="flex-col">
                <app-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="project.projectId"></app-changes>
            </mat-tab>
        </mat-tab-group>
    </div>
</app-meta-layout>