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-media':                !!block,
            'l-media--flush':         !!block,
            'l-media--gapless':       !!block,
        }
        if (attributes.class) {
            classes[attributes.class] = true;
        }

        const attr = {
            placeholder: attributes.placeholder,
            disabled:    attributes.disabled,
            readonly:    attributes.readonly,
            pattern:     attributes.pattern,
            required:    attributes.required,
            value:       attributes.value,
        }

    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-media__block.l-media__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