<!-- Stage Update Form with Errors -->
<form id="stageUpdateForm" hx-post="{% url 'candidate_update_stage' candidate.slug %}">
    {% csrf_token %}

    <!-- Stage Selection -->
    <div class="mb-3">
        <label for="id_stage" class="form-label">
            <i class="fas fa-arrow-right me-1"></i>Move to Stage
        </label>
        <select name="stage" id="id_stage" class="form-select {% if form.stage.errors %}is-invalid{% endif %}">
            {% for value, label in form.stage.field.choices %}
                <option value="{{ value }}">{{ label }}</option>
            {% endfor %}
        </select>
        {% if form.stage.errors %}
            <div class="invalid-feedback">
                {{ form.stage.errors }}
            </div>
        {% endif %}
    </div>

    <!-- Error Messages -->
    {% if form.non_field_errors %}
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-triangle me-2"></i>
            {{ form.non_field_errors }}
        </div>
    {% endif %}

    <!-- Form Actions -->
    <div class="d-flex justify-content-between mt-4">
        <button type="button" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-1"></i>Cancel
        </button>
        <button type="submit" class="btn btn-primary" id="stageUpdateSubmit">
            <i class="fas fa-save me-1"></i>Update Stage
        </button>
    </div>
</form>

<script>
// Re-initialize modal after HTMX update
document.addEventListener('DOMContentLoaded', function() {
    // Re-add event listeners for stage selection
    const stageSelect = document.getElementById('id_stage');
    const availableStagesText = document.getElementById('availableStagesText');
    const candidate = {{ candidate.stage|json }};

    if (stageSelect) {
        stageSelect.addEventListener('change', function() {
            const selectedValue = this.value;
            const currentStage = candidate;

            if (selectedValue && selectedValue !== currentStage) {
                const stageLabels = {
                    'Applied': 'Applied',
                    'Exam': 'Exam',
                    'Interview': 'Interview',
                    'Offer': 'Offer'
                };

                if (availableStagesText) {
                    availableStagesText.textContent = `Moving from "${currentStage}" to "${stageLabels[selectedValue]}". This transition is allowed.`;
                    availableStagesText.parentElement.parentElement.classList.remove('alert-warning', 'alert-light');
                    availableStagesText.parentElement.parentElement.classList.add('alert-success');
                }
            } else if (selectedValue === currentStage) {
                if (availableStagesText) {
                    availableStagesText.textContent = 'No stage change selected. The candidate is already in this stage.';
                    availableStagesText.parentElement.parentElement.classList.remove('alert-success', 'alert-warning');
                    availableStagesText.parentElement.parentElement.classList.add('alert-info');
                }
            } else {
                if (availableStagesText) {
                    availableStagesText.textContent = 'Select a stage above to see transition information.';
                    availableStagesText.parentElement.parentElement.classList.remove('alert-success', 'alert-warning');
                    availableStagesText.parentElement.parentElement.classList.add('alert-light');
                }
            }
        });
    }
});
</script>
