@inherits UmbracoTemplatePage<Products>
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
    Layout = "Master.cshtml";
}
@Html.Partial("~/Views/Partials/SectionHeader.cshtml")

<section class="section">

    <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>

</section>