{% 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">Data</h1>
            <div class="bubble">
            <h2 class="title is-5">Files</h2>
            <form id="upload" class="mb-4" method="post" action="{{ url_for('data_bp.upload') }}" enctype="multipart/form-data">
                <div class="field has-addons">
                    <div class="control is-expanded">
                        <div id="file-upload" class="file has-name is-fullwidth mb-3">
                            <label class="file-label">
                                <input class="file-input" type="file" name="asset">
                                <span class="file-cta">
                                    <span class="file-label">
                                        Upload a CSV file
                                    </span>
                                </span>
                                <span class="file-name">
                                </span>
                            </label>
                        </div>
                    </div>
                    <div class="control">
                        <button type="submit" class="button redis-yellow">Submit</button>
                    </div>
                </div>
            </form>

            <div>
                {% if data is not none and data|length > 0%}
                <table class="table is-fullwidth is-hoverable">
                    <colgroup>
                        <col style="width: 150px;">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>Data</th>
                        <th>Index</th>
                        <th>File</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for asset in data %}
                    <tr>
                        <td style="word-wrap:break-word; word-break:break-all; white-space:normal; width:70%;">
                            <a href="{{ url_for('serve_file', filename=asset.filename, _external=True) }}" target="_blank">
                                {{asset.filename}}
                            </a>
                        </td>
                        <td>
                            <a class="create_idx_anchor" style="display:block;" href="{{ url_for('data_bp.idx_create', id=asset.id) }}">
                                create
                            </a>
                        </td>
                        <td>
                            <a style="display:block;" href="{{ url_for('data_bp.remove_file', id=asset.id) }}">
                                delete
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <p>There is no stored asset</p>
                {% endif %}
            </div>
            </div>

            <div class="bubble">
                <h2 class="title is-5">Semantic indexes</h2>
                {% if idx_overview|length > 0 %}
                <table class="table is-fullwidth is-hoverable">
                    <thead>
                    <tr>
                        <th>Index</th>
                        <th>Current</th>
                        <th>Docs</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for idx in idx_overview %}
                    <tr>
                        <td style="word-wrap: break-word; word-break: break-all; white-space: normal; width:70%">
                            {{idx['name']}}
                        </td>
                        <td>
                            {% if idx['is_current']==true %}
                            &#10004;
                            {% endif %}
                        </td>
                        <td>
                            {{idx['docs']}}
                        </td>
                        <td>
                            {% if idx['is_current']==false %}
                            <a class="mr-5" href="{{ url_for('data_bp.idx_current',name=idx['name']) }}">
                                Make current
                            </a>
                            {% endif %}
                            <a class="delete_idx_anchor" href="{{ url_for('data_bp.idx_delete',name=idx['name']) }}">
                                Delete
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <p>You have no semantic index, upload a CSV data source and create the index</p>
                {% endif %}
            </div>
            <div class="bubble">
                <h2 class="title is-5">Configuration</h2>
                <form class="mt-4" method="post" action="{{ url_for('data_bp.config_save') }}">
                    <div class="field">
                        <div class="is-flex is-align-items-center is-justify-content-space-between">
                            <label for="primary-checkbox" class="checkbox-container">
                                Override environment variables
                                <input class="toggle" name="minipilot_distributed_configuration_enabled" id="primary-checkbox" type="checkbox" {% if configuration.minipilot_distributed_configuration_enabled %} checked{% endif %}>
                            </label>
                        </div>
                    </div>
                    <hr>
                    <div class="field">
                        <div class="is-flex is-align-items-center is-justify-content-space-between">
                            <label for="rate-checkbox" class="checkbox-container">
                                Rate limiter
                                <input name="minipilot_rate_limiter_enabled" id="rate-checkbox" type="checkbox" {% if configuration.minipilot_rate_limiter_enabled %} checked{% endif %} {% if not configuration.minipilot_distributed_configuration_enabled %} disabled{% endif %}>
                            </label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="is-flex is-align-items-center is-justify-content-space-between">
                            <label for="memory-checkbox" class="checkbox-container">
                                Conversation memory
                                <input name="minipilot_history_enabled" id="memory-checkbox" type="checkbox" {% if configuration.minipilot_history_enabled %} checked{% endif %} {% if not configuration.minipilot_distributed_configuration_enabled %} disabled{% endif %}>
                            </label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="is-flex is-align-items-center is-justify-content-space-between">
                            <label for="cache-checkbox" class="checkbox-container">
                                Semantic cache
                                <input name="minipilot_cache_enabled" id="cache-checkbox" type="checkbox" {% if configuration.minipilot_cache_enabled %} checked{% endif %} {% if not configuration.minipilot_distributed_configuration_enabled %} disabled{% endif %}>
                            </label>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="column"></div>
    </div>

    <script>
        const fileInput = document.querySelector("#file-upload input[type=file]");
        fileInput.onchange = () => {
            if (fileInput.files.length > 0) {
                const fileName = document.querySelector("#file-upload .file-name");
                fileName.textContent = fileInput.files[0].name;
            }
        };

        $(document).ready(function() {
            $('.toggle').change(function() {
                var isChecked = $(this).is(':checked');
                $('input[type="checkbox"]').not('.toggle').prop('disabled', !$(this).is(':checked'));
            });

            $('input[type="checkbox"]').change(function() {
                var checkbox = $(this);
                var isChecked = checkbox.is(':checked');
                var name = checkbox.attr('name');

                var data = {};
                data[name] = isChecked;

                $.ajax({
                    type: 'POST',
                    url: '/data/config/save',
                    data: data,
                    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 %}