{% extends "base.html" %}

{% block content %}

<div style="flex: 1; display: flex; flex-direction: column; margin-bottom: 110px;">
    <div class="columns">
        <div class="column is-hidden-mobile"></div>
        <div class="column is-two-thirds is-full-mobile">
                <div class="bubble bubble-initial text-lg tracking-tight">
                    <p>
                        Hello! I am the Minipilot, how can I help you?
                    </p>
                </div>
            <span id="conversation">
            </span>
        </div>
        <div class="column is-hidden-mobile"></div>
    </div>
</div>
<footer class="footer">
    <div class="columns">
        <div class="column is-hidden-mobile"></div>
        <div class="column is-two-fifths is-full-mobile">
            {% include 'botbar.html' %}
        </div>
        <div class="column is-hidden-mobile"></div>
    </div>
</footer>
<script>
    function bubbles_cb(){
        $("input").val('');
        $(".button").prop("disabled", true);
    }

    bubbles("{{ url_for('minipilot_bp.ask')}}", {{ history | safe }}, bubbles_cb);
</script>
{% endblock %}