workout/templates/partials/sql_explorer/sql_query.html

<div id="sql-query">
    {% if error %}
    <div class="bg-red-200 text-red-800 p-3 rounded mb-4">
        <strong>Error:</strong> {{ error }}
    </div>
    {% endif %}

    <form method="POST" hx-post="{{ url_for('sql_query') }}" hx-target="#sql-query">
        <!-- Title Input -->
        <div>
            <label for="query-title" class="block text-sm font-medium text-gray-700">Title</label>
            <input type="text" id="query-title" name="title"
                class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                placeholder="Enter a title for your query" {% if title %} value="{{ title }}" {% endif %}>
        </div>

        <div class=" pt-2">
            <label for="query" class="block text-sm font-medium text-gray-700 pb-1">Query</label>
            <textarea name="query" spellcheck="false" id="query"
                class="w-full h-48 p-4 font-mono text-sm text-gray-800 bg-gray-100 border border-gray-300 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                placeholder="Enter your SQL query here..." required
                _="on load set my.style.height to my.scrollHeight + 'px'
                on input set my.style.height to 0 then set my.style.height to my.scrollHeight + 'px'">{{ query }}</textarea>
        </div>

        <!-- Buttons -->
        <div class="flex space-x-2 pt-1">
            <!-- Execute Button -->
            <button hx-post="{{ url_for('execute_sql_query') }}" hx-target="#execute-query-results"
                hx-include="[name='query']" hx-trigger="click" hx-swap="innerHTML"
                class="flex items-center bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <!-- Execute Icon (Heroicon: Play) -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M14.752 11.168l-5.197-2.132A1 1 0 008 9.868v4.264a1 1 0 001.555.832l5.197-2.132a1 1 0 000-1.664z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Execute
            </button>

            <!-- Plot Button -->
            <button hx-post="{{ url_for('plot_unsaved_query') }}" hx-target="#sql-plot-results" hx-trigger="click"
                hx-include="[name='query'],[name='title']" hx-indicator="#sql-plot-results-loader"
                class="flex items-center bg-blue-100 text-white px-4 py-2 rounded hover:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">

                <!-- Plot Icon (Heroicon: Chart Bar) -->
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="h-5 w-5 mr-1">
                    <path stroke-linecap=" round" stroke-linejoin="round"
                        d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
                </svg>

                Plot

                <!-- Overlay with Animated Spinner -->
                <div id="sql-plot-results-loader" class="loading-indicator inset-0 opacity-35 pl-2">
                    <svg class="animate-spin h-5 w-5 text-white opacity-100" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 100 100" fill="none">
                        <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="10" stroke-linecap="round"
                            class="opacity-20"></circle>
                        <path d="M50,5 A45,45 0 0,1 95,50" stroke="currentColor" stroke-width="10"
                            stroke-linecap="round" class="opacity-75"></path>
                    </svg>
                </div>
            </button>

            <!-- Save Button -->
            <button type="submit" name="action" value="save"
                class="flex items-center bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500">
                <!-- Save Icon (Heroicon: Save) -->
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h7a2 2 0 012 2v1" />
                </svg>
                Save
            </button>
        </div>

    </form>

    <!-- Sql query Results Section -->
    <div id="execute-query-results" class="mt-6">
    </div>

    <!-- Plot Results Section -->
    <div id="sql-plot-results" class="mt-8">
    </div>


    <!-- Saved Queries Section -->
    <div class="mt-8">
        <h2 class="text-xl font-semibold mb-4">Saved Queries</h2>
        {% if saved_queries %}
        <div class="overflow-x-auto">
            <table class="min-w-full bg-white shadow-md rounded-lg overflow-hidden">
                <thead>
                    <tr>
                        <th
                            class="py-3 px-6 bg-gray-200 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                            Title</th>
                        <th
                            class="py-3 px-6 bg-gray-200 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                            Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for saved in saved_queries %}
                    <tr class="hover:bg-gray-100 transition-colors duration-200">
                        <!-- Query Title as Load Action -->
                        <td class="py-4 px-6 border-b">
                            <a href="#" hx-get="{{ url_for('load_sql_query', query_id=saved.id) }}"
                                hx-target="#sql-query"
                                class="flex items-center text-blue-500 hover:text-blue-700 cursor-pointer">
                                <!-- Load Icon (Heroicon: Eye) -->
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.477 0 8.268 2.943 9.542 7-1.274 4.057-5.065 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                                {{ saved.title }}
                            </a>
                        </td>
                        <td class="py-4 px-6 border-b">
                            <div class="flex space-x-4">
                                <!-- Plot Action -->
                                <a href="#" hx-get="{{ url_for('plot_query', query_id=saved.id) }}"
                                    hx-target="#sql-plot-results"
                                    class="flex items-center text-green-500 hover:text-green-700 cursor-pointer"
                                    hx-trigger="click" hx-indicator="#sql-plot-results-loader-{{ saved.id }}">
                                    <!-- Plot Icon (Heroicon: Chart Bar) -->
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                        stroke-width="1.5" stroke="currentColor" class="h-5 w-5 mr-1">
                                        <path stroke-linecap=" round" stroke-linejoin="round"
                                            d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z" />
                                    </svg>
                                    Plot

                                    <!-- Overlay with Animated Spinner -->
                                    <div id="sql-plot-results-loader-{{ saved.id }}"
                                        class="loading-indicator inset-0 opacity-35 pl-2">
                                        <svg class="animate-spin h-5 w-5 text-white opacity-100"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
                                            <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="10"
                                                stroke-linecap="round" class="opacity-20"></circle>
                                            <path d="M50,5 A45,45 0 0,1 95,50" stroke="currentColor" stroke-width="10"
                                                stroke-linecap="round" class="opacity-75"></path>
                                        </svg>
                                    </div>
                                </a>

                                <!-- Delete Action -->
                                <a href="#" hx-delete="{{ url_for('delete_sql_query', query_id=saved.id) }}"
                                    hx-target="#sql-query"
                                    class="flex items-center text-red-500 hover:text-red-700 cursor-pointer"
                                    hx-confirm="Are you sure you want to delete the query titled '{{ saved.title }}'?">
                                    <!-- Delete Icon (Heroicon: Trash) -->
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5-4h4a2 2 0 012 2v1H7V5a2 2 0 012-2z" />
                                    </svg>
                                    Delete
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-gray-600">No saved queries found.</p>
        {% endif %}
    </div>

</div>