@props([
    'id' => 'save-actions-loading',
])

{{--
    Save Actions Loading Indicator Component
    
    Usage:
    1. Include the CSS in your view's extra-styles section:
       <link rel="stylesheet" href="{{ asset('assets/css/custom/save-actions-loading.css') }}">
    
    2. Add the component where needed:
       <x-save-actions-loading />
    
    3. Include the JS at the end of extra_scripts:
       <script src="{{ asset('assets/js/custom/save-actions-loading.js') }}" defer></script>
    
    This component must be used alongside:
    - A button group with id="save-actions-btn-group"
    - The save-actions-loading.js script
    - The save-actions-loading.css stylesheet
--}}

<div class="save-actions-loading pull-right" id="{{ $id }}" style="display: none;">
    <div class="save-actions-spinner"></div>
    <span class="save-actions-message">{{ app()->getLocale() === 'ar' ? 'جاري الحفظ...' : 'Saving...' }}</span>
</div>