{% extends '_base.html' %}
{% load django_bootstrap5 %}
{% block content %}
{% load custom_tags %}

<div class="container mt-5 col-12 p-2 overflow-scroll" style="height:50vh">
    <div class="" id="chat-response-wrap">
    {% partialdef chat_response inline %}
        {% if question %}
        <div class="card bg-warning-subtle col-12 p-1 mb-1 ms-3">
            {{ question|markdown_format }}
        </div>
        <div class="card bg-primary-subtle  col-12 p-1 me-3">
            {{ answer|markdown_format }}
        </div>
        {% endif %}
    {% endpartialdef %}
    </div>
            <div id="spinner" class="htmx-indicator spinner-grow text-success" role="status">
              <span class="htmx-indicator">Loading...</span>
            </div>
</div>


<div class="container">
        <form class="position-absolute start-50 translate-middle col-8"
              style="bottom:5rem;"
                hx-post="{% url 'chat_learn:index' %}"
                hx-indicator="#spinner"
                hx-target="#chat-response-wrap"
                hx-trigger="click,change delay:500ms throttle:1s"
                hx-swap="beforeend"
                hx-on::after-request="if(event.detail.successful) this.reset()"
        >
            {% bootstrap_field form.chat_input wrapper_class="col" layout="vertical" label_class="text-primary" %}
                <button class="btn btn-primary"
                    id="chat-input-button"
            >Send</button>

        </form>

</div>


<style>
    .htmx-indicator{
    opacity: 0;
    transition: opacity 500ms ease-in;}

    .htmx-request .htmx-indicator{
        opacity: 1;
    }
    .htmx-request.htmx-indicator{
        opacity: 1;
    }

</style>



{% endblock content %}