{% extends "workspace_layout.html" %}
{% block content %}
<div class="h-full flex flex-col gap-4">
<div class="flex items-center gap-3">
<div class="bg-primary/10 text-primary p-2 rounded-box">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
</div>
<h2 class="text-2xl font-bold">SQL Editor</h2>
</div>
<div class="card bg-base-100 shadow-sm border border-base-200 flex-1 flex flex-col min-h-[250px]">
<form up-submit up-target="#query-results" action="/workspace/sql" method="post" class="flex-1 flex flex-col m-0 h-full">
<div class="flex-1 p-0 relative h-full">
<textarea name="query" class="textarea textarea-ghost w-full h-full p-4 font-mono text-sm resize-none focus:outline-none focus:bg-base-100 rounded-b-none" placeholder="-- Enter your SQL query here... SELECT * FROM public.my_table limit 10;" required spellcheck="false">{% if query is defined %}{{ query }}{% endif %}</textarea>
</div>
<div class="bg-base-200/50 border-t border-base-200 p-3 flex justify-between items-center rounded-b-box shrink-0">
<div class="text-xs opacity-60 flex items-center gap-1">
<kbd class="kbd kbd-sm">⌘</kbd> + <kbd class="kbd kbd-sm">Enter</kbd> to execute
</div>
<button type="submit" class="btn btn-primary btn-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Run Query
</button>
</div>
</form>
</div>
<div class="card bg-base-100 shadow-sm border border-base-200 flex-1 flex flex-col min-h-[300px]">
<div class="bg-base-200/50 border-b border-base-200 px-4 py-3 rounded-t-box shrink-0">
<h3 class="text-sm font-semibold">Results</h3>
</div>
<div id="query-results" class="flex-1 overflow-auto p-0 flex items-center justify-center relative">
<div class="text-center opacity-40">
<svg class="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
<p class="text-sm">Execute a query to view results</p>
</div>
</div>
</div>
</div>
<script>
document.querySelector('textarea[name="query"]').addEventListener('keydown', function(e) {
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
e.preventDefault();
this.form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
}
});
</script>
{% endblock %}