// ./wires/SlowComponent.bx
class extends="cbwire.model.Component" {
    function onMount() {
        sleep( 2000 ); // Make this component slow
    }
}

// ./wires/SlowComponent.cfc
component extends="cbwire.model.Component" {
    function onMount() {
        sleep( 2000 ); // Make this component slow
    }
}

<!--- ./wires/slowcomponent.bxm --->
<bx:output>
    <div>
        <h1>Slow Component</h1>
    </div>
</bx:output>

<!--- ./wires/slowcomponent.cfm --->
<cfoutput>
    <div>
        <h1>Slow Component</h1>
    </div>
</cfoutput>

// wires/ArticleSearch.bx
class extends="cbwire.models.Component" {
    data = {
        "search": "",
        "category": "",
        "results": []
    };
    
    queryString = ["search", "category"];
    
    function onMount() {
        performSearch();
    }
    
    function onUpdate() {
        performSearch();
    }
    
    function performSearch() {
        if (data.search.len() > 2) {
            // Simulate search results
            data.results = [
                {"title": "Article 1", "category": "Tech"},
                {"title": "Article 2", "category": "News"}
            ];
        } else {
            data.results = [];
        }
    }
}

<!-- wires/articleSearch.cfm -->
<cfoutput>
<div>
    <h1>Article Search</h1>
    
    <div class="search-form">
        <input wire:model="search" 
               type="search" 
               placeholder="Search articles...">
        
        <select wire:model="category">
            <option value="">All Categories</option>
            <option value="tech">Technology</option>
            <option value="news">News</option>
            <option value="sports">Sports</option>
        </select>
    </div>
    
    <div class="results">
        <h2>Results (#arrayLen(results)#)</h2>
        <cfloop array="#results#" item="article">
            <div class="article">
                <h3>#article.title#</h3>
                <span class="category">#article.category#</span>
            </div>
        </cfloop>
    </div>
</div>
</cfoutput>

// wires/ArticleSearch.cfc
component extends="cbwire.models.Component" {
    data = {
        "search" = "",
        "category" = "",
        "results" = []
    };
    
    queryString = ["search", "category"];
    
    function onMount() {
        performSearch();
    }
    
    function onUpdate() {
        performSearch();
    }
    
    function performSearch() {
        if (len(data.search) > 2) {
            // Simulate search results
            data.results = [
                {"title" = "Article 1", "category" = "Tech"},
                {"title" = "Article 2", "category" = "News"}
            ];
        } else {
            data.results = [];
        }
    }
}

<!-- wires/articleSearch.bxm -->
<bx:output>
<div>
    <h1>Article Search</h1>
    
    <div class="search-form">
        <input wire:model="search" 
               type="search" 
               placeholder="Search articles...">
        
        <select wire:model="category">
            <option value="">All Categories</option>
            <option value="tech">Technology</option>
            <option value="news">News</option>
            <option value="sports">Sports</option>
        </select>
    </div>
    
    <div class="results">
        <h2>Results (#results.len()#)</h2>
        <bx:loop array="#results#" item="article">
            <div class="article">
                <h3>#article.title#</h3>
                <span class="category">#article.category#</span>
            </div>
        </bx:loop>
    </div>
</div>
</bx:output>

// wires/ContactForm.bx
class extends="cbwire.models.Component" {
    data = {
        "name": "",
        "email": "",
        "message": ""
    };

    function submit() {
        // Save form data
        sleep(1000);
        // Form is now synced
    }
}

// wires/ContactForm.cfc
component extends="cbwire.models.Component" {
    data = {
        "name" = "",
        "email" = "",
        "message" = ""
    };

    function submit() {
        // Save form data
        sleep(1000);
        // Form is now synced
    }
}

// wires/UserProfile.bx
class extends="cbwire.models.Component" {
    data = {
        "user": {
            "name": "John Doe",
            "email": "[email protected]"
        }
    };
}

// wires/UserProfile.cfc
component extends="cbwire.models.Component" {
    data = {
        "user" = {
            "name" = "John Doe",
            "email" = "[email protected]"
        }
    };
}

// wires/TodoList.bx
class extends="cbwire.models.Component" {
    data = {
        "todos": [],
        "newTodo": ""
    };
    
    function addTodo() {
        if (data.newTodo.trim().len()) {
            data.todos.append({
                "id": createUUID(),
                "text": data.newTodo,
                "completed": false
            });
            data.newTodo = "";
        }
    }
    
    function toggleTodo(todoId) {
        data.todos.each(function(todo) {
            if (todo.id == arguments.todoId) {
                todo.completed = !todo.completed;
            }
        });
    }
    
    function removeTodo(todoId) {
        data.todos = data.todos.filter(function(todo) {
            return todo.id != todoId;
        });
    }
}

// wires/TodoList.cfc
component extends="cbwire.models.Component" {
    data = {
        "todos" = [],
        "newTodo" = ""
    };
    
    function addTodo() {
        if (data.newTodo.trim().len()) {
            data.todos.append({
                "id" = createUUID(),
                "text" = data.newTodo,
                "completed" = false
            });
            data.newTodo = "";
        }
    }
    
    function toggleTodo(todoId) {
        data.todos.each(function(todo) {
            if (todo.id == arguments.todoId) {
                todo.completed = !todo.completed;
            }
        });
    }
    
    function removeTodo(todoId) {
        data.todos = data.todos.filter(function(todo) {
            return todo.id != todoId;
        });
    }
}

<!-- Template calling various action methods -->
<bx:output>
<div>
    <input type="text" wire:model="newTodo" placeholder="Add a todo...">
    <button wire:click="addTodo">Add</button>
    
    <ul>
        <bx:loop array="#data.todos#" index="todo">
            <li wire:key="todo-#todo.id#">
                <input type="checkbox" wire:click="toggleTodo('#todo.id#')" #todo.completed ? 'checked' : ''#>
                <span class="#todo.completed ? 'completed' : ''#">#todo.text#</span>
                <button wire:click="removeTodo('#todo.id#')">Delete</button>
            </li>
        </bx:loop>
    </ul>
</div>
</bx:output>

<!-- Template calling various action methods -->
<cfoutput>
<div>
    <input type="text" wire:model="newTodo" placeholder="Add a todo...">
    <button wire:click="addTodo">Add</button>
    
    <ul>
        <cfloop array="#data.todos#" index="todo">
            <li wire:key="todo-#todo.id#">
                <input type="checkbox" wire:click="toggleTodo('#todo.id#')" #todo.completed ? 'checked' : ''#>
                <span class="#todo.completed ? 'completed' : ''#">#todo.text#</span>
                <button wire:click="removeTodo('#todo.id#')">Delete</button>
            </li>
        </cfloop>
    </ul>
</div>
</cfoutput>

<!-- layouts/Main.bxm -->
<bx:output>
<!doctype html>
<html>
    <head>
        <title>CBWIRE Demo</title>
    </head>
    <body>
        <!-- Insert our reactive counter -->
        #wire("Counter")#
    </body>
</html>
</bx:output>

<!-- layouts/Main.cfm -->
<cfoutput>
<!doctype html>
<html>
    <head>
        <title>CBWIRE Demo</title>
    </head>
    <body>
        <!-- Insert our reactive counter -->
        #wire("Counter")#
    </body>
</html>
</cfoutput>

// wires/Counter.bx
class extends="cbwire.models.Component" {
    
    data = {
        "counter": 0
    };

    function increment() {
        data.counter++;
    }
    
    function decrement() {
        data.counter--;
    }
}

// wires/Counter.cfc
component extends="cbwire.models.Component" {
    
    data = {
        "counter" = 0
    };

    function increment() {
        data.counter++;
    }
    
    function decrement() {
        data.counter--;
    }
}

<!-- wires/counter.bxm -->
<bx:output>
<div>
    <h1>Count: #counter#</h1>
    <button wire:click="increment">+</button>
    <button wire:click="decrement">-</button>
</div>
</bx:output>

<!-- wires/counter.cfm -->
<cfoutput>
<div>
    <h1>Count: #counter#</h1>
    <button wire:click="increment">+</button>
    <button wire:click="decrement">-</button>
</div>
</cfoutput>

// wires/Counter.bx
class extends="cbwire.models.Component" {   
    
    data = {
        "counter": 0
    };

    function onMount() {
        data.counter = session.counter ?: 0;
    }
    
    function save(counter) {
        session.counter = arguments.counter;
    }
}

// wires/Counter.cfc
component extends="cbwire.models.Component" {   
    
    data = {
        "counter" = 0
    };

    function onMount() {
        data.counter = session.counter ?: 0;
    }
    
    function save(counter) {
        session.counter = arguments.counter;
    }
}

<!-- wires/counter.bxm -->
<bx:output>
<div 
    x-data="{
        counter: $wire.counter,
        increment() { this.counter++; },
        decrement() { this.counter--; },
        async save() {
            await $wire.save(this.counter);
        }
    }"
    wire:ignore.self>
    
    <h1>Count: <span x-text="counter"></span></h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="save">Save</button>
</div>
</bx:output>

<!-- wires/counter.cfm -->
<cfoutput>
<div 
    x-data="{
        counter: $wire.counter,
        increment() { this.counter++; },
        decrement() { this.counter--; },
        async save() {
            await $wire.save(this.counter);
        }
    }"
    wire:ignore.self>
    
    <h1>Count: <span x-text="counter"></span></h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="save">Save</button>
</div>
</cfoutput>

<!-- wires/dashboard.bxm -->
<bx:output>
<div>
    <h1>Dashboard (Refreshed #refreshCount# times)</h1>
    
    <!-- This content never updates -->
    <div wire:ignore>
        <p>Component first loaded: #dateFormat(loadTime, "yyyy-mm-dd")# #timeFormat(loadTime, "HH:mm:ss")#</p>
        <div id="third-party-chart"></div>
    </div>
    
    <!-- This Alpine.js component preserves its state -->
    <div wire:ignore.self x-data="{ count: 0 }" class="counter">
        <button @click="count++">Alpine Counter: <span x-text="count"></span></button>
        <p>Current time: #timeFormat(now(), "HH:mm:ss")#</p>
    </div>
    
    <button wire:click="refresh">Refresh Component</button>
</div>
</bx:output>

<!-- wires/dashboard.cfm -->
<cfoutput>
<div>
    <h1>Dashboard (Refreshed #refreshCount# times)</h1>
    
    <!-- This content never updates -->
    <div wire:ignore>
        <p>Component first loaded: #dateFormat(loadTime, "yyyy-mm-dd")# #timeFormat(loadTime, "HH:mm:ss")#</p>
        <div id="third-party-chart"></div>
    </div>
    
    <!-- This Alpine.js component preserves its state -->
    <div wire:ignore.self x-data="{ count: 0 }" class="counter">
        <button @click="count++">Alpine Counter: <span x-text="count"></span></button>
        <p>Current time: #timeFormat(now(), "HH:mm:ss")#</p>
    </div>
    
    <button wire:click="refresh">Refresh Component</button>
</div>
</cfoutput>

// wires/PollDemo.bx
class extends="cbwire.models.Component" {
    data = {
        "counter": 0,
        "timestamp": ""
    };

    function updateCounter() {
        data.counter++;
        data.timestamp = dateTimeFormat(now(), "HH:mm:ss");
    }

    function updateStatus() {
        data.timestamp = dateTimeFormat(now(), "HH:mm:ss");
    }
}

// wires/PollDemo.cfc
component extends="cbwire.models.Component" {
    data = {
        "counter" = 0,
        "timestamp" = ""
    };

    function updateCounter() {
        data.counter++;
        data.timestamp = dateTimeFormat(now(), "HH:mm:ss");
    }

    function updateStatus() {
        data.timestamp = dateTimeFormat(now(), "HH:mm:ss");
    }
}

// wires/ItemList.bx
class extends="cbwire.models.Component" {
    data = {
        "items": [
            {"id": 1, "name": "Apple"},
            {"id": 2, "name": "Banana"},
            {"id": 3, "name": "Cherry"}
        ]
    };

    function removeItem(itemId) {
        data.items = data.items.filter(function(item) {
            return item.id != arguments.itemId;
        });
    }
}

// wires/ItemList.cfc
component extends="cbwire.models.Component" {
    data = {
        "items" = [
            {"id" = 1, "name" = "Apple"},
            {"id" = 2, "name" = "Banana"},
            {"id" = 3, "name" = "Cherry"}
        ]
    };

    function removeItem(itemId) {
        data.items = data.items.filter(function(item) {
            return item.id != arguments.itemId;
        });
    }
}

// wires/SubscriptionManager.cfc
component extends="cbwire.models.Component" {
    data = {
        "subscriptionActive" = true,
        "userName" = "John Doe"
    };

    function cancelSubscription() {
        data.subscriptionActive = false;
    }

    function deleteAccount() {
        // Permanently delete account logic
        redirect("/goodbye");
    }
}

// wires/CreatePost.bx
class extends="cbwire.models.Component" {
    data = {
        "showModal": false,
        "content": ""
    };

    function save() {
        getInstance("Post").create({ "content": data.content });

        reset("content");

        data.showModal = false;
    }
}

// wires/CreatePost.cfc
component extends="cbwire.models.Component" {
    data = {
        "showModal" = false,
        "content" = ""
    };

    function save() {
        getInstance("Post").create({ "content" = data.content });

        reset("content");

        data.showModal = false;
    }
}

<!-- wires/greeter.bxm -->
<bx:output>
<div>
    <h1>#greeting#</h1>
    <button wire:click="updateGreeting">Update</button>
    
    <bx:if timeOfDay() EQ "morning">
        <p>Good morning!</p>
    <bx:else>
        <p>Good day!</p>
    </bx:if>
</div>
</bx:output>

<!-- wires/greeter.cfm -->
<cfoutput>
<div>
    <h1>#greeting#</h1>
    <button wire:click="updateGreeting">Update</button>
    
    <cfif timeOfDay() EQ "morning">
        <p>Good morning!</p>
    <cfelse>
        <p>Good day!</p>
    </cfif>
</div>
</cfoutput>

// wires/Time.bx
class extends="cbwire.models.Component" {
    data = {
        "currentTime" : now()
    };
    function updateTime() {
        data.currentTime = now();
    }
}

// wires/Time.cfc
component extends="cbwire.models.Component" {
    data = {
        "currentTime" : now()
    };
    function updateTime() {
        data.currentTime = now();
    }
}

<!--- wires/time.bxm --->
<bx:output>
    <div>
        <p>Current time: #currentTime#</p>
        <button wire:click="updateTime">Update</button>
    </div>
</bx:output>

<!--- wires/time.cfm --->
<cfoutput>
    <div>
        <p>Current time: #currentTime#</p>
        <button wire:click="updateTime">Update</button>
    </div>
</cfoutput>

<!-- wires/pollDemo.bxm -->
<bx:output>
<div>
    <!-- Basic polling every 2.5 seconds (default) -->
    <div wire:poll="updateCounter">
        <h3>Auto Counter: #counter#</h3>
        <p>Last updated: #timestamp#</p>
    </div>
    
    <!-- Custom polling interval -->
    <div wire:poll.5s="updateStatus">
        <h3>5-Second Updates</h3>
        <p>Current time: #timestamp#</p>
    </div>
    
    <!-- Keep polling when tab is inactive -->
    <div wire:poll.10s.keep-alive="updateStatus">
        <h3>Background Polling</h3>
        <p>Polls even when tab inactive</p>
    </div>
    
    <!-- Poll only when visible -->
    <div wire:poll.15s.visible="updateStatus">
        <h3>Visible Polling</h3>
        <p>Only polls when on screen</p>
    </div>
</div>
</bx:output>