@foreach($featuredPackages as $package)
    <div class="col-md-3">
        <div class="card card-type-pricing text-center" itemscope itemtype="http://schema.org/Product">
            @if($hasDiscount = $package->discount > 0)
                <div class="ribbon" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                  <span>
                    {{ $package->discount }}
                      % off
                  </span>
                </div>
            @endif
            <div class="card-body style-gray">
                <h2 class="text-light">{{ $package->service->name }}</h2>
                <p class="text-lg text-default-bright" itemprop="name"><em>{{ ucwords($package->name) }}</em>
                </p>
                <div class="price">
                    <div>Starting at</div>
                    <h2>
                        <span class="text-xs" itemprop="priceCurrency">{{ get_local_currency_prefix() }}</span>
                        <span class="text-lg" itemprop="price">{{ get_local_currency($package->price) }}</span>
                    </h2>
                    <span class="text-lg">{{ $package->term_type == 'YEAR' ? '/yr' : '/mo' }}</span>
                </div>
                <br/>
            </div>
            <div class="card-body no-padding" itemprop="description">
                <ul class="list-unstyled">
                    @foreach($package->getComponents() as $key => $component)
                        <li class="{{ $loop->index > 2 ? 'hidden' : '' }}">{{ $component.' '.strtoupper($key) }}</li>
                    @endforeach
                    <li>24/7 Customer Support</li>
                </ul>
            </div>
            <div class="card-body">
                <a class="btn btn-raised ink-reaction btn-accent"
                   href="{{ route('service.package.order', [$package->service, $package->slug]) }}">Get quote
                </a>
            </div>
        </div>
    </div>
@endforeach