@extends('sidebar-template')


@section('content')

    <div id="bb-items">
        @include('blocks.banners')
        @include('blocks.buttons')
    </div>

    <h1 class="page-title">
        futuREuse directory
        <span></span>
    </h1>
    <h2 id="category-desc" class="page-description">
        The UK & Ireland 500 is a focused edit of the Salvo directory which has been running for thirty years. Part of the FCRBE, which stands for - Facilitating the circulation of reclaimed building elements, and what Salvo has branded futuREuse. Currently only 1% of building materials are reused following their first application, so the project aims to highlight businesses and regular stocks and increase reuse of reclaimed building materials.
    </h2>

    <div class="row">
        <div class="col-md-12">
            @if(isAdmin())
                <div id="stats-container" style="margin-bottom:16px"></div>
            @endif
        </div>
        <div id="search-hits" data-category="{{$catData->api_name}}" data-fcrbe="true" data-title="{{$catData->name}}"></div>
    </div>

@stop

@section('sidebar')

    <div id="clear-all" class="sidebar-box-algolia no-arrows"></div>
    <div id="categories-search" style="display: none;" class="sidebar-box-algolia no-arrows"></div>
    <h3 class="instantsearch-header">Find</h3>
    <div id="fcrbe-categories-search" class="sidebar-box-algolia no-arrows"></div>
    <div id="fcrbe-filters-wrapper">
        <div id="fcrbe-filters-search" class="sidebar-box-algolia no-arrows"></div>
    </div>
    <h3 class="instantsearch-header">Specifications</h3>
    <div id="fcrbe-specifications-search" class="sidebar-box-algolia no-arrows"></div>

{{--    <div class="sidebar-box-algolia no-arrows">--}}
{{--        <input type="search" id="address-input" placeholder="Filter by your Location"/>--}}
{{--        <div class="btn-group btn-group-toggle float-right metric-switch" data-toggle="buttons">--}}
{{--            <label class="btn btn-sm active">--}}
{{--                <input type="radio" name="metricType" value="mile" checked> Mile--}}
{{--            </label>--}}
{{--            <label class="btn btn-sm" id="km">--}}
{{--                <input type="radio" name="metricType" value="km"> Kilometer--}}
{{--            </label>--}}
{{--        </div>--}}
{{--    </div>--}}

    <h3 class="instantsearch-header">Regions</h3>
    <div id="locations-search" class="sidebar-box-algolia"></div>
@stop

@section('js_functions')
    my_main.Listings();
@stop


@section('algolia-layouts')
    <script>
        var wishlistItems = {!! json_encode(App\Helpers\WishlistHelper::getInstance()->getWishlistItemsIds()) !!};
        var algoliaOptionsFromView = {!! $options !!};
        var loadBBFromView = true;
    </script>

    <script type="text/html" id="hit-template">

        <div class="col-md-4 col-sm-4 col-xs-6">

            <div class="item-box item-box--@{{ad_category}} @{{#helpers.isEnhanced}}@{{/helpers.isEnhanced}}">
                <a href="@{{#helpers.formatURL}}@{{/helpers.formatURL}}">
                    <div class="item-box-image">
                        <img src="@{{picture}}" alt="@{{title}}">
                    </div>
                    <h4 class="item-title"><span>@{{title}}</span></h4>
                    <div class="item-price"><span class="item-price-wrapper">@{{price}} @{{^price}}<span style="font-size:0px;line-height:15px">No Price</span>@{{/price}}</span> @{{#helpers.formatWishlist}}@{{/helpers.formatWishlist}}</div>
                </a>
                <span class="divider-inv"></span>
                @{{#helpers.formatBusiness}}@{{/helpers.formatBusiness}}
                @{{#helpers.formatCategory}}@{{/helpers.formatCategory}}
                <span class="divider-inv"></span>
                @{{#helpers.formatSubCategory}}@{{/helpers.formatSubCategory}}
                <span class="divider-inv"></span>
                <div class="item-decription">
                    <ul>
                        @{{#helpers.formatLocationTags}}@{{/helpers.formatLocationTags}}
                    </ul>
                </div>
            </div>
        </div>

    </script>
@stop