h3.mb-3 Shell

.form-line
    .header
        .title Profile
        .description Default profile for new tabs

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

        
.form-line(*ngIf='isConPTYAvailable')
    .header
        .title Use ConPTY
        .description Enables the experimental Windows ConPTY API
        
    toggle(
        [(ngModel)]='config.store.terminal.useConPTY',
        (ngModelChange)='config.save()'
    )
    
.alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.useConPTY && isConPTYAvailable && !isConPTYStable')
    .mr-auto Windows 10 build 18309 or above is recommended for ConPTY
    
.alert.alert-info.d-flex.align-items-center(*ngIf='config.store.terminal.profile.startsWith("WSL") && (config.store.terminal.frontend != "hterm" || !config.store.terminal.useConPTY)')
    .mr-auto WSL terminal only supports TrueColor with ConPTY and the hterm frontend

.form-line(*ngIf='config.store.terminal.profile == "custom-shell"')
    .header
        .title Custom shell

    input.form-control(
        type='text',
        [(ngModel)]='config.store.terminal.customShell',
        (ngModelChange)='config.save()',
    )

.form-line
    .header
        .title Working directory
    .input-group
        input.form-control(
            type='text',
            placeholder='Home directory',
            [(ngModel)]='config.store.terminal.workingDirectory',
            (ngModelChange)='config.save()',
        )            
        .input-group-btn
            button.btn.btn-secondary((click)='pickWorkingDirectory()')
                i.fas.fa-folder-open

.form-line.align-items-start
    .header
        .title Environment
        .description Inject additional environment variables
        
    environment-editor([(model)]='this.config.store.terminal.environment')

h3.mt-3 Saved Profiles

.list-group.list-group-flush.mt-3.mb-3
    .list-group-item.list-group-item-action.d-flex.align-items-center(
        *ngFor='let profile of config.store.terminal.profiles',
        (click)='editProfile(profile)',
    ) 
        .mr-auto
            div {{profile.name}}
            .text-muted {{profile.sessionOptions.command}}
        button.btn.btn-outline-danger.ml-1((click)='$event.stopPropagation(); deleteProfile(profile)')
            i.fas.fa-trash
                    
div(ngbDropdown, placement='top-left')
    button.btn.btn-primary(ngbDropdownToggle) 
        i.fas.fa-fw.fa-plus
        | New profile        
    div(ngbDropdownMenu)
        button.dropdown-item(*ngFor='let shell of shells', (click)='newProfile(shell)') {{shell.name}}
