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

<app-meta-layout>
    <div class="max-width-container">
        <div class="head" *ngIf="project?.id">
            <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 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>

            <div class="full-width">
                <ng-container *ngIf="editstate">
                    <mat-form-field *ngIf="editstate && project?.name" class="formfield"
                        hintLabel="The name is required!">
                        <mat-label>Project Name</mat-label>
                        <input matInput [(ngModel)]="project.name" />
                    </mat-form-field>
                    <button class="icon-button" *ngIf="editstate" mat-icon-button (click)="updateName()">
                        <mat-icon>check</mat-icon>
                    </button>
                    <button mat-stroked-button color="accent" [disabled]="isZitadel"
                        *ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="second"
                        (click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
                    <button mat-stroked-button color="accent" [disabled]="isZitadel"
                        *ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="second"
                        (click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
                </ng-container>
                <p class="desc">{{ 'PROJECT.PAGES.DESCRIPTION' | translate }}</p>
                <p *ngIf="isZitadel" class="zitadel-warning">This belongs to Zitadel project. If you change something,
                    Zitadel
                    may not behave as intended!</p>
            </div>
        </div>

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

            <ng-container *ngIf="isZitadel == false">
                <ng-template appHasRole [appHasRole]="['project.grant.read:' + project.id, 'project.grant.read']">
                    <app-card title="{{ 'PROJECT.GRANT.TITLE' | translate }}"
                        description="{{ 'PROJECT.GRANT.DESCRIPTION' | translate }}">
                        <app-project-grants [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
                            [projectId]="projectId">
                        </app-project-grants>
                    </app-card>
                </ng-template>

                <ng-template appHasRole [appHasRole]="['project.role.read:' + project.id, 'project.role.read']">
                    <app-card title="{{ 'PROJECT.ROLE.TITLE' | translate }}"
                        description="{{ 'PROJECT.ROLE.DESCRIPTION' | translate }}">
                        <app-project-roles [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
                            [actionsVisible]="true" [projectId]="projectId">
                        </app-project-roles>
                    </app-card>
                </ng-template>
            </ng-container>
        </ng-container>
    </div>
    <metainfo class="side">
        <div class="details">
            <div class="row">
                <span class="first">{{'PROJECT.TYPE.TITLE' | translate}}:</span>
                <span class="second">{{'PROJECT.TYPE.'+ ProjectType.PROJECTTYPE_OWNED | translate}}</span>
            </div>
            <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-project-contributors *ngIf="project"
                    [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
                    [projectType]="ProjectType.PROJECTTYPE_OWNED" [project]="project">
                </app-project-contributors>
            </mat-tab>
            <mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="flex-col">
                <app-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="project.id"></app-changes>
            </mat-tab>
        </mat-tab-group>
    </metainfo>
</app-meta-layout>