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

{% block head_title %}
    HTMX Demo
{% endblock head_title %}


{% block content %}
    <div class="container">
        <h1 class="my-4">HTMX Demo</h1>

        <p id="message" class="mt-2">hello htmx !</p>

        <button hx-get="{% url 'htmx_demo' %}" 
                hx-trigger="click" 
                hx-swap="outerHTML"
                class="btn btn-primary mt-3">

            Load Message
        </button>

        <div class="mb-3">
            <label for="message" class="form-label">Message</label>
            <input type="text" id="message" class="form-control" placeholder="Enter a message">
        </div>
        <button id="send" class="btn btn-primary">Send</button>
        <div id="response" class="mt-4"></div>
    </div>
{% endblock %}