.list-group.mb-3
    .list-group-item.d-flex.align-items-center(*ngFor='let fw of model')
        div
            .ms-2.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
                .ml-3 {{fw.host}}:{{fw.port}}
                .ml-2 &rarr;
                .ml-2(*ngIf='fw.type !== PortForwardType.Dynamic') {{fw.targetAddress}}:{{fw.targetPort}}
                .ml-2(*ngIf='fw.type === PortForwardType.Dynamic', translate) SOCKS proxy
            div {{fw.description}}
        button.btn.btn-link.hover-reveal.ml-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-append
        .input-group-text :
    input.form-control(type='number', [(ngModel)]='newForward.port')
    .input-group-append
        .input-group-text &rarr;
    .input-group-append.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-append
        .input-group-text :
    input.form-control(type='number', [(ngModel)]='newForward.port')
    .input-group-append
        .input-group-text &rarr;
    input.form-control(type='text', [(ngModel)]='newForward.targetAddress')
    .input-group-append
        .input-group-text :
    input.form-control(type='number', [(ngModel)]='newForward.targetPort')

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

.d-flex
    .btn-group.mr-auto(
        [(ngModel)]='newForward.type',
        ngbRadioGroup
    )
        label.btn.btn-secondary.m-0(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='PortForwardType.Local'
            )
            span(translate) Local
        label.btn.btn-secondary.m-0(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='PortForwardType.Remote'
            )
            span(translate) Remote
        label.btn.btn-secondary.m-0(ngbButtonLabel)
            input(
                type='radio',
                ngbButton,
                [value]='PortForwardType.Dynamic'
            )
            span(translate, translateContext='[Dynamic] port forwarding') id.port-forwarding.dynamic

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