<div>
    <style>
        .dirty {
            border: red solid 1px !important;
        }
        .dirtier {
            color: red !important;
        }
        .ugly {
            border: red solid 1px !important;
        }
        .clean {
            border: green dashed 1px !important;
        }
    </style>

    <button unicorn:click="$reset">Reset the component</button>
    <br />
    <br />

    <label>unicorn:key</label>
    <input unicorn:model="name" u:partial.id="model-id" class="clean" unicorn:dirty.class.remove="clean" type="text" id="name" unicorn:key="key1">

    <div>
        <span unicorn:key="model-key">Targeted by key: {{name}}</span> | <span id="model-id">Targeted by id: {{name}}</span> | <span id="">Not targeted by id: {{name}}</span> |
    </div>

    <label>Duplicate id</label>
    <input unicorn:model="name" unicorn:dirty.class="dirty" type="text" id="name">

    <label>Unique id</label>
    <input unicorn:model="name" u:partial.key="model-key" class="clean" unicorn:dirty.class="dirty dirtier" unicorn:dirty.class.remove="clean" type="text" id="uniqueName">

    <label>Keyup</label>
    <input unicorn:model="name" unicorn:keyup="set_name('something new')" unicorn:dirty.class="dirty" type="text" id="keyupName">

    <label>Keydown for escape key</label>
    <input unicorn:model="name" unicorn:keydown.escape="name='ESCAPE!'" unicorn:dirty.class="dirty" type="text" id="keydownEscapeName">

    <label>Defer</label>
    <input unicorn:model.defer="name" unicorn:dirty.attr="readonly" type="text" id="deferName" unicorn:key="deferKey">

    <label>Lazy</label>
    <input unicorn:model.lazy="name" unicorn:dirty.class="dirty" type="text" id="lazyName" unicorn:key="key1">

    <label>Debounce-1000</label>
    <input unicorn:model.debounce-1000="name" unicorn:dirty.class="dirty" type="text" id="debounceName" unicorn:key="key1">

    <label>Chained lazy and debounce-500</label>
    <input unicorn:model.lazy.debounce-500="name" unicorn:dirty.class="dirty" type="text" id="lazyDebounceName">

    <label>Multiple actions</label>
    <input unicorn:model="name" unicorn:dirty.class="dirty" unicorn:keyup.enter="name='enter'" unicorn:keydown.escape="name=''" type="text"></input>

    <br />
    Hello {{ name|title }} 👋

    <br />
    <button unicorn:click="set_name">set_name</button>
    <button unicorn:click="set_name()">set_name()</button>
    <button unicorn:click="set_name('')">set_name('')</button>
    <button unicorn:click="set_name('blob 2')">set_name('blob 2')</button>
    <button unicorn:click="set_name('abc{}.def')">set_name('abc{}.def')</button>
    <button unicorn:click="name='human'">name='human'</button>
    <button unicorn:click="set_name(name='test kwarg')">set_name(name='test kwarg')</button>

    <br /><br />
    <button unicorn:click='set_name($event.target.value.trim())' value=' button value '>set_name($event.target.value.trim())</button>
    <button unicorn:click="set_name($returnValue.trim())">set_name($returnValue)</button>
</div>
