{% extends "base.html" %}

{% block content %}

<div class='container pb-2 px-5' xmlns="http://www.w3.org/1999/html">
    <div class="columns">
        <div class="column"></div>
        <div class="column is-two-thirds">
            <h1 id="name" class="title is-4 pb-3">Prompts</h1>
            <h2 class="title is-5">{{system['title']}}</h2>
            <div class="bubble p-4">
                <textarea style="width:100%; padding:0em; border:none; outline:none;" id="system">{{system['content']}}</textarea>
                <a class="mr-2 save_idx_anchor"
                   href="{{ url_for('prompt_bp.save',prompt=system['category'],  _external=True) }}">
                    Save
                </a>
            </div>
            <h2 class="title is-5">{{user['title']}}</h2>
            <div class="bubble p-4">
                <textarea style="width:100%; padding:0em; border:none; outline:none;" id="user">{{user['content']}}</textarea>
                <a class="mr-2 save_idx_anchor"
                   href="{{ url_for('prompt_bp.save',prompt=user['category'],  _external=True) }}">
                    Save
                </a>
            </div>
        </div>
        <div class="column"></div>
    </div>
</div>

    <script>
        $('textarea').each(function() {
            this.style.height = 'auto';
            this.style.height = this.scrollHeight + 'px';
        });

        $('.save_idx_anchor').click(function(event) {
            event.preventDefault();
            var href = $(this).attr("href");
            var url = new URL(href);
            var prompt = url.searchParams.get('prompt');

            $.ajax({
                type: "POST",
                url: "{{ url_for('prompt_bp.save')}}",
                dataType: "json",
                data: JSON.stringify({"prompt": prompt, "content": $('#' + prompt).val()}),
                contentType: "application/json",
                success: function(data) {
                    $.notify(data["message"], {style: 'minipilot'}, "success");
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $.notify(JSON.parse(jqXHR.responseText)['message'], {style: 'minipilot'}, 'error');
                }
            })
        });

    </script>
    {% endblock %}