@model IEnumerable<ParcelWeb.Core.Domain.LinkParcelService>

<style>
    .list-group-item:first-child {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }

    .list-group {
        display: inline-block;
        width: 100%;
        border: 1px solid #baccd6;
        border-radius: 0px;
        transition: border 1s;
    }

        .list-group:hover {
            border: 1px solid #15537d;
        }

    .list-group-item {
        margin: auto;
        display: block;
        width: 100%;
    }

        .list-group-item.active,
        .list-group-item.active:hover,
        .list-group-item.active:focus {
            z-index: 2;
            color: #15537d;
            background-color: transparent;
            border: 1px solid #C5DFEF;
        }

    .blue-bg {
        background: #C5DFEF;
        /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #C5DFEF, #C5DFEF);
        /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #C5DFEF, #C5DFEF);
        /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .white-bg {
        padding: 15px 15px 15px 15px;
        color: #15537d;
        border-top: 1px solid #baccd6;
    }

        .white-bg h1, h2, h3, h4, h5, p {
            font-family: 'Trebuchet MS','Arial',sans-serif;
        }
</style>
@if (@Model != null && @Model.Count() != 0)
{
    <div class="row">
        @foreach (var item in Model)
        {
            <div class="col-md-6" style="margin-top:10px">
                <div class="list-group">
                    <a href="#" class="list-group-item active blue-bg">
                        <div class="row">
                            <div class="col-md-5">
                                <img src="@item.DeliveryService.logo" alt="Image" class="img-fluid img-thumbnail" style="max-height:55px;max-width:115px" />
                            </div>
                            <div class="col-md-7">
                                <h4 style="margin-bottom:0px">
                                    @item.DeliveryService.Name 
                                </h4>
                                <p>@item.DeliveryService.Description</p>
                            </div>
                        </div>
                    </a>
                    <div class="white-bg">
                        <h3>Rs. @item.Charges</h3>
                        <p>Chargeable Weight: @item.MaxWeight kg</p>
                        <a href="@Url.Action("Register","Auth")" class="btn btn-primary">Book Now</a>
                    </div>
                </div>
            </div>
        }
    </div>
    
}
else
{
    <div class="row">
        <div class="col-md-8">
            <h3>No service found...</h3>
        </div>
       
    </div>
}