.head
    .bg-dark.p-3.mb-4(*ngIf='model != undefined')
        .d-flex.align-items-center
            span {{model.name}}
            .me-auto
            a.btn-link((click)='selectScheme(undefined); $event.preventDefault()', href='#', translate) Clear

        color-scheme-preview([scheme]='model')

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

.body
    .list-group.list-group-light.mb-3
        ng-container(*ngFor='let scheme of allColorSchemes')
            .list-group-item.list-group-item-action(
                [hidden]='filter && !scheme.name.toLowerCase().includes(filter.toLowerCase())',
                (click)='selectScheme(scheme)'
            )
                .d-flex.w-100.align-items-center
                    i.fas.fa-fw([class.fa-check]='model?.name === scheme.name')

                    .ms-2

                    .me-auto {{scheme.name}}

                color-scheme-preview([scheme]='scheme')
