<div id="availableStagesInfo" class="alert alert-success">
    <div class="d-flex align-items-center">
        <i class="fas fa-check-circle me-2"></i>
        <strong>Success:</strong>
        <span class="ms-2">{{ message }}</span>
    </div>
</div>

<script>
// Update the current stage badge on the page
document.addEventListener('DOMContentLoaded', function() {
    const currentStageBadge = document.getElementById('currentStageBadge');
    const candidateSlug = '{{ candidate.slug }}';

    if (currentStageBadge) {
        currentStageBadge.textContent = '{{ new_stage_display }}';
        // Update badge color based on new stage
        currentStageBadge.className = 'badge ms-2';
        if ('{{ new_stage }}' === 'Applied') {
            currentStageBadge.classList.add('bg-primary');
        } else if ('{{ new_stage }}' === 'Exam') {
            currentStageBadge.classList.add('bg-info');
        } else if ('{{ new_stage }}' === 'Interview') {
            currentStageBadge.classList.add('bg-warning');
        } else if ('{{ new_stage }}' === 'Offer') {
            currentStageBadge.classList.add('bg-success');
        }
    }

    // Close modal after a short delay
    setTimeout(() => {
        const modal = bootstrap.Modal.getInstance(document.getElementById('stageUpdateModal'));
        if (modal) {
            modal.hide();
        }
    }, 2000);
});
</script>
