Asymmetrik/ngx-starter

<section>
    <!-- Alert Notifications -->
    <system-alert />

    <form role="form" autocomplete="off" novalidate #form="ngForm" (ngSubmit)="save()">
        <div>
            <h2 skipTo>Create Team</h2>
            Provide some basic metadata to create a new team
        </div>

        <!-- Required Indicator -->
        <div>
            <span class="required">
                <span class="text-danger"><strong> *</strong></span> Required
            </span>
        </div>

        <!-- Team Name -->
        <div class="mb-3 pt-4">
            <label class="form-label form-required" for="name">Team Name</label>
            <input
                class="form-control"
                id="name"
                name="name"
                type="text"
                placeholder="Enter team name..."
                required
                [(ngModel)]="team.name"
            />
        </div>

        <!-- Team Admin -->
        @if (isAdmin()) {
            <div class="mb-3">
                <label class="form-label form-required" for="teamAdmin">Team Admin</label>
                <ng-select
                    id="teamAdmin"
                    name="teamAdmin"
                    bindLabel="name"
                    placeholder="Search for user..."
                    required
                    style="width: 400px"
                    [(ngModel)]="teamAdmin"
                    [items]="typeaheadUsers()"
                    [loading]="usersLoading()"
                    [typeahead]="usersInput$"
                />
                <button
                    class="btn btn-sm btn-link px-0 pb-0"
                    type="button"
                    (click)="setCurrentUserAsAdmin()"
                >
                    I am the Team Admin
                </button>
            </div>
        }

        <!-- Description -->
        <div class="mb-3">
            <label class="form-label" for="description">Description</label>
            <textarea
                class="form-control"
                id="description"
                name="description"
                placeholder="Enter description..."
                rows="3"
                [(ngModel)]="team.description"
            ></textarea>
        </div>

        <!-- Team Parent -->
        @if (nestedTeamsEnabled()) {
            <div class="mb-3">
                <label class="form-label" for="parent">Parent Team</label>
                <ng-select
                    class="d-block"
                    id="parent"
                    name="parent"
                    appTeamSelect
                    bindLabel="name"
                    placeholder="Select parent..."
                    style="width: 400px"
                    [(ngModel)]="team.parent"
                />
            </div>
        }

        <!-- Implicit Teams Members -->
        @if (implicitMembersStrategy() !== undefined) {
            <div class="mb-3">
                <div class="form-label form-required">Implicit Team Members</div>
                <p class="mt-n1 mb-1">
                    Do you want to automatically grant users access to team based on external
                    {{ implicitMembersStrategy() }}?
                </p>
                <div class="form-check mb-2">
                    <input
                        class="form-check-input"
                        id="implicit-members-option-yes"
                        name="name-type-option-radio"
                        type="radio"
                        [value]="true"
                        required
                        [(ngModel)]="team.implicitMembers"
                    />
                    <label class="form-check-label" for="implicit-members-option-yes">Yes</label>
                </div>
                <div class="form-check mb-2">
                    <input
                        class="form-check-input"
                        id="implicit-members-option-no"
                        name="name-type-option-radio"
                        type="radio"
                        [value]="false"
                        required
                        [(ngModel)]="team.implicitMembers"
                    />
                    <label class="form-check-label" for="implicit-members-option-no">No</label>
                </div>
            </div>
        }

        @if (implicitMembersStrategy() === 'roles') {
            <!-- External Roles -->
            <div class="mb-3" [hidden]="!team.implicitMembers">
                <label class="form-label" for="externalRoles">External Roles</label>
                <ng-select
                    id="externalRoles"
                    name="externalRoles"
                    appUserExternalRolesSelect
                    multi-select
                    placeholder="Start typing a role..."
                    [(ngModel)]="team.requiresExternalRoles"
                />
            </div>
        } @else if (implicitMembersStrategy() === 'teams') {
            <!-- External Teams -->
            <div class="mb-3" [hidden]="!team.implicitMembers">
                <label class="form-label" for="externalTeams">External Teams</label>
                <ng-select
                    id="externalTeams"
                    name="externalTeams"
                    multi-select
                    placeholder="Start typing a team..."
                    [(ngModel)]="team.requiresExternalTeams"
                />
            </div>
        }

        <div class="mb-3">
            <div class="text-end">
                <button class="btn btn-link" type="button" routerLink="/team">Cancel</button>
                <button
                    class="btn btn-primary btn-submit ms-2"
                    [class.btn-submitting]="isSubmitting()"
                    type="submit"
                    [disabled]="!form.form.valid || isSubmitting()"
                >
                    Add
                </button>
            </div>
        </div>
    </form>
</section>