{% 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">Cache</h1>
            <h2 class="title is-5">Search the cache</h2>

            <form class="mt-4 mb-4" method="get" action="{{ url_for('cache_bp.cache')}}">
                <div class="field has-addons">

                    <div class="control is-expanded">
                        <input name="q" class="input" type="text" placeholder="Search in the cache" {% if question is not none %} value="{{question}}" {% endif %}>
                    </div>
                    <div class="control">
                        <div class="select">
                            <select name="s">
                                <option {% if request.args.s == 'semantic' %} selected {% endif %} value="semantic">semantic</option>
                                <option {% if request.args.s == 'fulltext' %} selected {% endif %} value="fulltext">full-text</option>
                            </select>
                        </div>
                    </div>
                    <div class="control has-icons-left">
                        <button id="chat" type="submit" class="button" autocomplete="off"
                                style='background-image: url({{url_for("minipilot_bp.static",filename="static/images/magnifyingglass.svg")}}); background-size: 1.2em; background-repeat: no-repeat; background-position: 13px center; width: 45px;'>
                        </button>
                    </div>
                </div>
            </form>

            {% if cache|length > 0 %}

            {% if question is not none and question|length >0 and cache|length != 0%}
            <p class="mt-2 mb-4 has-text-grey">Results for <b>{{question}}</b></p>
            {% endif %}
            <div class="pt-4">
            {% for entry in cache %}
                <h3 class="title is-6 p-0 mb-2">{{entry['prompt']}}</h3>
                <div class="bubble">
                    <textarea style="width:100%; padding:0em; border:none; outline:none;" id="txt-{{entry['id']}}">{{entry['response']}}</textarea>
                    <div style="padding:0em; display:none;" id="html-{{entry['id']}}"></div>
                    <div class="mt-2">
                        <input type="checkbox" class="markdownCheckbox">
                        <span class="mr-2">
                            HTML view
                        </span>
                        <a class="mr-2 save_idx_anchor"
                           href="{{ url_for('cache_bp.cache_save',doc=entry['id'],  _external=True) }}">
                            Save
                        </a>
                        <a class="mr-2 delete_idx_anchor" href="{{ url_for('cache_bp.cache_delete',doc=entry['id']) }}">
                            Delete
                        </a>
                    </div>
                </div>
            {% endfor %}
            </div>

            {% if pagination is not none %}
            <div class="mt-4 mb-6">
                {{ pagination.links }}
            </div>
            {% endif %}
            {% endif %}

            {% if question is not none and cache|length == 0%}
            <p class="mt-3">The question <b>{{question}}</b> produced no results</p>
            {% endif %}

        </div>
        <div class="column"></div>
    </div>
</div>


    <script>
        function convertMarkdownToHTML(textareaId, divId) {
            const markdownContent = $('#' + textareaId).val();
            const htmlContent = converter.makeHtml(markdownContent);
            $('#' + divId).html(htmlContent);
            $('#' + divId).show();
            $('#' + textareaId).hide();
        }

        $('.markdownCheckbox').change(function() {
            event.preventDefault();
            var textareaId = $(this).closest('.bubble').find('textarea').attr('id');
            var divId = $(this).closest('.bubble').find('div[id^="html-"]').attr('id');
            if ($(this).prop('checked')) {
                convertMarkdownToHTML(textareaId, divId);
            } else {
                $('#' + textareaId).show();
                $('#' + divId).hide();
            }
        });

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

        $('.delete_idx_anchor').click(function(event) {
            event.preventDefault();
            var deleteUrl = $(this).attr('href');
            var confirmation = confirm("Are you sure you want to delete this item?");
            if (confirmation) {
                window.location.href = deleteUrl;
            }
        });

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

            $.ajax({
                type: "POST",
                url: "{{ url_for('cache_bp.cache_save')}}",
                dataType: "json",
                data: JSON.stringify({"doc": docId, "response": $('#txt-' + docId).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 %}