<div class="search">
    <div class="search__header">
        <div class="sv-fluid-grid sv-grid-main -padding">
            <div class="sv-row">

                <h1 class="heading">
                $title #if ($query) $query #elseif ($tag) $tag #end
                </h1>

                <p>
                $numberOfHits #if ($result.payload.count) $result.payload.count #else 0 #end
                </p>

                #if ($tag)
                    <div class="tags">
                        <a href="#" class="tag js-tag-remove">$tag
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                #end

                <div class="searchInput">

                    <form method="GET">
                        #if ($tag)
                            <input type="hidden" name="tag" value="$tag"/>
                        #end
                        <input
                            type="text"
                            placeholder="$field"
                            name="q"
                            #if($query)="#if($query)"
                            value="$query"
                            #end="#end"/>
                        <button type="submit"></button>
                    </form>

                </div>
            </div>
        </div>
    </div>

    #if ($hasResults)

        <div class="navigationBar">
            <div class="sv-fluid-grid sv-grid-main -padding">
                <div class="sv-row">
                    <ul class="navigationBar__list">
                        #foreach ($facet in $facets)
                            #set ($facetItems = $result.payload.result.get($facet))
                            <li class="navigationBar__item" data-name="$facet">
                                <a href="#" class="navigationBar__link">$facet ($facetItems.length)</a>
                            </li>
                        #end
                    </ul>
                </div>
            </div>
        </div>

    #end

    <div class="search__result">
        <div class="sv-fluid-grid sv-grid-main -padding">
            <div class="sv-row">
                #foreach ($facet in $facets)

                    #set ($facetItems = $result.payload.result.get($facet))

                    <h2 class="subheading" data-name="$facet">
                        $facet ($facetItems.length)
                    </h2>

                    #foreach($facetItem in $facetItems)

                        #if ($facetItem.type == 'product')

                            #if ($velocityCount == 1)
                                <ul class="products flexboxGrid">
                                #end

                                #set ($product = $facetItem.data)

                                <li class="card -product product" data-id="$product.id">
                                    <a href="$product.uri" class="card__link">
                                        <figure
                                            class="card__figure"
                                            #if($product.image)style="background-image: url($product.image) !important"
                                            #end="#end"></figure>
                                        <div class="card__body">
                                            <h3>$product.name</h3>
                                            <p>$product.shortDescription</p>
                                        </div>
                                        <ul class="card__tags">
                                            #foreach ($marking in $product.marking)
                                                <li class="card__tag tag js-tag-search">$marking</li>
                                            #end
                                        </ul>
                                        <div class="card__footer">
                                            <span class="bookmark card__star">
                                                <i class="fa fa-star-o"></i>
                                            </span>
                                            <span class="card__more"><span>$ourproductInfo</span>
                                                <i class="fa fa-chevron-right"></i>
                                            </span>
                                        </div>
                                    </a>
                                </li>

                                #if ($velocityCount == $facetItems.length)
                                </ul>
                            #end

                        #end

                        #if ($facetItem.type == 'page')

                            #if ($velocityCount == 1)
                                <ul class="pages">
                                #end

                                <li>

                                    <a href="$facetItem.data.uri">

                                        <h3 class="subheading3">
                                            $facetItem.data.displayName
                                        </h3>

                                        #if ($facetItem.data.content)

                                            <p>
                                                $facetItem.data.content
                                            </p>

                                        #end

                                        <p class="breadcrumb">
                                            $facetItem.data.breadcrumb
                                        </p>

                                    </a>

                                </li>

                                #if ($velocityCount == $facetItems.length)
                                </ul>
                            #end

                        #end

                        #if ($facetItem.type == 'contact')

                            #if ($velocityCount == 1)
                                <div class="cards">
                                #end

                                <div class="staff__card">
                                    <a href="$facetItem.data.uri">
                                        <div class="staff__photo">
                                            <img src="$facetItem.data.image">
                                        </div>
                                    </a>

                                    <div class="staff__info">
                                        <a href="$facetItem.data.uri">
                                            <h4 class="sv-font-heading-4 staff__name">
                                                $facetItem.data.name
                                            </h4>
                                            <p class="staff__title">
                                                #foreach ($title in $facetItem.data.workTitle) $title #end
                                                </p>
                                                <p class="staff__station">
                                                    Stationering: #foreach ($stationing in $facetItem.data.stationering) $stationing #end
                                                </p>
                                            </a>

                                            #if ($facetItem.data.email)

                                                <a href="mailto:$facetItem.data.email" class="staff__email">
                                                    $facetItem.data.email
                                                </a>

                                            #end

                                            #if ($facetItem.data.phone)

                                                <p class="staff__phone">
                                                    $facetItem.data.phone
                                                </p>

                                            #end

                                            #if ($facetItem.data.mobile)

                                                <p class="staff__phone">
                                                    $facetItem.data.mobile
                                                </p>

                                            #end

                                        </div>

                                    </div>

                                    #if ($velocityCount == $facetItems.length)
                                    </div>
                                #end

                            #end

                        #end

                    #end 
                </div>
            </div>
        </div>
    </div>