include icon.pug

mixin text-field
    - const slots = {}

    mixin slot(key)
        - slots[key] = block

    -
        block ? block() : undefined 

        let classes = {
            'o-text-field':           true,
            'o-text-field--extended': !!block,
            'is-invalid':             attributes.invalid,
            'is-disabled':            attributes.disabled,
            'l-card':                 !!block,
            'l-card--flush':          !!block,
            'l-card--gapless':        !!block,
        }
        if (attributes.class) {
            classes[attributes.class] = true;
        }

        const attr = {
            placeholder: attributes.placeholder,
            disabled:    attributes.disabled
        }

    div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
        if !!block
            if slots.pre
                .u-d-contents.t-hi
                    - slots.pre()
            input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr)
            if slots.post
                .u-d-contents.t-hi
                    - slots.post()
            .o-text-field__bg
        else
            input.o-text-field__native&attributes(attr)
            .o-text-field__bg