.list-group.mb-3
    .list-group-item.d-flex.align-items-center(*ngFor='let fw of model')
        div
            .d-flex.align-items-center
                strong(*ngIf='fw.type === PortForwardType.Local', translate) Local
                strong(*ngIf='fw.type === PortForwardType.Remote', translate) Remote
                strong(*ngIf='fw.type === PortForwardType.Dynamic', translate, translateContext='[Dynamic] port forwarding') id.port-forwarding.dynamic
                .ms-3 {{fw.host}}:{{fw.port}}
                .ms-2 &rarr;
                .ms-2(*ngIf='fw.type !== PortForwardType.Dynamic') {{fw.targetAddress}}:{{fw.targetPort}}
                .ms-2(*ngIf='fw.type === PortForwardType.Dynamic', translate) SOCKS proxy
            div {{fw.description}}
        button.btn.btn-link.hover-reveal.ms-auto((click)='remove(fw)')
            i.fas.fa-trash-alt

h5(translate) Add a port forward

.input-group.mb-2(*ngIf='newForward.type === PortForwardType.Dynamic')
    input.form-control(type='text', [(ngModel)]='newForward.host')
    .input-group-text :
    input.form-control(type='number', [(ngModel)]='newForward.port')
    .input-group-text &rarr;
    .input-group-text(style='flex: 3 1 0', translate) SOCKS proxy

.input-group.mb-2(*ngIf='newForward.type !== PortForwardType.Dynamic')
    input.form-control(type='text', [(ngModel)]='newForward.host')
    .input-group-text :
    input.form-control(type='number', [(ngModel)]='newForward.port')
    .input-group-text &rarr;
    input.form-control(type='text', [(ngModel)]='newForward.targetAddress')
    .input-group-text :
    input.form-control(type='number', [(ngModel)]='newForward.targetPort')

.input-group.mb-2
    input.form-control(
        type='text',
        [placeholder]='"Description"|translate',
        [(ngModel)]='newForward.description'
    )

.d-flex
    .btn-group.me-auto
        input.btn-check(
            type='radio',
            [(ngModel)]='newForward.type',
            id='newForwardTypeLocal',
            name='newForwardType',
            [value]='PortForwardType.Local'
        )
        label.btn.btn-secondary.m-0(
            for='newForwardTypeLocal',
            translate
        ) Local
        input.btn-check(
            type='radio',
            [(ngModel)]='newForward.type',
            id='newForwardTypeRemote',
            name='newForwardType',
            [value]='PortForwardType.Remote'
        )
        label.btn.btn-secondary.m-0(
            for='newForwardTypeRemote',
            translate
        ) Remote
        input.btn-check(
            type='radio',
            [(ngModel)]='newForward.type',
            id='newForwardTypeDynamic',
            name='newForwardType',
            [value]='PortForwardType.Dynamic'
        )
        label.btn.btn-secondary.m-0(
            for='newForwardTypeDynamic',
            translate,
            translateContext='[Dynamic] port forwarding'
        ) id.port-forwarding.dynamic

    button.btn.btn-primary((click)='addForward()')
        i.fas.fa-check.me-2
        span(translate) Forward port
