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()',
                )
                    optgroup([label]='"Custom Profiles"|translate', *ngIf='customProfiles?.length > 0')
                        option(
                            *ngFor='let profile of customProfiles',
                            [ngValue]='profile.id'
                        ) {{profile.name}}
                    optgroup([label]='"Built-in Profiles"|translate')
                        option(
                            *ngFor='let profile of builtinProfiles',
                            [ngValue]='profile.id'
                        ) {{profile.name}}

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

                div(ngbDropdown).d-inline-block.flex-shrink-0.ms-3
                    button.btn.btn-primary(ngbDropdownToggle)
                        i.fas.fa-fw.fa-plus
                        span(translate) New
                    div(ngbDropdownMenu)
                        button(ngbDropdownItem, (click)='newProfile()')
                            i.fas.fa-fw.fa-plus
                            span(translate) New profile
                        button(ngbDropdownItem, (click)='newProfileGroup()')
                            i.fas.fa-fw.fa-plus
                            span(translate) New profile group

            .d-flex.flex-column.my-3.p-2.collapse-container
                ng-container(*ngFor='let group of rootGroups')
                    ng-container(*ngTemplateOutlet='recursiveGroup; context: {$implicit: group}')

            ng-template(#recursiveGroup let-group)
                .collapse-item.d-flex.align-items-center.p-1((click)='toggleGroupCollapse(group)')
                    .fa.fa-fw.far.fa-folder(*ngIf='group.collapsed')
                    .fa.fa-fw.far.fa-folder-open(*ngIf='!group.collapsed')
                    span.ms-3.me-auto {{ group.name || ("Ungrouped"|translate) }}

                    button.btn.btn-sm.btn-link.hover-reveal.ms-2(*ngIf='group.editable && group.name', (click)='$event.stopPropagation(); editProfileGroup(group)')
                        i.fas.fa-pencil-alt
                    button.btn.btn-sm.btn-link.hover-reveal.ms-2(*ngIf='group.editable && group.name', (click)='$event.stopPropagation(); deleteProfileGroup(group)')
                        i.fas.fa-trash-alt

                ng-container(*ngIf='!group.collapsed')
                    ng-container(*ngFor='let profile of group.profiles')
                        .collapse-item.d-flex.align-items-center.p-1.ps-4(*ngIf='isProfileVisible(profile)', [class.list-group-item-action]='!profile.isBuiltin', (click)='profile.isBuiltin ? null : editProfile(profile)')
                            profile-icon.ms-1([icon]='profile.icon', [color]='profile.color')
                            span.ms-3.no-wrap {{ profile.name }}
                            .text-muted.no-wrap.ms-2 {{ getDescription(profile) }}
                            .me-auto
                            button.btn.btn-link.hover-reveal.ms-1(*ngIf='!profile.isTemplate', (click)='$event.stopPropagation(); launchProfile(profile)')
                                i.fas.fa-play
                            .ms-1.hover-reveal(ngbDropdown, placement='bottom-right top-right auto')
                                button.btn.btn-link.ms-1(ngbDropdownToggle, (click)='$event.stopPropagation()')
                                    i.fas.fa-fw.fa-ellipsis-vertical
                                div(ngbDropdownMenu)
                                    button.dropdown-item(ngbDropdownItem, (click)='$event.stopPropagation(); newProfile(profile)')
                                        i.fas.fa-fw.fa-copy
                                        span(translate) Duplicate
                                    button.dropdown-item(ngbDropdownItem, *ngIf='profile.id && !isProfileBlacklisted(profile)', (click)='$event.stopPropagation(); blacklistProfile(profile)')
                                        i.fas.fa-fw.fa-eye-slash
                                        span(translate) Hide
                                    button.dropdown-item(ngbDropdownItem, *ngIf='profile.id && isProfileBlacklisted(profile)', (click)='$event.stopPropagation(); unblacklistProfile(profile)')
                                        i.fas.fa-fw.fa-eye
                                        span(translate) Show
                                    button.dropdown-item(*ngIf='!profile.isBuiltin', (click)='$event.stopPropagation(); deleteProfile(profile)')
                                        i.fas.fa-fw.fa-trash-alt
                                        span(translate) Delete
                            .ms-1(class='badge text-bg-{{getTypeColorClass(profile)}}') {{ getTypeLabel(profile) }}
                            .ms-1.text-danger.fas.fa-eye-slash(*ngIf='isProfileBlacklisted(profile)')

                    ng-container(*ngFor='let child of group.children')
                        .ps-4
                            ng-container(*ngTemplateOutlet='recursiveGroup; context: {$implicit: child}')

    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(*ngIf='hostApp.platform === Platform.Windows')
                .header
                    .title(translate) Terminal identification
                    .description(translate) How Tabby presents itself through environment vars

                select.form-control(
                    [(ngModel)]='config.store.terminal.identification',
                    (ngModelChange)='config.save()',
                )
                    option(ngValue='wt', translation) Windows Terminal
                    option(ngValue='cygwin', translation) Cygwin

            .form-line
                .header
                    .title(translate) Default "Connect to" type
                    .description(translate) Default connection type used by quick connect feature (ex. SSH, Telnet)

                select.form-control(
                    [(ngModel)]='config.store.defaultQuickConnectProvider',
                    (ngModelChange)='config.save()',
                )
                    option(
                        *ngFor='let provider of getQuickConnectProviders()',
                        [ngValue]='provider.id'
                    ) {{provider.name}}

            .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.d-flex.align-items-center(
                    (click)='editDefaults(provider)',
                    *ngFor='let provider of profileProviders'
                ) {{provider.name|translate}}
                    .me-auto
                    button.btn.btn-link.hover-reveal.ms-1((click)='$event.stopPropagation(); deleteDefaults(provider)')
                        i.fas.fa-trash-arrow-up

div([ngbNavOutlet]='nav')
