@props(['type', 'packages', 'postcode'])


    <div class="row no-gutters-md no-gutters-sm" id="packages-{{ $type }}">
        @foreach($packages as $package)
            @if($package['type'] != $type) @continue @endif
            <div class="col-md-4 col-12 mb-4">
                <ul class="list-group" style="border: 1px solid #5f8943;">
                    <li class="list-group-item h" style="background: #cdf4d2;">
                        <span style="font-weight: bold; font-size: 1.5rem;">
                            {!! $package->title !!}
                        </span>
                    </li>
                    <li class="list-group-item">
                        <strong><i class="fas fa-wifi mr-2"></i>Speed</strong><br />
                        Up to {!! $package->getDownSpeedUnit() !!} download<br />
                        Up to {!! $package->getUpSpeedUnit() !!} upload<br />
                        <span class="link explain-package"
                            data-package_id="{!! $package->id !!}">
                            <i class="fas fa-info-circle mr-2"></i>Explanation - click here
                        </span>
                    </li>
                    <li class="list-group-item">{!! $package->length !!}</li>
                    <li class="list-group-item">
                        <div class="row">
                            <div class="col-6 text-center">
                                <span class="badge badge-pill badge-primary py-2 h" style="font-size: 1.3rem;">
                                    {!! $package->priceMonthly() !!}
                                </span>
                            </div>
                            <div class="col-6">
                                <button type="button" class="btn btn-primary btn-block select-package"
                                    data-package_id="{!! $package->id !!}">
                                    Select
                                </button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        @endforeach
    </div>