<div class="multi-step-form-component">
    <!-- Progress Bar -->
    <div class="progress-container">
        <div class="progress-bar">
            <div class="progress-fill" style="width: {{progress_percentage}}%"></div>
        </div>
        <div class="progress-text">Schritt {{current_step}} von {{total_steps}}</div>
    </div>

    <!-- Current Step -->
    <div class="form-step" if="!submitted">
        <h2 class="step-title">{{step_title}}</h2>
        <p class="step-description">{{step_description}}</p>

        <!-- Dynamically generated form fields -->
        <div class="form-fields">
            {{{form_html}}}
        </div>

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

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

            <button
                class="btn btn-primary"
                data-live-action="nextStep"
                if="can_go_next"
            >
                Weiter →
            </button>

            <button
                class="btn btn-success"
                data-live-action="submit"
                if="is_last_step"
            >
                Absenden
            </button>
        </div>
    </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>

<style>
.multi-step-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: 1rem;
}

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

.progress-text {
    text-align: center;
    color: #666;
    font-size: 0.875rem;
}

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

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

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

.form-fields {
    margin-bottom: 2rem;
}

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

.form-fields input[type="text"],
.form-fields input[type="email"],
.form-fields select,
.form-fields textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s;
    margin-bottom: 1rem;
}

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

.error-summary {
    background: #ffebee;
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid #f44336;
    margin-bottom: 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>
