@props(['package', 'active', 'isVoucher', 'pclass'])

<div class="package-option {{ ($active ? 'po-active' : '') }} {{ $pclass }}"
    id="package-{{$package->id}}">
    <div class="package-option-main">
        <input class="mr-2 package-option-radio" name="package_id" type="radio"
            value="{{$package->id}}" id="packageradio-{{$package->id}}"
            {{ ($active ? 'checked="checked"' : '') }} />
        <span style="font-weight: bold;">{{ $package->title }}</span>
        @if(!$package->isBespoke())
            {!! $package->priceMonthly() !!}
            <span style="font-weight: bold;">{{ $package->getDownSpeedUnit() }}</span>
        @endif
    </div>
    <div class="package-option-info">
        <div class="more-details">
        @if(!$package->isBespoke())
            <b>{!! $package->priceMonthly() !!}</b>
        @endif
            {!! $package->getDescription($isVoucher) !!}
        @if(!$package->isBespoke())
            <ul>
                <li>{!! $package->getDownSpeedUnit() !!} download and upload (average speed)</li>
                <li>{!! $package->length !!}</li>
                <li>{!! $package->getInstallationPrice($isVoucher) !!}</li>
                <li>{!! $package->getActivationPrice($isVoucher) !!}</li>
                @if($package->static_ip >= 0)
                <li>{!! $package->getStaticIpPrice($isVoucher) !!}</li>
                @endif
                @foreach($package->getFeatures() as $feature)
                    <li>{!! $feature !!}</li>
                @endforeach
            </ul>
        @endif
        </div>
        <span class="see-more">
            click for more details <i class="fa fa-chevron-down" aria-hidden="true"></i>
        </span>
    </div>
</div>