<div x-data="{ count: 0 }">
    <button x-on:click="count++">Increment</button>
    <span x-text="count"></span>
</div>

<div data-count="0">
    <button hx-on:click="data.count++">Increment</button>
    <span :text="data.count"></span>
</div>

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle</button>

    <div x-show="open" @click.outside="open = false">Contents...</div>
</div>

<div data-open="false" hx-on="click from:outside -> data.open = false">
    <button hx-on:click="data.open = !data.open">Toggle</button>

    <div :hidden="!data.open">Contents...</div>
</div>

<div x-data="{ pressed: false }">
    <button @click="pressed = ! pressed" :class="{ on: pressed }">Bold</button>
</div>
<style>
    .on { font-weight: bold; }
</style>

<div>
    <button aria-pressed="false"
            hx-on:click="aria.pressed = !aria.pressed"
            :class="{ on: aria.pressed }">Bold</button>
</div>
<style>
    .on { font-weight: bold; }
</style>

<div x-data="{ placeholderText: 'Type here...' }">
    <input type="text" :placeholder="placeholderText">
</div>

<div data-placeholder-text="Type here...">
    <input type="text" :placeholder="data.placeholderText">
</div>

<div x-data="{ message: '' }">
    <input type="text" @keyup.enter="message = 'Enter pressed'">
    <span x-text="message"></span>
</div>

<div data-message="">
    <input type="text" hx-on="keyup[key=='Enter'] -> data.message = 'Enter pressed'">
    <span :text="data.message"></span>
</div>

<div x-data="{ message: '' }" x-init="message = 'Initialised!'">
    <span x-text="message"></span>
</div>

<div data-message="" hx-on:load="data.message = 'Initialised!'">
    <span :text="data.message"></span>
</div>

<div x-data="{ username: '<strong>calebporzio</strong>' }">
    Username: <span x-html="username"></span>
</div>

<div data-username="<strong>calebporzio</strong>">
    Username: <span :html="data.username"></span>
</div>

<div x-data="{ label: 'Hello', length: 0 }" x-effect="length = label.length">
    <button @click="label += ' World!'">Change Message</button>
    <span x-text="length"></span>
</div>

<div data-label="Hello" data-length="0" hx-live="data.length = data.label.length">
    <button hx-on:click="data.label += ' World!'">Change Message</button>
    <span :text="data.length"></span>
</div>

<div x-data="{ label: 'processed' }">
    <span x-text="label"></span>
    <div x-ignore>
        <span x-text="label">untouched</span>
    </div>
</div>

<div data-label="processed">
    <span :text="data.label"></span>
    <div hx-ignore>
        <span :text="data.label">untouched</span>
    </div>
</div>

<div x-data>
    <button @click="$refs.text.remove()">Remove Text</button>

    <span x-ref="text">Hello 👋</span>
</div>

<div>
    <button hx-on:click="q('#text').remove()">Remove Text</button>

    <span id="text">Hello 👋</span>
</div>

<div x-data="{ message: '' }">
    <input type="text" x-model="message">

    <span x-text="message"></span>
</div>

<div>
    <input type="text">

    <span :text="q('previous input').value"></span>
</div>

<div x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
    <ul>
        <template x-for="color in colors">
            <li x-text="color"></li>
        </template>
    </ul>
    <button @click="colors.push('Green')">Add Green</button>
</div>

<div>
    <ul>
        <li>Red</li>
        <li>Orange</li>
        <li>Yellow</li>
    </ul>
    <button hx-on:click="q('previous ul').insert('end', '<li>Green</li>')">Add Green</button>
</div>

<div
    x-data="{
        search: '',

        items: ['foo', 'bar', 'baz'],

        get filteredItems() {
            return this.items.filter(
                i => i.startsWith(this.search)
            )
        }
    }"
>
    <input x-model="search" placeholder="Search...">

    <ul>
        <template x-for="item in filteredItems" :key="item">
            <li x-text="item"></li>
        </template>
    </ul>
</div>

<div>
    <input placeholder="Search...">

    <ul hx-live="for (let li of q('li in this')) li.hidden = !li.textContent.startsWith(q('previous input').value)">
        <li>foo</li>
        <li>bar</li>
        <li>baz</li>
    </ul>
</div>

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle</button>

    <template x-if="open">
        <div>Contents...</div>
    </template>
</div>

<div data-open="false">
    <button hx-on:click="data.open = !data.open">Toggle</button>

    <div :hidden="!data.open">Contents...</div>
</div>

<div x-data="{ tab: 'a' }">
    <nav>
        <button @click="tab = 'a'" :class="{ active: tab === 'a' }">A</button>
        <button @click="tab = 'b'" :class="{ active: tab === 'b' }">B</button>
    </nav>
    <div x-show="tab === 'a'">Panel A</div>
    <div x-show="tab === 'b'">Panel B</div>
</div>
<style>
    .active { background: #18181b; color: #fff; border-color: #18181b; }
</style>

<div data-tab="a">
    <nav>
        <button hx-on:click="data.tab = 'a'" :.active="data.tab === 'a'">A</button>
        <button hx-on:click="data.tab = 'b'" :.active="data.tab === 'b'">B</button>
    </nav>
    <div :hidden="data.tab !== 'a'">Panel A</div>
    <div :hidden="data.tab !== 'b'">Panel B</div>
</div>
<style>
    .active { background: #18181b; color: #fff; border-color: #18181b; }
</style>

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle</button>

    <div x-show="open" x-transition>
        Hello 👋
    </div>
</div>

<div data-open="false">
    <button hx-on:click="data.open = !data.open">Toggle</button>

    <div class="fade" :.open="data.open">
        Hello 👋
    </div>
</div>
<style>
    .fade { opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
    .fade.open { opacity: 1; visibility: visible; }
</style>

<div x-data>
    <span x-cloak x-show="false">This will not 'blip' onto screen at any point</span>
</div>
<style>
    [x-cloak] { display: none !important; }
</style>

<div>
    <span hx-cloak :hidden="true" hx-on:load="attr['hx-cloak'] = null">This will not 'blip' onto screen at any point</span>
</div>
<style>
    [hx-cloak] { display: none !important; }
</style>

<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle Modal</button>

    <template x-teleport="body">
        <div x-show="open">
            Modal contents...
        </div>
    </template>
</div>

<div>Some other content placed AFTER the modal markup.</div>

<div x-data="{ number: 5 }">
    <div x-data="{ count: 0 }" x-modelable="count" x-model="number">
        <button @click="count++">Increment</button>
    </div>

    Number: <span x-text="number"></span>
</div>

<div x-data>
    <div x-id="['text-input']">
        <label :for="$id('text-input')">Username</label>
        <!-- for="text-input-1" -->

        <input type="text" :id="$id('text-input')">
        <!-- id="text-input-1" -->
    </div>

    <div x-id="['text-input']">
        <label :for="$id('text-input')">Username</label>
        <!-- for="text-input-2" -->

        <input type="text" :id="$id('text-input')">
        <!-- id="text-input-2" -->
    </div>
</div>

<div x-data>
    <button @click="$el.innerHTML = 'Hello World!'">Replace me with "Hello World!"</button>
</div>

<div>
    <button hx-on:click="this.innerHTML = 'Hello World!'">Replace me with "Hello World!"</button>
</div>

<div x-data="{ message: '' }" @notify="message = 'Notified!'">
    <button @click="$dispatch('notify')">Notify</button>
    <span x-text="message"></span>
</div>

<div data-message="" hx-on:notify="data.message = 'Notified!'">
    <button hx-on:click="trigger('notify')">Notify</button>
    <span :text="data.message"></span>
</div>

<div x-data data-message="Hello World!">
    <button @click="$el.textContent = $root.dataset.message">Say Hi</button>
</div>

<div data-message="Hello World!">
    <button hx-on:click="this.textContent = data.message">Say Hi</button>
</div>

<div x-data="{ title: 'Hello', after: '' }">
    <button @click="title = 'Hello World!'; $nextTick(() => { after = $el.innerText })" x-text="title"></button>
    <span x-text="after"></span>
</div>

<div data-title="Hello" data-after="">
    <button hx-on:click="data.title = 'Hello World!'; await nextFrame(); data.after = this.innerText" :text="data.title"></button>
    <span :text="data.after"></span>
</div>

<div x-data>
    <button @click="$store.darkMode.toggle()">Toggle Dark Mode</button>
</div>

<div x-data :class="$store.darkMode.on && 'dark'">
    Content
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('darkMode', {
            on: false,

            toggle() {
                this.on = ! this.on
            }
        })
    })
</script>
<style>
    .dark { background: #18181b; color: #fff; padding: 4px 8px; }
</style>

<div data-dark="false">
    <div>
        <button hx-on:click="data.dark = !data.dark">Toggle Dark Mode</button>
    </div>

    <div :class="{ dark: data.dark }">
        Content
    </div>
</div>
<style>
    .dark { background: #18181b; color: #fff; padding: 4px 8px; }
</style>

<div x-data="{ open: false, log: '' }" x-init="$watch('open', value => log = 'open is now ' + value)">
    <button @click="open = ! open">Toggle Open</button>
    <span x-text="log"></span>
</div>

<div data-open="false" data-log="" hx-live="data.log = 'open is now ' + data.open">
    <button hx-on:click="data.open = !data.open">Toggle Open</button>
    <span :text="data.log"></span>
</div>

<div x-data="dropdown">
    <button @click="toggle">Toggle</button>

    <div x-show="open">Contents...</div>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            open: false,

            toggle() {
                this.open = ! this.open
            }
        }))
    })
</script>

<div x-data="{ clicks: 0 }">
    <button x-bind="SomeButton">Click</button>
    <span x-text="clicks"></span>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.bind('SomeButton', () => ({
            type: 'button',
            '@click'() {
                this.clicks++
            },
            ':disabled'() {
                return this.clicks >= 3
            },
        }))
    })
</script>