<main>
<div class="p-6 bg-base-100 rounded-box shadow-xl border border-base-300">
<h3 class="font-bold text-lg mb-4">Run: <span class="text-primary font-mono">{{ procedure_name }}</span></h3>
<form id="run-form" class="space-y-4">
{% if parameters|length > 0 %}
<div class="bg-base-200/50 p-4 rounded-box space-y-4 border border-base-200">
{% for param in parameters %}
<div class="form-control w-full">
<label class="label" for="param-{{ param.name }}">
<span class="label-text font-semibold">{{ param.name }}</span>
<span class="label-text-alt opacity-60 font-mono text-xs">{{ param.data_type }}</span>
</label>
<input id="param-{{ param.name }}" type="text" name="{{ param.name }}" class="input input-bordered input-sm w-full font-mono" placeholder="Enter value..." />
</div>
{% endfor %}
</div>
{% else %}
<div class="alert alert-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<span>This procedure takes no parameters.</span>
</div>
{% endif %}
<div class="flex justify-end gap-2 mt-6">
<button type="button" class="btn btn-ghost" onclick="up.layer.dismiss()">Cancel</button>
<button type="submit" class="btn btn-primary">
<svg class="w-4 h-4 mr-2" 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>
Execute
</button>
</div>
</form>
</div>
<script>
document.getElementById('run-form').addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = Object.fromEntries(formData.entries());
up.layer.accept(data);
});
</script>
</main>