project_form.twig

{% extends '@common.presentation/base_appshell.html.twig' %}

{% block title %}{{ project ? 'project.form.title_edit'|trans : 'project.form.title_add'|trans }}{% endblock %}

{% block content %}
    <div class="max-w-2xl mx-auto space-y-6">
        <div>
            <h1 class="text-2xl font-semibold text-dark-900 dark:text-dark-100">{{ project ? 'project.form.title_edit'|trans : 'project.form.title_add'|trans }}</h1>
            <p class="text-dark-600 dark:text-dark-400 mt-1">{{ project ? 'project.form.description_edit'|trans : 'project.form.description_add'|trans }}</p>
        </div>

        {% for message in app.flashes('error') %}
            <div class="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
                <p class="text-sm text-red-700 dark:text-red-400">{{ message }}</p>
            </div>
        {% endfor %}

        <form method="POST"
              data-test-id="project-form"
              action="{{ project ? path('project_mgmt.presentation.update', { id: project.id }) : path('project_mgmt.presentation.create') }}"
              class="space-y-6 bg-white dark:bg-dark-800 rounded-lg border border-dark-200 dark:border-dark-700 p-6"
              {{ stimulus_controller('manifest-urls', {
                  verifyUrl: path('project_mgmt.presentation.verify_manifest_url'),
                  csrfToken: csrf_token('verify_manifest_url'),
                  syntaxErrorLabel: 'project.form.remote_content_assets_manifest_urls_syntax_error'|trans
              }) }}
              {{ stimulus_action('manifest-urls', 'validateSubmit', 'submit') }}>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token(project ? 'project_update' : 'project_create') }}">

            <div>
                <label for="name" class="block text-sm font-medium text-dark-700 dark:text-dark-300 mb-1">{{ 'project.form.project_name'|trans }}</label>
                <input type="text"
                       name="name"
                       id="name"
                       data-test-id="project-form-name"
                       value="{{ project ? project.name : '' }}"
                       required
                       placeholder="{{ 'project.form.placeholder_project_name'|trans }}"
                       class="w-full px-3 py-2 border border-dark-300 dark:border-dark-600 rounded-md bg-white dark:bg-dark-800 text-dark-900 dark:text-dark-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
            </div>

            <div>
                <label for="git_url" class="block text-sm font-medium text-dark-700 dark:text-dark-300 mb-1">{{ 'project.form.project_link'|trans }}</label>
                <input type="url"
                       name="git_url"
                       id="git_url"
                       data-test-id="project-form-git-url"
                       value="{{ project ? project.gitUrl : '' }}"
                       required
                       placeholder="{{ 'project.form.placeholder_project_link'|trans }}"
                       class="w-full px-3 py-2 border border-dark-300 dark:border-dark-600 rounded-md bg-white dark:bg-dark-800 text-dark-900 dark:text-dark-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                <p class="mt-1 text-xs text-dark-500 dark:text-dark-400">{{ 'project.form.project_link_help'|trans }}</p>
                <div class="mt-2 p-3 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800">
                    <p class="text-xs text-amber-800 dark:text-amber-200">{{ 'project.form.project_link_note'|trans|raw }}</p>
                </div>
            </div>

            <div>
                <label for="github_token" class="block text-sm font-medium text-dark-700 dark:text-dark-300 mb-1">{{ 'project.form.github_access_key'|trans }}</label>
                <input type="password"
                       name="github_token"
                       id="github_token"
                       data-test-id="project-form-github-token"
                       value="{{ project ? (displayGithubToken is defined ? displayGithubToken : project.githubToken) : '' }}"
                       {{ (keysVisible is not defined or keysVisible) ? 'required' : 'disabled' }}
                       placeholder="{{ (keysVisible is defined and not keysVisible) ? 'project.form.keys_managed_by_deployment'|trans : 'project.form.placeholder_github_token'|trans }}"
                       class="w-full px-3 py-2 border border-dark-300 dark:border-dark-600 rounded-md bg-white dark:bg-dark-800 text-dark-900 dark:text-dark-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                <p class="mt-1 text-xs text-dark-500 dark:text-dark-400">{{ 'project.form.github_access_key_help'|trans }}</p>
            </div>

            {# Content Editing LLM Model Provider #}
            <fieldset>
                <legend class="etfswui-form-label mb-2">{{ 'project.form.content_editing_llm_provider'|trans }}</legend>
                <div class="space-y-2">
                    {% for provider in llmProviders %}
                        {% if provider.value == 'openai' %}
                            <label class="etfswui-form-radio-wrapper">
                                <input type="radio"
                                       name="content_editing_llm_model_provider"
                                       value="{{ provider.value }}"
                                       class="etfswui-form-radio"
                                       {{ (project and project.contentEditingLlmModelProvider.value == provider.value) or (not project and loop.first) ? 'checked' : '' }}
                                       required>
                                <span class="etfswui-form-radio-label">{{ provider.displayName }}</span>
                            </label>
                        {% endif %}
                    {% endfor %}
                </div>
            </fieldset>

            {# Content Editing LLM API Key with verification #}
            <div {{ stimulus_controller('llm-key-verification', {
                verifyUrl: path('project_mgmt.presentation.verify_llm_key'),
                csrfToken: csrf_token('verify_llm_key')
            }) }}>
                <label for="content_editing_api_key" class="etfswui-form-label">{{ 'project.form.content_editing_api_key'|trans }}</label>
                <input type="password"
                       name="content_editing_api_key"
                       id="content_editing_api_key"
                       data-test-id="project-form-content-editing-api-key"
                       value="{{ project ? (displayContentEditingApiKey is defined ? displayContentEditingApiKey : project.contentEditingLlmModelProviderApiKey) : '' }}"
                       {{ (keysVisible is not defined or keysVisible) ? 'required' : 'disabled' }}
                       placeholder="{{ (keysVisible is defined and not keysVisible) ? 'project.form.keys_managed_by_deployment'|trans : 'project.form.placeholder_llm_api_key'|trans }}"
                       class="etfswui-form-input"
                       {{ stimulus_target('llm-key-verification', 'input') }}
                       {{ stimulus_action('llm-key-verification', 'verify', 'blur') }}>

                {# Verification status area #}
                <div class="mt-2" {{ stimulus_target('llm-key-verification', 'status') }}>
                    {# Spinner (hidden by default) #}
                    <div class="hidden flex items-center gap-2" {{ stimulus_target('llm-key-verification', 'spinner') }}>
                        <svg class="animate-spin h-4 w-4 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <span class="text-sm text-blue-600 dark:text-blue-400">{{ 'project.form.verifying_key'|trans }}</span>
                    </div>
                    {# Success (hidden by default) #}
                    <div class="hidden flex items-center gap-2" {{ stimulus_target('llm-key-verification', 'success') }}>
                        <svg class="h-4 w-4 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                        </svg>
                        <span class="text-sm text-green-600 dark:text-green-400">{{ 'project.form.key_verified'|trans }}</span>
                    </div>
                    {# Error (hidden by default) #}
                    <div class="hidden flex items-center gap-2" {{ stimulus_target('llm-key-verification', 'error') }}>
                        <svg class="h-4 w-4 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                        </svg>
                        <span class="text-sm text-red-600 dark:text-red-400">{{ 'project.form.key_verification_failed'|trans }}</span>
                    </div>
                </div>

                <p class="mt-1 text-xs text-dark-500 dark:text-dark-400">{{ 'project.form.content_editing_api_key_help'|trans }}</p>

                {# Reuse existing keys #}
                {% if existingLlmKeys|length > 0 %}
                    <div class="mt-4 p-3 bg-dark-50 dark:bg-dark-900 rounded-md border border-dark-200 dark:border-dark-700">
                        <p class="etfswui-form-label mb-2">{{ 'project.form.reuse_existing_key'|trans }}</p>
                        <div class="space-y-1">
                            {% for key in existingLlmKeys %}
                                <button type="button"
                                        class="flex items-center gap-2 w-full text-left px-2 py-1.5 rounded hover:bg-dark-100 dark:hover:bg-dark-800 transition-colors"
                                        {{ stimulus_action('llm-key-verification', 'reuseKey') }}
                                        data-llm-key-verification-key-param="{{ key.apiKey }}">
                                    <span class="font-mono text-sm text-primary-600 dark:text-primary-400">{{ key.abbreviatedKey }}</span>
                                    <span class="text-xs text-dark-500 dark:text-dark-400">({{ key.projectNames|join(', ') }})</span>
                                </button>
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}
            </div>

            {# PhotoBuilder LLM Settings #}
            {% if keysVisible is not defined or keysVisible %}
            {% set currentPhotoBuilderMode = (project and project.photoBuilderLlmModelProvider is not null) ? 'dedicated' : 'reuse' %}
            <fieldset class="border border-dark-200 dark:border-dark-700 rounded-lg p-4 space-y-4">
                <legend class="etfswui-form-label px-2">{{ 'project.form.photo_builder_llm_settings'|trans }}</legend>
                <p class="text-xs text-dark-500 dark:text-dark-400">{{ 'project.form.photo_builder_llm_settings_help'|trans }}</p>

                {# Option A: Reuse content editing settings #}
                <label class="flex items-start gap-3 p-3 rounded-md border border-dark-200 dark:border-dark-700 cursor-pointer hover:bg-dark-50 dark:hover:bg-dark-900/50 transition-colors">
                    <input type="radio"
                           name="photo_builder_llm_mode"
                           value="reuse"
                           class="etfswui-form-radio mt-0.5"
                           {{ currentPhotoBuilderMode == 'reuse' ? 'checked' : '' }}
                           id="photo_builder_mode_reuse">
                    <div>
                        <span class="text-sm font-medium text-dark-700 dark:text-dark-300">{{ 'project.form.photo_builder_mode_reuse'|trans }}</span>
                        <p class="text-xs text-dark-500 dark:text-dark-400 mt-0.5">{{ 'project.form.photo_builder_mode_reuse_help'|trans }}</p>
                    </div>
                </label>

                {# Option B: Dedicated settings #}
                <label class="flex items-start gap-3 p-3 rounded-md border border-dark-200 dark:border-dark-700 cursor-pointer hover:bg-dark-50 dark:hover:bg-dark-900/50 transition-colors">
                    <input type="radio"
                           name="photo_builder_llm_mode"
                           value="dedicated"
                           class="etfswui-form-radio mt-0.5"
                           {{ currentPhotoBuilderMode == 'dedicated' ? 'checked' : '' }}
                           id="photo_builder_mode_dedicated">
                    <div>
                        <span class="text-sm font-medium text-dark-700 dark:text-dark-300">{{ 'project.form.photo_builder_mode_dedicated'|trans }}</span>
                        <p class="text-xs text-dark-500 dark:text-dark-400 mt-0.5">{{ 'project.form.photo_builder_mode_dedicated_help'|trans }}</p>
                    </div>
                </label>

                {# Dedicated settings panel (shown only when Option B is selected) #}
                <div id="photo_builder_dedicated_settings" class="{{ currentPhotoBuilderMode == 'dedicated' ? '' : 'hidden' }} ml-8 space-y-4 border-l-2 border-primary-300 dark:border-primary-700 pl-4">
                    {# Provider selection #}
                    <div class="space-y-2">
                        <span class="etfswui-form-label">{{ 'project.form.photo_builder_provider'|trans }}</span>
                        {% for provider in llmProviders %}
                            {% if provider.supportsPhotoBuilder %}
                                <label class="etfswui-form-radio-wrapper">
                                    <input type="radio"
                                           name="photo_builder_llm_model_provider"
                                           value="{{ provider.value }}"
                                           class="etfswui-form-radio"
                                           {{ (project and project.photoBuilderLlmModelProvider is not null and project.photoBuilderLlmModelProvider.value == provider.value) ? 'checked' : '' }}
                                           {{ (not project or project.photoBuilderLlmModelProvider is null) and loop.first ? 'checked' : '' }}>
                                    <span class="etfswui-form-radio-label">{{ provider.displayName }}</span>
                                </label>
                            {% endif %}
                        {% endfor %}
                    </div>

                    {# API Key with verification #}
                    <div {{ stimulus_controller('llm-key-verification', {
                        verifyUrl: path('project_mgmt.presentation.verify_llm_key'),
                        csrfToken: csrf_token('verify_llm_key')
                    }) }}>
                        <label for="photo_builder_api_key" class="etfswui-form-label">{{ 'project.form.photo_builder_api_key'|trans }}</label>
                        <input type="password"
                               name="photo_builder_api_key"
                               id="photo_builder_api_key"
                               value="{{ project ? (displayPhotoBuilderApiKey is defined ? displayPhotoBuilderApiKey : '') : '' }}"
                               placeholder="{{ 'project.form.placeholder_llm_api_key'|trans }}"
                               class="etfswui-form-input"
                               {{ stimulus_target('llm-key-verification', 'input') }}
                               {{ stimulus_action('llm-key-verification', 'verify', 'blur') }}>

                        {# Verification status #}
                        <div class="mt-2" {{ stimulus_target('llm-key-verification', 'status') }}>
                            <div class="hidden flex items-center gap-2" {{ stimulus_target('llm-key-verification', 'spinner') }}>
                                <svg class="animate-spin h-4 w-4 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                <span class="text-sm text-blue-600 dark:text-blue-400">{{ 'project.form.verifying_key'|trans }}</span>
                            </div>
                            <div class="hidden flex items-center gap-2" {{ stimulus_target('llm-key-verification', 'success') }}>
                                <svg class="h-4 w-4 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                                </svg>
                                <span class="text-sm text-green-600 dark:text-green-400">{{ 'project.form.key_verified'|trans }}</span>
                            </div>
                            <div class="hidden flex items-center gap-2" {{ stimulus_target('llm-key-verification', 'error') }}>
                                <svg class="h-4 w-4 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                                </svg>
                                <span class="text-sm text-red-600 dark:text-red-400">{{ 'project.form.key_verification_failed'|trans }}</span>
                            </div>
                        </div>

                        {# Reuse existing keys for PhotoBuilder #}
                        {% if existingLlmKeys|length > 0 %}
                            <div class="mt-4 p-3 bg-dark-50 dark:bg-dark-900 rounded-md border border-dark-200 dark:border-dark-700">
                                <p class="etfswui-form-label mb-2">{{ 'project.form.reuse_existing_key'|trans }}</p>
                                <div class="space-y-1">
                                    {% for key in existingLlmKeys %}
                                        <button type="button"
                                                class="flex items-center gap-2 w-full text-left px-2 py-1.5 rounded hover:bg-dark-100 dark:hover:bg-dark-800 transition-colors"
                                                {{ stimulus_action('llm-key-verification', 'reuseKey') }}
                                                data-llm-key-verification-key-param="{{ key.apiKey }}">
                                            <span class="font-mono text-sm text-primary-600 dark:text-primary-400">{{ key.abbreviatedKey }}</span>
                                            <span class="text-xs text-dark-500 dark:text-dark-400">({{ key.projectNames|join(', ') }})</span>
                                        </button>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        var reuse = document.getElementById('photo_builder_mode_reuse');
                        var dedicated = document.getElementById('photo_builder_mode_dedicated');
                        var settingsPanel = document.getElementById('photo_builder_dedicated_settings');
                        function togglePhotoBuilderSettings() {
                            if (dedicated.checked) {
                                settingsPanel.classList.remove('hidden');
                            } else {
                                settingsPanel.classList.add('hidden');
                            }
                        }
                        reuse.addEventListener('change', togglePhotoBuilderSettings);
                        dedicated.addEventListener('change', togglePhotoBuilderSettings);
                    });
                </script>
            </fieldset>
            {% endif %}

            {# GitHub Access Key Helper - shown after base required fields #}
            <div class="rounded-lg border border-dark-200 dark:border-dark-700 bg-dark-50 dark:bg-dark-800 p-4 text-sm text-dark-600 dark:text-dark-400 space-y-3">
                <p>
                    {{ 'project.form.github_token_info'|trans|raw }}
                </p>
                <div class="bg-white dark:bg-dark-900 rounded-md p-3 border border-dark-200 dark:border-dark-600">
                    <p class="font-medium text-dark-800 dark:text-dark-200 mb-2">{{ 'project.form.required_permissions'|trans }}</p>
                    <ul class="list-disc list-inside space-y-1 text-dark-600 dark:text-dark-400">
                        <li>{{ 'project.form.contents_permission'|trans|raw }}</li>
                        <li>{{ 'project.form.pull_requests_permission'|trans|raw }}</li>
                    </ul>
                </div>
                <div class="bg-white dark:bg-dark-900 rounded-md p-3 border border-dark-200 dark:border-dark-600">
                    <p class="font-medium text-dark-800 dark:text-dark-200 mb-2">{{ 'project.form.classic_token_alternative'|trans }}</p>
                    <ul class="list-disc list-inside space-y-1 text-dark-600 dark:text-dark-400">
                        <li>{{ 'project.form.repo_scope'|trans|raw }}</li>
                    </ul>
                </div>
                <p class="text-xs text-dark-500 dark:text-dark-500">
                    {{ 'project.form.create_token_link'|trans }} <a href="https://github.com/settings/personal-access-tokens" target="_blank" rel="noopener noreferrer" class="text-primary-600 dark:text-primary-400 hover:underline">github.com/settings/personal-access-tokens</a>
                </p>
            </div>

            {# Pro Settings - collapsible section for advanced/optional fields #}
            <details class="mt-8 border border-dark-200 dark:border-dark-700 rounded-lg">
                <summary class="px-4 py-3 cursor-pointer select-none text-sm font-medium text-dark-700 dark:text-dark-300 hover:bg-dark-50 dark:hover:bg-dark-900/50 rounded-lg">
                    {{ 'project.form.pro_settings'|trans }}
                </summary>
                <div class="px-4 pb-4 pt-2 space-y-6 border-t border-dark-200 dark:border-dark-700">
                    <p class="text-xs text-dark-500 dark:text-dark-400">
                        {{ 'project.form.pro_settings_description'|trans }}
                    </p>

            {% set currentImage = project ? project.agentImage : 'node:22-slim' %}
            {% set standardImages = ['node:22-slim', 'node:20-slim', 'node:18-slim', 'python:3.12-slim', 'php:8.4-cli'] %}
            {% set isCustomImage = currentImage not in standardImages %}

            <div>
                <label for="agent_image" class="block text-sm font-medium text-dark-700 dark:text-dark-300 mb-1">{{ 'project.form.runtime_environment'|trans }}</label>
                <select name="agent_image"
                        id="agent_image"
                        class="w-full px-3 py-2 border border-dark-300 dark:border-dark-600 rounded-md bg-white dark:bg-dark-800 text-dark-900 dark:text-dark-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                    <option value="node:22-slim" {{ currentImage == 'node:22-slim' ? 'selected' : '' }}>{{ 'project.form.node_22_recommended'|trans }}</option>
                    <option value="node:20-slim" {{ currentImage == 'node:20-slim' ? 'selected' : '' }}>{{ 'project.form.node_20'|trans }}</option>
                    <option value="node:18-slim" {{ currentImage == 'node:18-slim' ? 'selected' : '' }}>{{ 'project.form.node_18'|trans }}</option>
                    <option value="python:3.12-slim" {{ currentImage == 'python:3.12-slim' ? 'selected' : '' }}>{{ 'project.form.python_312'|trans }}</option>
                    <option value="php:8.4-cli" {{ currentImage == 'php:8.4-cli' ? 'selected' : '' }}>{{ 'project.form.php_84'|trans }}</option>
                    <option value="custom" {{ isCustomImage ? 'selected' : '' }}>{{ 'project.form.custom_image'|trans }}</option>
                </select>
                <p class="mt-1 text-xs text-dark-500 dark:text-dark-400">{{ 'project.form.runtime_help'|trans }}</p>
            </div>

            <div id="custom_image_container" class="{{ isCustomImage ? '' : 'hidden' }}">
                <label for="custom_agent_image" class="block text-sm font-medium text-dark-700 dark:text-dark-300 mb-1">{{ 'project.form.custom_docker_image'|trans }}</label>
                <input type="text"
                       name="custom_agent_image"
                       id="custom_agent_image"
                       value="{{ isCustomImage ? currentImage : '' }}"
                       placeholder="{{ 'project.form.placeholder_custom_image'|trans }}"
                       class="w-full px-3 py-2 border border-dark-300 dark:border-dark-600 rounded-md bg-white dark:bg-dark-800 text-dark-900 dark:text-dark-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                <p class="mt-1 text-xs text-dark-500 dark:text-dark-400">{{ 'project.form.custom_image_help'|trans }}</p>
            </div>

            <script>
                document.getElementById('agent_image').addEventListener('change', function() {
                    const customContainer = document.getElementById('custom_image_container');
                    const customInput = document.getElementById('custom_agent_image');
                    if (this.value === 'custom') {
                        customContainer.classList.remove('hidden');
                        customInput.required = true;
                    } else {
                        customContainer.classList.add('hidden');
                        customInput.required = false;
                    }
                });
            </script>

            {# Agent Configuration (Advanced) - collapsible section #}
            <details class="border border-dark-200 dark:border-dark-700 rounded-lg">
                <summary class="px-4 py-3 cursor-pointer select-none text-sm font-medium text-dark-700 dark:text-dark-300 hover:bg-dark-50 dark:hover:bg-dark-900/50 rounded-lg">
                    {{ 'project.form.agent_config_advanced'|trans }}
                </summary>
                <div class="px-4 pb-4 pt-2 space-y-4 border-t border-dark-200 dark:border-dark-700">
                    <p class="text-xs text-dark-500 dark:text-dark-400">
                        {{ 'project.form.agent_config_description'|trans }}
                    </p>
                    <div class="flex justify-end">
                        <button type="button"
                                id="agent_config_reset_btn"
                                class="px-3 py-1.5 rounded-md border border-dark-300 dark:border-dark-600 text-dark-700 dark:text-dark-300 text-sm font-medium hover:bg-dark-100 dark:hover:bg-dark-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
                            {{ 'project.form.reset_agent_config_to_defaults'|trans }}
                        </button>
                    </div>
                    <script type="application/json" id="agent_config_defaults">{{ { background: agentConfigTemplate.backgroundInstructions, step: agentConfigTemplate.stepInstructions, output: agentConfigTemplate.outputInstructions }|json_encode|raw }}</script>
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            var defaultsEl = document.getElementById('agent_config_defaults');
                            var defaults = JSON.parse(defaultsEl.textContent);
                            document.getElementById('agent_config_reset_btn').addEventListener('click', function() {
                                document.getElementById('agent_background_instructions').value = defaults.background;
                                document.getElementById('agent_step_instructions').value = defaults.step;
                                document.getElementById('agent_output_instructions').value = defaults.output;
                            });
                        });
                    </script>

                    <div>
                        <label for="agent_background_instructions" class="etfswui-form-label">{{ 'project.form.background_instructions'|trans }}</label>
                        <textarea name="agent_background_instructions"
                                  id="agent_background_instructions"
                                  rows="10"
                                  class="etfswui-form-textarea font-mono text-xs"
                                  placeholder="{{ 'project.form.background_instructions_placeholder'|trans }}">{{ project ? project.agentBackgroundInstructions : agentConfigTemplate.backgroundInstructions }}</textarea>
                        <p class="mt-1 text-xs text-dark-500 dark:text-dark-400">
                            {{ 'project.form.background_instructions_help'|trans }}
                        </p>
                    </div>

                    <div>
                        <label for="agent_step_instructions" class="etfswui-form-label">{{ 'project.form.step_instructions'|trans }}</label>
                        <textarea name="agent_step_instructions"
                                  id="agent_step_instructions"
                                  rows="6"
                                  class="etfswui-form-textarea font-mono text-xs"
                                  placeholder="{{ 'project.form.step_instructions_placeholder'|trans }}">{{ project ? project.agentStepInstructions : agentConfigTemplate.stepInstructions }}</textarea>
                        <p class="mt-1 text-xs text-dark-500 dark:text-dark-400">
                            {{ 'project.form.step_instructions_help'|trans }}
                        </p>
                    </div>

                    <div>
                        <label for="agent_output_instructions" class="etfswui-form-label">{{ 'project.form.output_instructions'|trans }}</label>
                        <textarea name="agent_output_instructions"
                                  id="agent_output_instructions"
                                  rows="4"
                                  class="etfswui-form-textarea font-mono text-xs"
                                  placeholder="{{ 'project.form.output_instructions_placeholder'|trans }}">{{ project ? project.agentOutputInstructions : agentConfigTemplate.outputInstructions }}</textarea>
                        <p class="mt-1 text-xs text-dark-500 dark:text-dark-400">
                            {{ 'project.form.output_instructions_help'|trans }}
                        </p>
                    </div>
                </div>
            </details>

            {# Remote content assets manifest URLs (optional) #}
            <div>
                <label for="remote_content_assets_manifest_urls" class="block text-sm font-medium text-dark-700 dark:text-dark-300 mb-1">{{ 'project.form.remote_content_assets_manifest_urls'|trans }}</label>
                <textarea name="remote_content_assets_manifest_urls"
                          id="remote_content_assets_manifest_urls"
                          rows="3"
                          class="w-full px-3 py-2 border border-dark-300 dark:border-dark-600 rounded-md bg-white dark:bg-dark-800 text-dark-900 dark:text-dark-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 font-mono text-xs"
                          placeholder="{{ 'project.form.remote_content_assets_manifest_urls_placeholder'|trans }}"
                          data-manifest-urls-target="input"
                          data-action="blur->manifest-urls#verify input->manifest-urls#checkSyntax">{{ project ? (project.getRemoteContentAssetsManifestUrls()|join("\n")) : '' }}</textarea>
                <p class="mt-1 text-xs text-dark-500 dark:text-dark-400">{{ 'project.form.remote_content_assets_manifest_urls_help'|trans }}</p>
                <div class="mt-2" data-manifest-urls-target="status">
                    <div class="hidden flex items-center gap-2" data-manifest-urls-target="syntaxError">
                        <span class="text-sm text-red-600 dark:text-red-400" data-manifest-urls-target="syntaxErrorText"></span>
                    </div>
                    <div class="hidden flex items-center gap-2" data-manifest-urls-target="spinner">
                        <svg class="animate-spin h-4 w-4 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        <span class="text-sm text-blue-600 dark:text-blue-400">{{ 'project.form.verifying_key'|trans }}</span>
                    </div>
                    <div class="hidden flex items-center gap-2" data-manifest-urls-target="success">
                        <svg class="h-4 w-4 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                        </svg>
                        <span class="text-sm text-green-600 dark:text-green-400">{{ 'project.form.remote_content_assets_manifest_urls_verified'|trans }}</span>
                    </div>
                    <div class="hidden flex items-center gap-2" data-manifest-urls-target="warning">
                        <svg class="h-4 w-4 text-amber-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
                        </svg>
                        <span class="text-sm text-amber-600 dark:text-amber-400">{{ 'project.form.remote_content_assets_manifest_urls_warning'|trans }}</span>
                    </div>
                </div>
            </div>

            {# S3 Upload Configuration (Optional) - collapsible section #}
            <details class="border border-dark-200 dark:border-dark-700 rounded-lg"
                     {{ stimulus_controller('s3-credentials', {
                         verifyUrl: path('project_mgmt.presentation.verify_s3_credentials'),
                         csrfToken: csrf_token('verify_s3_credentials')
                     }) }}>
                <summary class="px-4 py-3 cursor-pointer select-none text-sm font-medium text-dark-700 dark:text-dark-300 hover:bg-dark-50 dark:hover:bg-dark-900/50 rounded-lg">
                    {{ 'project.form.s3_upload_config'|trans }}
                    <span class="text-dark-500 dark:text-dark-400 font-normal">({{ 'common.optional'|trans }})</span>
                </summary>
                <div class="px-4 pb-4 pt-2 space-y-4 border-t border-dark-200 dark:border-dark-700">
                    <p class="text-xs text-dark-500 dark:text-dark-400">
                        {{ 'project.form.s3_upload_description'|trans }}
                    </p>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="s3_bucket_name" class="etfswui-form-label">{{ 'project.form.s3_bucket_name'|trans }}</label>
                            <input type="text"
                                   name="s3_bucket_name"
                                   id="s3_bucket_name"
                                   value="{{ project ? project.getS3BucketName() : '' }}"
                                   placeholder="{{ 'project.form.s3_bucket_name_placeholder'|trans }}"
                                   class="etfswui-form-input"
                                   {{ stimulus_target('s3-credentials', 'bucketName') }}>
                        </div>

                        <div>
                            <label for="s3_region" class="etfswui-form-label">{{ 'project.form.s3_region'|trans }}</label>
                            <select name="s3_region"
                                    id="s3_region"
                                    class="etfswui-form-input"
                                    {{ stimulus_target('s3-credentials', 'region') }}>
                                <option value="">{{ 'project.form.s3_region_placeholder'|trans }}</option>
                                {% set currentRegion = project ? project.getS3Region() : '' %}
                                {% for region in ['us-east-1', 'us-east-2', 'us-west-1', 'us-west-2', 'eu-central-1', 'eu-west-1', 'eu-west-2', 'eu-west-3', 'eu-north-1', 'ap-northeast-1', 'ap-northeast-2', 'ap-southeast-1', 'ap-southeast-2', 'ap-south-1', 'sa-east-1'] %}
                                    <option value="{{ region }}" {{ currentRegion == region ? 'selected' : '' }}>{{ region }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div>
                        <label for="s3_access_key_id" class="etfswui-form-label">{{ 'project.form.s3_access_key_id'|trans }}</label>
                        <input type="text"
                               name="s3_access_key_id"
                               id="s3_access_key_id"
                               value="{{ project ? project.getS3AccessKeyId() : '' }}"
                               placeholder="{{ 'project.form.s3_access_key_id_placeholder'|trans }}"
                               class="etfswui-form-input font-mono"
                               {{ stimulus_target('s3-credentials', 'accessKeyId') }}>
                    </div>

                    <div>
                        <label for="s3_secret_access_key" class="etfswui-form-label">{{ 'project.form.s3_secret_access_key'|trans }}</label>
                        <input type="password"
                               name="s3_secret_access_key"
                               id="s3_secret_access_key"
                               value="{{ project ? project.getS3SecretAccessKey() : '' }}"
                               placeholder="{{ 'project.form.s3_secret_access_key_placeholder'|trans }}"
                               class="etfswui-form-input"
                               {{ stimulus_target('s3-credentials', 'secretAccessKey') }}
                               {{ stimulus_action('s3-credentials', 'verify', 'blur') }}>
                    </div>

                    <div>
                        <label for="s3_iam_role_arn" class="etfswui-form-label">
                            {{ 'project.form.s3_iam_role_arn'|trans }}
                            <span class="text-dark-500 dark:text-dark-400 font-normal">({{ 'common.optional'|trans }})</span>
                        </label>
                        <input type="text"
                               name="s3_iam_role_arn"
                               id="s3_iam_role_arn"
                               value="{{ project ? project.getS3IamRoleArn() : '' }}"
                               placeholder="{{ 'project.form.s3_iam_role_arn_placeholder'|trans }}"
                               class="etfswui-form-input font-mono text-xs"
                               {{ stimulus_target('s3-credentials', 'iamRoleArn') }}
                               {{ stimulus_action('s3-credentials', 'verify', 'blur') }}>
                        <p class="mt-1 text-xs text-dark-500 dark:text-dark-400">{{ 'project.form.s3_iam_role_arn_help'|trans }}</p>
                    </div>

                    <div>
                        <label for="s3_key_prefix" class="etfswui-form-label">
                            {{ 'project.form.s3_key_prefix'|trans }}
                            <span class="text-dark-500 dark:text-dark-400 font-normal">({{ 'common.optional'|trans }})</span>
                        </label>
                        <input type="text"
                               name="s3_key_prefix"
                               id="s3_key_prefix"
                               value="{{ project ? project.getS3KeyPrefix() : '' }}"
                               placeholder="{{ 'project.form.s3_key_prefix_placeholder'|trans }}"
                               class="etfswui-form-input"
                               {{ stimulus_target('s3-credentials', 'keyPrefix') }}>
                        <p class="mt-1 text-xs text-dark-500 dark:text-dark-400">{{ 'project.form.s3_key_prefix_help'|trans }}</p>
                    </div>

                    {# Verification status area #}
                    <div class="mt-2" {{ stimulus_target('s3-credentials', 'status') }}>
                        {# Spinner (hidden by default) #}
                        <div class="hidden flex items-center gap-2" {{ stimulus_target('s3-credentials', 'spinner') }}>
                            <svg class="animate-spin h-4 w-4 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            <span class="text-sm text-blue-600 dark:text-blue-400">{{ 'project.form.verifying_s3_credentials'|trans }}</span>
                        </div>
                        {# Success (hidden by default) #}
                        <div class="hidden flex items-center gap-2" {{ stimulus_target('s3-credentials', 'success') }}>
                            <svg class="h-4 w-4 text-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
                            </svg>
                            <span class="text-sm text-green-600 dark:text-green-400">{{ 'project.form.s3_credentials_verified'|trans }}</span>
                        </div>
                        {# Error (hidden by default) #}
                        <div class="hidden flex items-center gap-2" {{ stimulus_target('s3-credentials', 'error') }}>
                            <svg class="h-4 w-4 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
                            </svg>
                            <span class="text-sm text-red-600 dark:text-red-400">{{ 'project.form.s3_credentials_failed'|trans }}</span>
                        </div>
                    </div>
                </div>
            </details>

                </div>
            </details>

            <div class="flex items-center justify-end gap-3 pt-4 border-t border-dark-200 dark:border-dark-700">
                <a href="{{ path('project_mgmt.presentation.list') }}"
                   class="px-4 py-2 rounded-md border border-dark-300 dark:border-dark-600 text-dark-700 dark:text-dark-300 text-sm font-medium hover:bg-dark-100 dark:hover:bg-dark-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
                    {{ 'common.cancel'|trans }}
                </a>
                <button type="submit"
                        data-test-id="project-form-submit"
                        class="px-4 py-2 rounded-md bg-primary-600 text-white text-sm font-medium hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-dark-900">
                    {{ project ? 'project.form.update_project_button'|trans : 'project.form.add_project_button'|trans }}
                </button>
            </div>
        </form>
    </div>
{% endblock content %}