<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>
    <!-- up-accept form intercepts the submit and closes the layer, passing form data back -->
    <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>
    // Intercept form submit, serialize to JSON, and close the Unpoly layer returning the data
    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>