<!-- Parameter Change Component -->
<div class="parameter-change mb-3">
    <div class="card">
        <!-- Header -->
        <div class="card-header d-flex justify-content-between align-items-center">
            <div>
                <i class="fas fa-edit me-2"></i>
                <strong>Parameter Changes</strong>
            </div>
            <button type="button"
                    class="btn btn-outline-danger btn-sm remove-parameter-change"
                    hx-delete="/remove-parameter-change"
                    hx-target="closest .parameter-change"
                    hx-swap="outerHTML"
                    hx-push-url="false"
                    aria-label="Remove Parameter Change"
                    title="Remove this parameter change block">
                <i class="fas fa-trash-alt me-1"></i>
                Remove Block
            </button>
        </div>

        <!-- Body -->
        <div class="card-body">
            <!-- Timing Section -->
            <div class="mb-4">
                <h6 class="text-muted mb-3">
                    <i class="fas fa-clock me-2"></i>
                    When These Changes Take Effect
                </h6>

                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="change_dates_{{ uuid }}" class="form-label">
                            <i class="fas fa-calendar me-1"></i>
                            Effective Date
                        </label>
                        <input type="date"
                               name="change_dates"
                               id="change_dates_{{ uuid }}"
                               value="{{ date }}"
                               required
                               class="form-control date-input"
                               data-uuid="{{ uuid }}">
                        <small class="form-help">Specific date when changes occur</small>
                    </div>

                    <div class="col-md-6">
                        <label for="years_from_now_{{ uuid }}" class="form-label">
                            <i class="fas fa-hourglass-half me-1"></i>
                            Years from Now
                        </label>
                        <input type="number"
                               step="0.1"
                               min="0"
                               id="years_from_now_{{ uuid }}"
                               class="form-control years-input"
                               data-uuid="{{ uuid }}"
                               placeholder="0">
                        <small class="form-help">How many years from today</small>
                    </div>
                </div>

                <div class="mt-2">
                    <small class="text-muted">
                        <i class="fas fa-sync-alt me-1"></i>
                        These fields are automatically synchronized
                    </small>
                </div>
            </div>

            <!-- Parameter Changes Section -->
            <div class="mb-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="text-muted mb-0">
                        <i class="fas fa-cog me-2"></i>
                        Parameters to Change
                    </h6>
                    <button type="button"
                            class="btn btn-outline-primary btn-sm"
                            hx-get="/add-parameter-row/{{ uuid }}"
                            hx-target=".parameter-rows-container[data-uuid='{{ uuid }}']"
                            hx-swap="beforeend"
                            hx-push-url="false"
                            title="Add another parameter change for the same date">
                        <i class="fas fa-plus me-1"></i>
                        Add Parameter
                    </button>
                </div>

                <div class="parameter-rows-container" data-uuid="{{ uuid }}">
                    <!-- Initial parameter row -->
                    {% set is_first_row = True %}
                    {% set date = date if date else "" %}
                    {% set field = field if field else "" %}
                    {% set value = value if value else "" %}
                    {% include "parameter_row.html.jinja2" %}
                </div>
            </div>

            <!-- Help Text -->
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                <strong>Tip:</strong> You can add multiple parameter changes for the same date to model complex life events
                like getting a promotion (salary increase) and moving to a more expensive city (spending increase) simultaneously.
            </div>
        </div>
    </div>
</div>
