.modal-header
    h3.m-0 {{group.name}}

.modal-body
    .row
        .col-12.col-lg-4
            .mb-3
                label(translate) Name
                input.form-control(
                    type='text',
                    autofocus,
                    [(ngModel)]='group.name',
                )

            .mb-3
                label(translate) Parent Group
                input.form-control(
                    type='text',
                    alwaysVisibleTypeahead,
                    placeholder='Ungrouped',
                    [(ngModel)]='selectedParentGroup',
                    [ngbTypeahead]='groupTypeahead',
                    [inputFormatter]="groupFormatter",
                    [resultFormatter]="groupFormatter",
                    [editable]="false"
                )

            .mb-3
                label(translate) Icon
                .input-group
                    input.form-control(
                        type='text',
                        alwaysVisibleTypeahead,
                        [(ngModel)]='group.icon',
                        [ngbTypeahead]='iconSearch',
                        [resultTemplate]='rt'
                    )
                    .input-group-text
                        profile-icon(
                            [icon]='group.icon',
                            [color]='group.color'
                        )

                ng-template(#rt,let-r='result',let-t='term')
                    i([class]='"fa-fw " + r')
                    ngb-highlight.ms-2([result]='r', [term]='t')

            .mb-3
                label(translate) Color
                .input-group
                    input.form-control.color-picker(
                        type='color',
                        [(ngModel)]='group.color',
                        [ngbTypeahead]='colorsAutocomplete',
                        [resultFormatter]='colorsFormatter'
                    )
                    input.form-control(
                        type='text',
                        [(ngModel)]='group.color',
                        [ngbTypeahead]='colorsAutocomplete',
                        [resultFormatter]='colorsFormatter'
                    )

        .col-12.col-lg-8(*ngIf='providers.length !== 0')
            .form-line.content-box
                .header
                    .title(translate) Default profile group settings
                    .description(translate) These apply to all profiles of a given type in this group

            .list-group.mt-3.mb-3.content-box
                a.list-group-item.list-group-item-action.d-flex.align-items-center(
                    (click)='editDefaults(provider)',
                    *ngFor='let provider of providers'
                ) {{provider.name|translate}}
                    .me-auto
                    button.btn.btn-link.hover-reveal.ms-1((click)='$event.stopPropagation(); deleteDefaults(provider)')
                        i.fas.fa-trash-arrow-up

.modal-footer
    button.btn.btn-primary((click)='save()', translate) Save
    button.btn.btn-danger((click)='cancel()', translate) Cancel
