<div class="container">

    <!-- todo: implement category selector -->

        <nav class="nav-bar nav-bar--center nav-bar--air-bottom">
            <a class="nav-link nav-link--black nav-link--active" href="">All</a>
            <a class="nav-link nav-link--black" href="">Clothing</a>
            <a class="nav-link nav-link--black" href="">Instruments</a>
            <a class="nav-link nav-link--black" href="">Accessories</a>
            <a class="nav-link nav-link--black" href="">Other</a>
        </nav>

    <div class="product-grid">
        @if (Model.Content.FeaturedProducts != null)
        {
            foreach (Product product in Model.Content.FeaturedProducts)
            {
                <a href="@product.Url" class="product-grid__item" style="background-image: url('@product.Photos.FirstOrDefault().Url')">
                    <div class="product-grid__item__overlay">
                        <div class="product-grid__item__name">@product.ProductName</div>
                        <div class="product-grid__item__price">@Model.Content.DefaultCurrency @product.Price.ToString("F")</div>
                    </div>
                </a>
            }
        }
    </div>
</div>