@props(['color', 'amountTitle', 'countTitle'=> "", 'amountId'=> "", "countId"=> "", "hideSecondaryOption"=> false, "value"=> "loading..."])
   
    <div class="col-xl-4">
        <div class="card card-{{ $color }} text-white">
            <div class="card-block">
                <div class="row align-items-center">
                    <div class="col-8">
                        <p style="font-size:16px;" class="mb-3">{{ $amountTitle }}<br/>
                            <sub style="font-size:18px; font-weight:bold;" class="mb-0" id='{{ $amountId }}'>{{ $value }} </sub>
                        </p>
                        @if (!$hideSecondaryOption)
                            <p  style="font-size:16px;"  class="mb-0">
                            {{ $countTitle }} <br/>
                             <sub style="font-size:18px; font-weight:bold;" class="mb-0" id='{{ $countId }}'>{{ $value }} </sub>
                            </p>
                        @endif
                    </div>
                    <div class="col-4 text-right py-5">
                        <i class="fas fa-cube f-30"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>