<div class="content">

    <div class="filter">

        <div class="fields">

            <div
                class="dropdown dropdown--country -fullWidth"
                style="display:none !important;"
                data-expander=""
                data-expander-always="true">

                <ul class="dropdown__container">

                    ## <li class="-activated -placeholder #if (false)-activated#end #if (false)-placeholder#end #if (false)-empty#end" data-value=""><span>$translations[$locale].filter.country</span></li>

                    #foreach ($country in $countries)

                        <li
                            class="#if ($country.value == $locale)-activated#end #if (false)-empty#end"
                            data-value="$country.value">
                            <span>$country.name</span></li>

                    #end

                </ul>

                <span class="arrow">
                    <i class="fa fa-chevron-down"></i>
                </span>

                <ul class="foldout"></ul>

            </div>

            #if ($regions)
                <div
                    class="dropdown dropdown--region -fullWidth -disabled"
                    data-expander=""
                    data-expander-always="true">

                    <ul class="dropdown__container">

                        <li
                            class="-activated -placeholder #if (false)-activated#end #if (false)-placeholder#end #if (false)-empty#end"
                            data-value="">
                            <span>$translations[$locale].filter.region</span></li>

                        #foreach ($region in $regions)

                            <li
                                class="#if ($option.placeholder)-placeholder#end #if (false)-empty#end"
                                data-value="$region.value">
                                <span>$region.name</span></li>

                        #end

                    </ul>

                    <span class="arrow">
                        <i class="fa fa-chevron-down"></i>
                    </span>

                    <ul class="foldout"></ul>

                </div>
            #end

            <div class="filterSearch">

                <input name="query" placeholder="$translations[$locale].searchField.placeholder"/>

                <a href="#">
                    <i class="fa fa-search"></i>
                </a>

            </div>

        </div>

        <div class="alphabetFilter">

            <ul>
                <h4>
                    $translations[$locale].filter.byletter
                </h4>
                #foreach ($letter in $letters)
                    <li class="-active">$letter</li>
                #end
            </ul>

        </div>

    </div>

    <div class="results" data-directions-translation="$translations[$locale].contact.directions">

        <ul class="flexboxGrid">

            #foreach ($asp in $asps)
                #if($asp.country == $locale || ($locale == 'en_AU' && $asp.country == 'en_NZ'))
                    <li
                        class="partner"
                        data-start-letter="$asp.startLetter"
                        data-id="$asp.id"
                        data-lat="$asp.location.latitude"
                        data-lng="$asp.location.longitude">

                        <div class="main">
                            <h3>
                                $asp.name
                            </h3>
                            <p>
                                $asp.address
                                <br/>
                                $asp.city
                                <br/>
                                $translations[$locale].countries[$asp.country]
                            </p>

                            <div class="divider"></div>

                            <div class="contact">

                                #if ($asp.phone)
                                    <span class="phone">
                                        <i class="fa fa-phone"></i>
                                        $asp.phone</span>
                                #end
                                #if ($asp.email)
                                    <a href="mailto:$asp.email">
                                        <span class="email">
                                            <i class="fa fa-envelope"></i>
                                            $asp.email</span></a>
                                #end
                                #if ($asp.website)
                                    <a href="$asp.website" target="_blank">
                                        <span class="email">
                                            <i class="fa fa-home"></i>$asp.website</span></a>
                                #end
                                #if ($asp.field1Text)
                                    <span class="extraField">
                                        #if ($asp.field1Icon)<i class="fa fa-$asp.field1Icon"></i>#end$asp.field1Text</span>
                                #end
                                #if ($asp.field2Text)
                                    <span class="extraField">
                                        #if ($asp.field2Icon)<i class="fa fa-$asp.field2Icon"></i>#end$asp.field2Text</span>
                                #end

                            </div>

                            <div class="divider"></div>

                        </div>

                        <div class="sub">

                            <a
                                href="https://www.google.com/maps/dir/Current+Location/${asp.location.latitude},${asp.location.longitude}"
                                target="_blank"
                                class="directions">
                                <i class="fa fa-map"></i>
                                $translations[$locale].contact.directions</a>

                            <div class="external">

                                #if ($asp.infoContent)
                                    <a href="#">
                                        <i class="fa fa-info"></i>
                                    </a>
                                #end
                                #if ($asp.website)
                                    <a href="$asp.website" target="_blank">
                                        <i class="fa fa-external-link"></i>
                                    </a>
                                #end
                            </div>

                        </div>

                    </li>
                #end
            #end

        </ul>

    </div>

</div>