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 type="submit" name="action" value="execute"
                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>

            <!-- 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>

    <div class="mt-6">
        {% if results %}
        <table class="min-w-full bg-white">
            <thead>
                <tr>
                    {% for col in columns %}
                    <th class="py-2 px-4 border-b">{{ col }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in results %}
                <tr class="text-center">
                    {% for col in columns %}
                    <td class="py-2 px-4 border-b">{{ row[col] }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% endif %}
    </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">
                                    <!-- Plot Icon (Heroicon: Chart Bar) -->
                                    <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2 9m5-9v9m4-9v9m5-9v9" />
                                    </svg>
                                    Plot
                                </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>

    <!-- Plot Results Section -->
    <div id="sql-plot-results" class="mt-8">
        <!-- Plot will be loaded here via htmx -->
    </div>


</div>