mtas-tv-frontend/src/app/admin/team-editor/team-editor.component.html

<div class="ui main container">
    <h1 class="ui dividing header">Team editor</h1>
    <form class="ui form" #teamEditorForm (ngSubmit)="saveTeam()">
        <div class="six wide field">
            <label for="team_name">Team name</label>
            <input id="team_name" type="text" name="team_name" [(ngModel)]="team.name">
        </div>
        <div class="six wide field">
            <label for="team_name"> </label>
            <div class="ui checkbox">
                <input type="checkbox" id="team_is_active" name="team_is_active"
                       [(ngModel)]="team.isActive">
                <label for="team_is_active">Active</label>
            </div>
        </div>

        <h4 class="ui dividing header">Team members</h4>
        <div class="three inline fields">
            <div class="two wide field">
                <button type="button" class="ui fluid button"
                        [class.positive]="canAddMember"
                        [class.disabled]="!canAddMember"
                        (keydown.enter)="handleEnter($event)"
                        (click)="addMember()">Add
                </button>
            </div>
            <div class="five wide field">
                <input type="text" #signumInput
                       name="member_signum"
                       placeholder="Signum"
                       (keydown.enter)="handleEnter($event)"
                       [(ngModel)]="member.signum">
            </div>
            <div class="nine wide field">
                <input type="text"
                       name="member_name"
                       placeholder="Display name"
                       (keydown.enter)="handleEnter($event)"
                       [(ngModel)]="member.name">
            </div>
        </div>
        <h4 class="ui dividing header"></h4>
        <table class="ui celled definition table" *ngIf="team.members.length">
            <thead>
            <tr>
                <th class="collapsing"></th>
                <th class="collapsing"><i class="large user outline icon"></i>Signum</th>
                <th><i class="large id card outline icon"></i>Display name</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let member of team.members">
                <td class="collapsing"><a title="Remove" (click)="removeMember(member.signum)"><i
                        class="large fitted red trash alternate outline icon"></i></a></td>
                <td class="collapsing">{{member.signum}}</td>
                <td>{{member.name}}</td>
            </tr>
            </tbody>
        </table>

        <button type="submit" class="ui button"
                [class.positive]="canSave"
                [class.disabled]="!canSave"><i class="save outline icon"></i>Save changes
        </button>
        <a class="ui button"
           [routerLink]="['/admin/teams']"><i class="left angle icon"></i>Back to teams list</a>
    </form>
</div>