{% extends "base.html" %}

{% block content %}
<section class="section">
    <div class="container">
        <h1 class="title">Alert System</h1>
        <h2 class="subtitle">Real-time alerts with Django LiveView</h2>

        <div class="table-container">
            <div id="alerts-table-content">
                {% include 'alerts/components/alerts_table.html' %}
            </div>
        </div>

        <div class="mt-5">
            <button class="button is-primary" data-liveview-function="create_random_alert" data-action="click->page#run">
                Add Random Alert
            </button>
            <button class="button is-link ml-2" data-liveview-function="show_new_alert_form" data-action="click->page#run">
                New Alert Form
            </button>
        </div>

        <div class="notification is-info is-light mt-5">
            <p class="mb-3"><strong>Django LiveView Demo</strong></p>
            <p class="mb-2">This is a demonstration of Django LiveView capabilities. Features you'll see:</p>
            <ul style="list-style: disc; margin-left: 1.5rem;">
                <li><strong>Dynamic page changes:</strong> Click "New Alert Form" to navigate without page reload</li>
                <li><strong>Form validation:</strong> Submit empty or invalid data to see real-time validation</li>
                <li><strong>Real-time updates:</strong> Click "Add Random Alert" to see live table updates</li>
                <li><strong>Modal interactions:</strong> Click "Details" on any alert to see modal with URL update</li>
                <li><strong>Broadcast notifications:</strong> Notifications are seen by all connected users in real-time (try opening another browser to see the interaction)</li>
                <li><strong>WebSocket communication:</strong> All interactions happen through WebSockets, no HTTP requests</li>
            </ul>
        </div>
    </div>
</section>
{% endblock %}