h3.mb-3(translate) Profiles

ul.nav-tabs(ngbNav, #nav='ngbNav')
    li(ngbNavItem)
        a(ngbNavLink, translate) Profiles
        ng-template(ngbNavContent)
            .form-line
                .header
                    .title(translate) Default profile for new tabs

                select.form-control(
                    [(ngModel)]='config.store.terminal.profile',
                    (ngModelChange)='config.save()',
                )
                    option(
                        *ngFor='let profile of profiles',
                        [ngValue]='profile.id'
                    ) {{profile.name}}
                    option(
                        *ngFor='let profile of builtinProfiles',
                        [ngValue]='profile.id'
                    ) {{profile.name}}

            .d-flex.mb-3
                .input-group
                    .input-group-prepend
                        .input-group-text
                            i.fas.fa-fw.fa-search
                    input.form-control(type='search', [placeholder]='"Filter"|translate', [(ngModel)]='filter')

                button.btn.btn-primary.flex-shrink-0.ml-3((click)='newProfile()')
                    i.fas.fa-fw.fa-plus
                    span(translate) New profile

            .list-group.mt-3.mb-3
                ng-container(*ngFor='let group of profileGroups')
                    ng-container(*ngIf='isGroupVisible(group)')
                        .list-group-item.list-group-item-action.d-flex.align-items-center(
                            (click)='toggleGroupCollapse(group)'
                        )
                            .fa.fa-fw.fa-chevron-right(*ngIf='group.collapsed')
                            .fa.fa-fw.fa-chevron-down(*ngIf='!group.collapsed')
                            span.ml-3.mr-auto {{group.name || ("Ungrouped"|translate)}}
                            button.btn.btn-sm.btn-link.hover-reveal.ml-2(
                                *ngIf='group.editable && group.name',
                                (click)='$event.stopPropagation(); editGroup(group)'
                            )
                                i.fas.fa-pencil-alt
                            button.btn.btn-sm.btn-link.hover-reveal.ml-2(
                                *ngIf='group.editable && group.name',
                                (click)='$event.stopPropagation(); deleteGroup(group)'
                            )
                                i.fas.fa-trash-alt
                        ng-container(*ngIf='!group.collapsed')
                            ng-container(*ngFor='let profile of group.profiles')
                                .list-group-item.pl-5.d-flex.align-items-center(
                                    *ngIf='isProfileVisible(profile)',
                                    [class.list-group-item-action]='!profile.isBuiltin',
                                    (click)='profile.isBuiltin ? null : editProfile(profile)'
                                )
                                    profile-icon(
                                        [icon]='profile.icon',
                                        [color]='profile.color'
                                    )

                                    .no-wrap {{profile.name}}
                                    .text-muted.no-wrap.ml-2 {{getDescription(profile)}}

                                    .mr-auto

                                    button.btn.btn-link.hover-reveal.ml-1((click)='$event.stopPropagation(); launchProfile(profile)')
                                        i.fas.fa-play

                                    button.btn.btn-link.hover-reveal.ml-1((click)='$event.stopPropagation(); newProfile(profile)')
                                        i.fas.fa-copy

                                    button.btn.btn-link.hover-reveal.ml-1(
                                        *ngIf='!profile.isBuiltin',
                                        (click)='$event.stopPropagation(); deleteProfile(profile)'
                                    )
                                        i.fas.fa-trash-alt

                                    .ml-1(class='badge badge-{{getTypeColorClass(profile)}}') {{getTypeLabel(profile)}}

    li(ngbNavItem)
        a(ngbNavLink, translate) Advanced
        ng-template(ngbNavContent)
            .form-line.content-box(*ngIf='config.store.profiles.length > 0')
                .header
                    .title(translate) Show recent profiles in selector
                    .description(translate) Set to 0 to disable recent profiles

                input.form-control(
                    type='number',
                    min='0',
                    step='1',
                    [(ngModel)]='config.store.terminal.showRecentProfiles',
                    (ngModelChange)='config.save()'
                )

            .form-line.content-box(*ngIf='config.store.profiles.length > 0')
                .header
                    .title(translate) Show built-in profiles in selector
                    .description(translate) If disabled, only custom profiles will show up in the profile selector

                toggle(
                    [(ngModel)]='config.store.terminal.showBuiltinProfiles',
                    (ngModelChange)='config.save()'
                )

            .form-line.content-box
                .header
                    .title(translate) Default profile settings
                    .description(translate) These apply to all profiles of a given type

            .list-group.mt-3.mb-3.content-box
                a.list-group-item.list-group-item-action(
                    (click)='editDefaults(provider)',
                    *ngFor='let provider of profileProviders'
                ) {{provider.name|translate}}

div([ngbNavOutlet]='nav')
