Asymmetrik/ngx-starter

<div class="cards row pb-5">
    <div class="col col-na-xl-7 col-12">
        <div class="card">
            <div class="card-header">
                <h2>Members</h2>
            </div>
            <div class="card-body">
                <list-team-members [team]="team()" />
            </div>
        </div>
    </div>
    <div class="col col-na-xl-5 col-12">
        <div class="card">
            <div class="card-header">
                <h2>Details</h2>
                @if (isTeamAdmin()) {
                    <button
                        class="btn btn-outline-primary ms-3"
                        type="button"
                        [disabled]="isEditing()"
                        (click)="edit()"
                    >
                        <span class="fa-solid fa-lg fa-pencil"></span>
                    </button>
                }
                @if (isEditing()) {
                    <div class="inline-edit-header-btns ms-auto">
                        <button
                            class="btn btn-outline-primary"
                            type="button"
                            (click)="cancelEdit()"
                        >
                            Cancel
                        </button>
                        <button
                            class="btn btn-primary ms-2"
                            type="button"
                            [disabled]="!editTeamForm.form.valid"
                            (click)="saveEdit()"
                        >
                            Save
                        </button>
                    </div>
                }
            </div>
            <div class="card-body" [class.editing]="isEditing()">
                <form id="edit-team-form" #editTeamForm="ngForm">
                    <div class="form-inline-edit" [class.mb-3]="isEditing()">
                        <div class="form-inline-edit-item">
                            <label class="col col-form-label" for="name">Name</label>
                            @if (!isEditing()) {
                                <div class="col col-form-readonly-value">
                                    <div>{{ team().name || '' | titlecase }}</div>
                                </div>
                            } @else {
                                <div class="col">
                                    <input
                                        class="form-control"
                                        id="name"
                                        name="name"
                                        placeholder="Enter name"
                                        required
                                        [(ngModel)]="teamEditCopy.name"
                                    />
                                </div>
                            }
                        </div>
                        <div class="form-inline-edit-item">
                            <label class="col col-form-label" for="description">Description</label>
                            @if (!isEditing()) {
                                <div class="col col-form-readonly-value">
                                    <div style="white-space: pre-wrap">
                                        {{ team().description }}
                                    </div>
                                </div>
                            } @else {
                                <div class="col">
                                    <textarea
                                        class="form-control"
                                        id="description"
                                        name="description"
                                        placeholder="Enter description"
                                        [(ngModel)]="teamEditCopy.description"
                                    >
                                    </textarea>
                                </div>
                            }
                        </div>
                        @if (
                            team().implicitMembers &&
                            implicitMembersStrategy() === 'roles' &&
                            ((team().requiresExternalRoles.length || 0) > 0 || isEditing())
                        ) {
                            <div class="form-inline-edit-item">
                                <label class="col col-form-label" for="externalRoles">
                                    External Roles
                                </label>
                                @if (!isEditing()) {
                                    <div class="col col-form-readonly-value">
                                        <div>
                                            {{ team().requiresExternalRoles | join: ', ' }}
                                        </div>
                                    </div>
                                } @else {
                                    <div class="col">
                                        <ng-select
                                            id="externalRoles"
                                            name="externalRoles"
                                            appUserExternalRolesSelect
                                            multi-select
                                            placeholder="Start typing a role..."
                                            [(ngModel)]="teamEditCopy.requiresExternalRoles"
                                        />
                                    </div>
                                }
                            </div>
                        }
                        @if (
                            team().implicitMembers &&
                            implicitMembersStrategy() === 'teams' &&
                            ((team().requiresExternalTeams.length || 0) > 0 || isEditing())
                        ) {
                            <div class="form-inline-edit-item">
                                <label class="col col-form-label" for="externalTeams">
                                    External Teams
                                </label>
                                @if (!isEditing()) {
                                    <div class="col col-form-readonly-value">
                                        <div>
                                            {{ team().requiresExternalTeams | join: ', ' }}
                                        </div>
                                    </div>
                                } @else {
                                    <div class="col">
                                        <ng-select
                                            id="externalTeams"
                                            name="externalTeams"
                                            multi-select
                                            placeholder="Start typing a team..."
                                            [(ngModel)]="teamEditCopy.requiresExternalTeams"
                                        />
                                    </div>
                                }
                            </div>
                        }
                        <div class="form-inline-edit-item">
                            <div class="col col-form-label">Date Created</div>
                            <div class="col col-form-readonly-value">
                                <div>{{ team().created | utcDate: 'yyyy-MM-dd' }}</div>
                            </div>
                        </div>
                        @if (team().parent) {
                            <div class="form-inline-edit-item">
                                <div class="col col-form-label">Parent</div>
                                <div class="col col-form-readonly-value">
                                    <div>
                                        <a
                                            [routerLink]="[
                                                '/team',
                                                team().parent?._id || team().parent
                                            ]"
                                        >
                                            {{ team().parent?.name ?? 'Unknown' }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </form>
                @if (isEditing()) {
                    <div class="inline-edit-btns text-end">
                        <button
                            class="btn btn-outline-primary"
                            type="button"
                            (click)="cancelEdit()"
                        >
                            Cancel
                        </button>
                        <button
                            class="btn btn-primary ms-2"
                            type="button"
                            [disabled]="!editTeamForm.form.valid"
                            (click)="saveEdit()"
                        >
                            Save
                        </button>
                    </div>
                }
            </div>
        </div>
    </div>
    @if (nestedTeamsEnabled()) {
        <div class="col col-na-xl-7 col-12">
            <div class="card">
                <div class="card-header">
                    <h2>Sub-Teams</h2>
                </div>
                <div class="card-body">
                    <app-list-sub-teams embedded [parent]="team()" />
                </div>
            </div>
        </div>
    }
</div>