@props(['min', 'max', 'step', 'list', 'displayMode', 'scale_style', 'name'])

<div class="dgc-range-input-container">    
    <div class="d-flex align-items-center justity-content-between">
        {{-- Message de début --}}
        @if(!empty($message['start']))
        <span class="dgc-label-se text-end">{{ $message['start']}}</span>
        @endif
        {{-- Range --}}
        <div class="dgc-range flex-grow-1">
            {{-- Input --}}
            <div class="dgc-range-input-group {{$scale_style}} dgc-display-{{$displayMode}}">
                <input type="range" class="dgc-range-input" min="{{ $min }}" max="{{ $max }}" step="{{ $step }}" name="{{ $name }}">
                {{-- Valeur --}}
                <div class="dgc-range-degrees">
                    @if($displayMode != 'none')
                    @for ($i = $min; $i <= $max; $i += $step)
                        @if($displayMode != 'without')
                            <span class="dgc-degree-label">
                                @if($displayMode == 'all')
                                {{ $i }}
                                @elseif($displayMode == 'first-last' && (floatval($i) === floatval($min) || floatval($i) === floatval($max)))
                                {{ $i }}
                                @elseif($displayMode == 'first-middle-last' && (floatval($i) === floatval($min) || floatval($i) === floatval($max) || floatval($i) === floatval($min + $max) / 2))
                                {{ $i }}
                                @endif
                            </span>
                        @else
                            <span class="dgc-degree-mark">|</span>
                        @endif
                    @endfor
                    @endif
                </div>
            </div>
            {{-- Message de milieu --}}
            @if(!empty($message['middle']))
            <span class="dgc-label-m text-center">{{ $message['middle']}}</span>
            @endif
        </div>
        {{-- Message de fin --}}
        @if(!empty($message['last']))
        <span class="dgc-label-se mt-2">{{ $message['last']}}</span>
        @endif
    </div>
</div>