@php
    $layout = $encodingRowLayout ?? 'between';
@endphp
<div class="d-flex @if($layout === 'stack') flex-column flex-md-row gap-50 @else justify-content-between @endif flex-wrap">
    <small class="text-primary text-uppercase">
        {{ __('locale.labels.remaining') }} : <span id="{{ $remainingId ?? 'remaining' }}">{{ $remainingDefault ?? '160' }}</span>
        ( <span class="text-success" id="{{ $charCountId ?? 'charCount' }}">0</span>&nbsp;{{ __('locale.labels.characters') }}
        )
    </small>
    <small class="text-primary text-uppercase">
        {{ __('locale.labels.message') }}(s) : <span id="{{ $messagesId ?? 'messages' }}">1</span>
        ({{ __('locale.labels.encoding') }} : <span class="text-success" id="{{ $encodingId ?? 'encoding' }}">GSM_7BIT</span>)
    </small>
</div>