{% extends "todo_pro2/base.html" %}

{% block title %}Alpine.js Demo - todo_pro2 {% endblock title %}

{% block content %}
<div
    class="container"
    x-data="{ message: 'Welcome to the todo_pro2 application!' }"
>
    <h1 class="my-4">Alpine.js Demo</h1>
    <div class="mb-3">
        <label for="message" class="form-label">Message</label>
        <input
            type="text"
            id="message"
            class="form-control"
            placeholder="Enter a message"
            x-model="message"
        />
    </div>
    <button id="send" class="btn btn-primary" @click="sendMessage">Send</button>
    <div id="response" class="mt-4" x-text="message"></div>

    <div x-data="{ showMe: false, msg: 'hello from Alpine'}">
        <p x-text="msg" class="mt-2" x-show="showMe"></p>
        <button @click="showMe = !showMe" class="btn btn-secondary mt-3">
            Toggle Message
    </div>


    <div x-data="{ showMe: false }">
        <button @click="showMe = !showMe" class="btn btn-secondary mt-3">
            Toggle Message
        </button>
        <p x-show="showMe" class="mt-2">This is a toggled message!</p>
    </div>
    {% endblock %}
</div>