{% load django_cap %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <meta name="description"
              content="Demo page for the CAP Widget using Django template tags." />
        <meta name="keywords" content="CAP, Widget, Django, Template Tags, Demo" />
        <title>CAP Widget Demo - Using Template Tags</title>

        <!-- Load the CAP widget script using template tag -->
        {% cap_widget_script %}
    </head>

    <body>
        <h1>CAP Widget Demo</h1>

        <!-- Basic widget -->
        <h2>Basic Widget</h2>
        {% cap_widget %}

        <!-- Widget with custom ID and endpoint -->
        <h2>Custom Widget</h2>
        {% cap_widget widget_id="custom-cap" api_endpoint="/cap/v1/" %}

        <!-- Widget with built-in event handler -->
        <h2>Widget with Built-in Handler</h2>
        {% cap_widget widget_id="cap-with-handler" with_handler=True %}

        <!-- Widget with custom handler function -->
        <h2>Widget with Custom Handler</h2>
        {% cap_widget_with_handler widget_id="cap-custom-handler" handler_function="myCustomCapHandler" %}

        <script>
            // Custom handler function for the last widget
            function myCustomCapHandler(token, event) {
                console.log("Custom handler called!");
                console.log("Token:", token);
                console.log("Full event:", event);

                // You can add your custom logic here
                alert("CAP solved! Token: " + token.substring(0, 20) + "...");
            }
        </script>
    </body>
</html>
