<script>
// Create URL template for agent input forms
window.agentInputFormUrlTemplate = '{{ url_for("htmx_get_agent_input_form", agent_name="AGENT_PLACEHOLDER") }}';
</script>

<article id="execution-form-content">
    <header>
        <h2>Run Flock</h2>
    </header>
    {% if flock and flock.agents %}    <form hx-post="{{ url_for('htmx_run_flock') }}" 
          hx-target="#results-display"
          hx-swap="innerHTML" 
          hx-indicator="#run-loading-indicator"
          x-data="{ selectedAgentForInput: '' }">
        
        <label for="start_agent_name_select">Select Start Agent:</label>
        <select id="start_agent_name_select" 
                name="start_agent_name" 
                required                x-model="selectedAgentForInput"                @change="
                    if ($event.target.value) {
                        const url = window.agentInputFormUrlTemplate.replace('AGENT_PLACEHOLDER', $event.target.value);
                        htmx.ajax('GET', url, {target: '#dynamic-input-form-fields', swap: 'innerHTML', indicator: '#input-form-loading-indicator'});
                    } else {
                        document.getElementById('dynamic-input-form-fields').innerHTML = '<p><small>Select an agent to see its input fields.</small></p>';
                    }
                ">
            <option value="" disabled {% if not selected_agent_name %}selected{% endif %}>-- Choose an agent --</option>
            {% for agent_name_key in flock.agents.keys() %}
            <option value="{{ agent_name_key }}" {% if selected_agent_name == agent_name_key %}selected{% endif %}>{{ agent_name_key }}</option>
            {% endfor %}
        </select>

        <div id="dynamic-input-form-fields">
            <!-- Input fields for the selected agent will be loaded here -->
            <p><small>Select an agent to see its input fields.</small></p>
        </div>
        <div id="input-form-loading-indicator" class="htmx-indicator">
            <progress indeterminate></progress> Loading input form...
        </div>

        <button type="submit" {% if not flock.agents %}disabled{% endif %}>Run Flock</button>

        <div id="share-agent-link-container" style="margin-top: 0.5rem;">            <a href="#" 
               id="shareAgentHtmxLink"
               hx-post="{{ url_for('htmx_generate_share_link') }}" 
               hx-target="#shareLinkDisplayArea" 
               hx-swap="innerHTML"
               hx-indicator="#share-loading-indicator"
               hx-include="#start_agent_name_select"
               style="text-decoration: underline; cursor: pointer; color: var(--pico-primary);">
                Create shareable link...
            </a>
        </div>

        <span id="run-loading-indicator" class="htmx-indicator">
            <progress indeterminate></progress> Running...
        </span>
    </form>
    {% elif flock and not flock.agents %}
    <p>No agents available in the current Flock. Add agents to enable execution.</p>
    {% else %}
    <p>Load or create a Flock to enable execution.</p>
    {% endif %}

    <div id="shareLinkDisplayArea" style="margin-top: 1rem;">
        <!-- Content will be loaded here by HTMX -->
    </div>

</article>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // All previous JavaScript for toggling share link visibility is removed.
        // If there are other unrelated JavaScript functions in this script block,
        // they would remain.
    });
</script>