{% extends 'base.html.twig' %}

{% block title %}Hello ChatController!{% endblock %}

{% block body %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>

<div class="example-wrapper">
    <h1>Hello ✅</h1>

    <form action = "{{ path('api_app_chat_send') }}" method = "post">
        <button>Send</button>
    </form>
</div>
{% endblock %}


{% block javascripts %}
    <script>
        {# Subscribe to updates of several Book resources and to all Review resources matching the given pattern #}
        const url = new URL('https://localhost/.well-known/mercure');
        url.searchParams.append('topic','http://localhost:8000/api/chat');
        eventSource.onmessage = event => {
            console.log(event);
            document.querySelector('h1').insertAdjacentHTML('afterend','<div class="alert alert-success">ping!</div>')
            window.setTimeout(()=>{
                const $alert = document.querySelector('.alert')
                $alert.parentNode.removeChild($alert)
            },7000)
        }
</script>
{% endblock %}