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-append
            button.btn.btn-secondary((click)='pickWorkingDirectory()')
                i.fas.fa-folder-open

.form-line
    .header
        .title Always Use Working Directory
        .description
            div By default, new terminals will open where the previous terminal was working.
            div Enabling this option will always launch new terminals in the working directory specified above.

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

.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}}
