<div class="dynamic-form-component">
    <!-- Progress Bar -->
    <div class="progress-container">
        <div class="progress-bar">
            <div class="progress-fill" style="width: {{progressPercentage}}%"></div>
        </div>
        <div class="progress-steps">
            <for items="steps" as="step">
                <div class="progress-step {{step.stepClass}}">
                    <div class="step-number">{{step.number}}</div>
                    <div class="step-label">{{step.title}}</div>
                </div>
            </for>
        </div>
    </div>

    <!-- Form Content -->
    <div class="form-content">
        <!-- Step 1: Personal Information -->
        <div class="form-step" if="isFirstStep">
            <h2 class="step-title">{{stepTitle}}</h2>
            <p class="step-description">{{stepDescription}}</p>

            <div class="form-group">
                <label for="first_name">First Name *</label>
                <input
                    type="text"
                    id="first_name"
                    name="first_name"
                    value="{{form_first_name}}"
                    data-live-action="updateField"
                    class="{{first_name_class}}"
                />
                <span class="error-message" if="errors.first_name">{{errors.first_name}}</span>
            </div>

            <div class="form-group">
                <label for="last_name">Last Name *</label>
                <input
                    type="text"
                    id="last_name"
                    name="last_name"
                    value="{{form_last_name}}"
                    data-live-action="updateField"
                    class="{{last_name_class}}"
                />
                <span class="error-message" if="errors.last_name">{{errors.last_name}}</span>
            </div>

            <div class="form-group">
                <label for="email">Email Address *</label>
                <input
                    type="email"
                    id="email"
                    name="email"
                    value="{{form_email}}"
                    data-live-action="updateField"
                    class="{{email_class}}"
                />
                <span class="error-message" if="errors.email">{{errors.email}}</span>
            </div>
        </div>

        <!-- Step 2: Account Type -->
        <div class="form-step" if="isSecondStep">
            <h2 class="step-title">{{stepTitle}}</h2>
            <p class="step-description">{{stepDescription}}</p>

            <div class="form-group">
                <label>Account Type *</label>
                <div class="radio-group">
                    <label class="radio-label">
                        <input
                            type="radio"
                            name="account_type"
                            value="personal"
                            data-live-action="updateField"
                            {{personal_checked}}
                        />
                        <span>Personal Account</span>
                    </label>
                    <label class="radio-label">
                        <input
                            type="radio"
                            name="account_type"
                            value="business"
                            data-live-action="updateField"
                            {{business_checked}}
                        />
                        <span>Business Account</span>
                    </label>
                </div>
                <span class="error-message" if="errors.account_type">{{errors.account_type}}</span>
            </div>

            <!-- Conditional Fields for Business Account -->
            <div class="conditional-fields" if="showBusinessFields">
                <div class="form-group">
                    <label for="company_name">Company Name *</label>
                    <input
                        type="text"
                        id="company_name"
                        name="company_name"
                        value="{{form_company_name}}"
                        data-live-action="updateField"
                        class="{{company_name_class}}"
                    />
                    <span class="error-message" if="errors.company_name">{{errors.company_name}}</span>
                </div>

                <div class="form-group">
                    <label for="vat_number">VAT Number *</label>
                    <input
                        type="text"
                        id="vat_number"
                        name="vat_number"
                        value="{{form_vat_number}}"
                        data-live-action="updateField"
                        class="{{vat_number_class}}"
                        placeholder="DE123456789"
                    />
                    <span class="error-message" if="errors.vat_number">{{errors.vat_number}}</span>
                </div>
            </div>
        </div>

        <!-- Step 3: Preferences -->
        <div class="form-step" if="isThirdStep">
            <h2 class="step-title">{{stepTitle}}</h2>
            <p class="step-description">{{stepDescription}}</p>

            <div class="form-group">
                <label class="checkbox-label">
                    <input
                        type="checkbox"
                        name="newsletter"
                        data-live-action="updateField"
                        {{newsletter_checked}}
                    />
                    <span>Subscribe to newsletter</span>
                </label>
            </div>

            <div class="form-group">
                <label for="language">Preferred Language</label>
                <select
                    id="language"
                    name="language"
                    data-live-action="updateField"
                    class="form-input"
                >
                    <option value="en" {{language_en_selected}}>English</option>
                    <option value="de" {{language_de_selected}}>Deutsch</option>
                    <option value="fr" {{language_fr_selected}}>Français</option>
                    <option value="es" {{language_es_selected}}>Español</option>
                </select>
            </div>

            <div class="form-group">
                <label for="timezone">Timezone</label>
                <select
                    id="timezone"
                    name="timezone"
                    data-live-action="updateField"
                    class="form-input"
                >
                    <option value="UTC" {{timezone_utc_selected}}>UTC</option>
                    <option value="Europe/Berlin" {{timezone_berlin_selected}}>Europe/Berlin</option>
                    <option value="America/New_York" {{timezone_ny_selected}}>America/New York</option>
                    <option value="Asia/Tokyo" {{timezone_tokyo_selected}}>Asia/Tokyo</option>
                </select>
            </div>
        </div>

        <!-- Step 4: Review & Submit -->
        <div class="form-step" if="isFinalStep">
            <h2 class="step-title">{{stepTitle}}</h2>
            <p class="step-description">{{stepDescription}}</p>

            <div class="review-section">
                <h3>Personal Information</h3>
                <div class="review-item">
                    <span class="review-label">Name:</span>
                    <span class="review-value">{{form_full_name}}</span>
                </div>
                <div class="review-item">
                    <span class="review-label">Email:</span>
                    <span class="review-value">{{form_email}}</span>
                </div>
            </div>

            <div class="review-section">
                <h3>Account Details</h3>
                <div class="review-item">
                    <span class="review-label">Account Type:</span>
                    <span class="review-value">{{account_type_display}}</span>
                </div>
                <div if="showBusinessFields">
                    <div class="review-item">
                        <span class="review-label">Company:</span>
                        <span class="review-value">{{form_company_name}}</span>
                    </div>
                    <div class="review-item">
                        <span class="review-label">VAT Number:</span>
                        <span class="review-value">{{form_vat_number}}</span>
                    </div>
                </div>
            </div>

            <div class="review-section">
                <h3>Preferences</h3>
                <div class="review-item">
                    <span class="review-label">Newsletter:</span>
                    <span class="review-value">{{newsletter_display}}</span>
                </div>
                <div class="review-item">
                    <span class="review-label">Language:</span>
                    <span class="review-value">{{form_language}}</span>
                </div>
                <div class="review-item">
                    <span class="review-label">Timezone:</span>
                    <span class="review-value">{{form_timezone}}</span>
                </div>
            </div>

            <div class="error-summary" if="hasErrors">
                <strong>Bitte korrigieren Sie folgende Fehler:</strong>
                <ul>
                    <for items="errors" as="field => error">
                        <li>{{error}}</li>
                    </for>
                </ul>
            </div>
        </div>

        <!-- Navigation Buttons -->
        <div class="form-actions" if="!submitted">
            <button
                class="btn btn-secondary"
                data-live-action="previousStep"
                if="canGoPrevious"
            >
                ← Zurück
            </button>

            <button
                class="btn btn-primary"
                data-live-action="nextStep"
                if="canGoNext"
            >
                {{nextButtonText}}
            </button>

            <button
                class="btn btn-success"
                data-live-action="submit"
                if="isFinalStep"
            >
                {{submitButtonText}}
            </button>
        </div>

        <!-- Success Message -->
        <div class="success-message" if="submitted">
            <div class="success-icon">✓</div>
            <h2>Formular erfolgreich abgeschickt!</h2>
            <p class="submission-id">Submission ID: {{submission_id}}</p>
            <div class="submitted-data">
                <h3>Übermittelte Daten:</h3>
                <pre>{{form_data_json}}</pre>
            </div>
            <button
                class="btn btn-primary"
                data-live-action="reset"
            >
                Neues Formular starten
            </button>
        </div>
    </div>
</div>

<style>
.dynamic-form-component {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-width: 700px;
    margin: 0 auto;
}

.progress-container {
    margin-bottom: 2rem;
}

.progress-bar {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.progress-fill {
    height: 100%;
    background: #2196F3;
    transition: width 0.3s ease;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
}

.progress-step {
    text-align: center;
    flex: 1;
}

.step-number {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #e0e0e0;
    color: #999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 0.5rem;
    transition: all 0.3s;
}

.progress-step.active .step-number {
    background: #2196F3;
    color: white;
}

.progress-step.completed .step-number {
    background: #4CAF50;
    color: white;
}

.step-label {
    font-size: 0.875rem;
    color: #666;
}

.form-step {
    min-height: 300px;
}

.step-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.step-description {
    color: #666;
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: #2196F3;
}

.form-input.error {
    border-color: #f44336;
}

.error-message {
    display: block;
    color: #f44336;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    transition: all 0.2s;
}

.radio-label:hover {
    background: #f5f5f5;
}

.radio-label input[type="radio"] {
    margin: 0;
}

.radio-label input[type="radio"]:checked + span {
    font-weight: 600;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.conditional-fields {
    background: #f9f9f9;
    padding: 1.5rem;
    border-radius: 6px;
    margin-top: 1rem;
    border-left: 4px solid #2196F3;
}

.review-section {
    background: #f9f9f9;
    padding: 1.5rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.review-section h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #555;
}

.review-item {
    display: flex;
    margin-bottom: 0.75rem;
}

.review-label {
    font-weight: 600;
    min-width: 150px;
    color: #666;
}

.review-value {
    color: #333;
}

.error-summary {
    background: #ffebee;
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid #f44336;
    margin-top: 1.5rem;
}

.error-summary ul {
    margin-top: 0.5rem;
    margin-left: 1.5rem;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: #2196F3;
    color: white;
}

.btn-primary:hover {
    background: #1976D2;
}

.btn-secondary {
    background: #e0e0e0;
    color: #333;
}

.btn-secondary:hover {
    background: #d0d0d0;
}

.btn-success {
    background: #4CAF50;
    color: white;
}

.btn-success:hover {
    background: #45a049;
}

.success-message {
    text-align: center;
    padding: 3rem 1rem;
}

.success-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #4CAF50;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.submission-id {
    color: #666;
    margin: 1rem 0;
    font-family: monospace;
}

.submitted-data {
    background: #f9f9f9;
    padding: 1.5rem;
    border-radius: 6px;
    margin: 2rem 0;
    text-align: left;
}

.submitted-data pre {
    font-size: 0.875rem;
    overflow-x: auto;
}
</style>
