.modal-header(*ngIf='!defaultsMode')
    h3.m-0 {{profile.name}}

.modal-header(*ngIf='defaultsMode')
    h3.m-0(translate, [translateParams]='{type: profileProvider.name}') Defaults for {type}

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

            .form-group(*ngIf='!defaultsMode')
                label(translate) Group
                input.form-control(
                    type='text',
                    alwaysVisibleTypeahead,
                    placeholder='Ungrouped',
                    [(ngModel)]='profile.group',
                    [ngbTypeahead]='groupTypeahead',
                )

            .form-group(*ngIf='!defaultsMode')
                label(translate) Icon
                .input-group
                    input.form-control(
                        type='text',
                        alwaysVisibleTypeahead,
                        [(ngModel)]='profile.icon',
                        [ngbTypeahead]='iconSearch',
                        [resultTemplate]='rt'
                    )
                    .input-group-append
                        .input-group-text
                            i([class]='"fa-fw " + profile.icon')

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

            .form-line
                .header
                    .title(translate) Color
                input.form-control.w-50(
                    type='text',
                    [(ngModel)]='profile.color',
                    placeholder='#000000',
                    [ngbTypeahead]='colorsAutocomplete',
                    [resultFormatter]='colorsFormatter'
                )

            .form-line
                .header
                    .title(translate) Disable dynamic tab title
                    .description(translate) Connection name will be used instead
                toggle([(ngModel)]='profile.disableDynamicTitle')

            .mb-4

        .col-12.col-lg-8(*ngIf='this.profileProvider.settingsComponent')
            ng-template(#placeholder)

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