<style>
    .ext-icon {
        color: rgba(0, 0, 0, 0.5);
        margin-left: 10px;
    }

    .installed {
        color: #00a65a;
        margin-right: 10px;
    }

    .uninstalled {
        color: #8c8c8c;
        margin-right: 10px;
    }

    .products {
        height: 503px;
        overflow-y: scroll;
    }
</style>
<div class="box box-default">
    <div class="box-header with-border">
        <h3 class="box-title">Available extensions</h3>

        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body products">
        <ul class="products-list product-list-in-box">

            @foreach($extensions as $extension)
                <li class="item">
                    <div class="product-img">
                        <i class="fa fa-{{$extension['icon']}} fa-2x ext-icon"></i>
                    </div>
                    <div class="product-info">
                        <a href="{{ $extension['link'] }}" target="_blank" class="product-title">
                            {{ $extension['name'] }}
                        </a>
                        @if($extension['installed'] == 0)
                            <span class="pull-right uninstalled"><i class="fa fa-check"></i></span>
                        @endif
                        @if($extension['installed'] == 1)
                            <span class="pull-right installed"><i class="fa fa-check"></i></span>
                        @endif
                    </div>
                </li>
        @endforeach

        <!-- /.item -->
        </ul>
    </div>
</div>

<script>
    $('.products').slimscroll({height: '503px', size: '3px'});
</script>
