Ai Loop Create code

@props([
    'action' => '#',
    'method' => 'POST',
    'goal' => '',
    'goalName' => 'goal',
    'maxIterations' => null,
    'maxIterationsName' => 'max_iterations',
    'models' => [
        'gpt-5.5-medium' => '5.5 Medium',
        'gpt-5.5-high' => '5.5 High',
        'gpt-5-mini' => '5 Mini',
    ],
    'selectedModel' => 'gpt-5.5-medium',
    'modelName' => 'model',
    'criteria' => [],
    'submitLabel' => 'Start loop',
])

@php
    /*
    | Form for starting a new agent loop with goal, criteria, model and context.
    |
    | Usage:
    |   <x-ui.ai-loop-create action="/ai/loops" goal="Keep CI green">
    |       <x-slot:context><x-ui.ai-context-bar ... /></x-slot:context>
    |   </x-ui.ai-loop-create>
    */
    $httpMethod = strtoupper($method);
    $formMethod = in_array($httpMethod, ['GET', 'POST'], true) ? $httpMethod : 'POST';
    $usesMethodSpoofing = ! in_array($httpMethod, ['GET', 'POST'], true);
@endphp

<form
    method="{{ $formMethod }}"
    action="{{ $action }}"
    {{ $attributes->merge(['class' => 'mx-auto w-full max-w-4xl']) }}
>
    @if ($usesMethodSpoofing)
        @method($httpMethod)
    @endif

    @if ($formMethod !== 'GET')
        @csrf
    @endif

    <div class="min-w-0 overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900">
        <div class="border-b border-gray-200 px-4 py-4 dark:border-gray-800 sm:px-5">
            <p class="text-sm font-semibold text-gray-900 dark:text-white">Start a new loop</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Define the goal and workspace before the first iteration runs.</p>
        </div>

        <div class="space-y-4 p-4 sm:p-5">
            @isset($context)
                <div>{{ $context }}</div>
            @endisset

            <div>
                <label for="{{ $goalName }}" class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Objective</label>
                <textarea
                    id="{{ $goalName }}"
                    name="{{ $goalName }}"
                    rows="3"
                    required
                    placeholder="What should the agent keep working toward?"
                    class="block w-full resize-none rounded-xl border border-gray-300 bg-white px-3.5 py-3 text-sm leading-6 text-gray-900 shadow-sm transition focus:border-brand-500 focus:ring-1 focus:ring-brand-500 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100"
                >{{ $goal }}</textarea>
            </div>

            <x-ui.ai-criteria-editor :criteria="$criteria" />

            <div class="grid gap-4 sm:grid-cols-2">
                <label class="block">
                    <span class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Model</span>
                    <select
                        name="{{ $modelName }}"
                        class="h-10 w-full rounded-lg border border-gray-300 bg-white px-3 text-sm font-medium text-gray-700 shadow-sm focus:border-brand-500 focus:ring-1 focus:ring-brand-500 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-200"
                    >
                        @foreach ($models as $value => $label)
                            <option value="{{ $value }}" @selected($selectedModel === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                </label>

                <label class="block">
                    <span class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Max iterations</span>
                    <input
                        type="number"
                        name="{{ $maxIterationsName }}"
                        value="{{ $maxIterations }}"
                        min="1"
                        placeholder="Unlimited"
                        class="h-10 w-full rounded-lg border border-gray-300 bg-white px-3 text-sm text-gray-900 shadow-sm focus:border-brand-500 focus:ring-1 focus:ring-brand-500 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100"
                    >
                </label>
            </div>

            {{ $slot }}
        </div>

        <div class="flex flex-col bg-white px-4 py-3 sm:flex-row sm:justify-end dark:bg-gray-900 sm:px-5">
            <x-ui.button type="submit" size="sm" class="w-full sm:w-auto">{{ $submitLabel }}</x-ui.button>
        </div>
    </div>
</form>