@model OneMRKT.Module.Social.ViewModels.AgentProductsViewModel

<div id="Storefront" class="tabcontent">
    <!-- TODO: SG - Add resellPrice/wholesale tab as well. Needs JS tool to display one or the other-->
    @{
        if (!Model.agentProduct.Any())
        {
            <div class="col-md-4">
                <!--Bootstrap Card
                //Create Transparent image "Buy Products to Sell here."
                    <!--Card-->
                <div class="card">
                    <!--Card image-->
                    <div class="view overlay hm-white-slight z-depth-1">
                        <img src="~/images/bad-profile-pic-2.jpeg" class="img-responsive" alt=""/>  <!--class="img-responsive" ??-->
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>
                    <!--/.Card image-->
                    <!--Card content-->
                    <div class="card-block text-xs-center">
                        <!--Category & Title-->
                        <h5>SampleCategory</h5>
                        <h4 class="card-title"><strong><a href="">No Products Yet</a></strong></h4>
                        <!--Rating-->
                        <ul class="rating">
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star-o"></i></li>
                        </ul>
                        <!--Description-->
                        <p class="card-text">
                            Sample Description Goes Here
                        </p>
                        <!--Card footer-->
                        <div class="card-footer">
                            <span class="left">49$ <span class="discount">199$</span></span>
                            <span class="right">
                                <a data-toggle="tooltip" data-placement="top" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fa fa-share-alt"></i></a>
                                <a class="" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><i class="fa fa-heart"></i></a>
                            </span>
                        </div>
                    </div>
                    <!--/.Card content-->
                </div>
                <!--/.Card-->
            </div>
            <div class="col-md-4">
                <!--Card-->
                <div class="card">

                    <!--Card image-->
                    <div class="view overlay hm-white-slight z-depth-1">
                        <img src="http://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/belt.jpg" class="img-fluid" alt="">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>
                    <!--/.Card image-->
                    <!--Card content-->
                    <div class="card-block text-xs-center">
                        <!--Category & Title-->
                        <h5>Category</h5>
                        <h4 class="card-title"><strong><a href="">Product name</a></strong></h4>
                        <!--Rating-->
                        <ul class="rating">
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star"></i></li>
                            <li><i class="fa fa-star-o"></i></li>
                        </ul>

                        <!--Description-->
                        <p class="card-text">
                            Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
                        </p>

                        <!--Card footer-->
                        <div class="card-footer">
                            <span class="left">49$</span>
                            <span class="right">
                                <a data-toggle="tooltip" data-placement="top" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                <a data-toggle="tooltip" data-placement="top" title="Share"><i class="fa fa-share-alt"></i></a>
                                <a class="" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><i class="fa fa-heart"></i></a>
                            </span>
                        </div>

                    </div>
                    <!--/.Card content-->

                </div>
                <!--/.Card-->
            </div>
        }
    }
</div>