zitadel/console/src/app/pages/orgs/policy-grid/policy-grid.component.html

<h1>{{'ORG.POLICY.TITLE' | translate}}</h1>

<p class="top-desc">{{'ORG.POLICY.DESCRIPTION' | translate}}</p>

<div class="row-lyt">
    <div class="p-item card">
        <div class="avatar">
            <mat-icon class="icon" svgIcon="mdi_textbox_password"></mat-icon>
        </div>
        <div class="title">
            <span>{{'ORG.POLICY.PWD_COMPLEXITY.TITLE' | translate}}</span>
            <button mat-icon-button disabled>
                <i *ngIf="complexityPolicy" class="icon las la-check-circle"></i>
            </button>
        </div>

        <p *ngIf="complexityPolicy?.description; else showDescComplexity" class="desc">
            {{ complexityPolicy.description }}</p>
        <ng-template #showDescComplexity>
            <p class="desc">
                {{'ORG.POLICY.PWD_COMPLEXITY.DESCRIPTION' | translate}}</p>
        </ng-template>

        <span class="fill-space"></span>
        <div class="btn-wrapper">
            <button [disabled]="complexityPolicy" [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY,'create' ]"
                color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
            <button [disabled]="!complexityPolicy" [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY ]"
                mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
        </div>
    </div>

    <ng-template appHasRole [appHasRole]="['iam.policy.read']">
        <div class="p-item card">
            <div class="avatar">
                <i class="icon las la-gem"></i>
            </div>
            <div class="title">
                <span>{{'ORG.POLICY.IAM_POLICY.TITLE' | translate}}</span>
                <button mat-icon-button disabled>
                    <i *ngIf="iamPolicy" class="icon las la-check-circle"></i>
                </button>
            </div>

            <p *ngIf="iamPolicy?.description; else showDescIAM" class="desc">
                {{ iamPolicy.description }}</p>
            <ng-template #showDescIAM>
                <p class="desc">
                    {{'ORG.POLICY.IAM_POLICY.DESCRIPTION' | translate}}</p>
            </ng-template>

            <span class="fill-space"></span>
            <div class="btn-wrapper">
                <ng-template appHasRole [appHasRole]="['iam.policy.write']">
                    <button [disabled]="iamPolicy" [routerLink]="[ 'policy', PolicyComponentType.IAM,'create' ]"
                        color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
                    <button [disabled]="!iamPolicy" [routerLink]="[ 'policy', PolicyComponentType.IAM ]"
                        mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
                </ng-template>
            </div>
        </div>
    </ng-template>

    <ng-template appHasRole [appHasRole]="['policy.read']">
        <div class="p-item card">
            <div class="avatar">
                <i class="icon las la-gem"></i>
            </div>
            <div class="title">
                <span>{{'ORG.POLICY.LOGIN_POLICY.TITLE' | translate}}</span>
                <button mat-icon-button disabled>
                    <i *ngIf="loginPolicy" class="icon las la-check-circle"></i>
                </button>
            </div>


            <ng-template #showDescIAM>
                <p class="desc">
                    {{'ORG.POLICY.LOGIN_POLICY.DESCRIPTION' | translate}}</p>
            </ng-template>

            <span class="fill-space"></span>
            <div class="btn-wrapper">
                <ng-template appHasRole [appHasRole]="['policy.write']">
                    <button [disabled]="loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN,'create' ]"
                        color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
                    <button [disabled]="!loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN ]"
                        mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
                </ng-template>
            </div>
        </div>
    </ng-template>
</div>