Vue.options.delimiters = ['${', '}'];

window.search = {
    selected : 'all',
    salePrices : [
        {
            name: 'any price',
            minValue: 0,
            maxValue: 99999999999,
            selected: true
        },
        {
            name: '£50k - 200k',
            minValue: 50000,
            maxValue: 200000,
            selected: false
        },
        {
            name: '£200k - £400k',
            minValue: 200000,
            maxValue: 400000,
            selected: false
        },
        {
            name: '£600k - £800k',
            minValue: 600000,
            maxValue: 800000,
            selected: false
        },
        {
            name: '£800k +',
            minValue: 800000,
            maxValue: 9999999999999,
            selected: false
        }
    ]
}

var filter = Vue.component('property-filter', {
    template: `
        <div class="filter-container">
            <div class="type-sort">
                <a href="" @click.prevent="search.selected = 'sales'" class='uk-button uk-button-default uk-button-large purple-btn main-btn'
                    v-bind:class="{ selected : search.selected == 'sales' }"
                >sales</a>
                <a href="" @click.prevent="search.selected='lettings'" class='uk-button uk-button-default uk-button-large purple-btn main-btn'
                    v-bind:class="{ selected : search.selected == 'lettings' }"
                >lettings</a>
                <a href="" @click.prevent="search.selected='openViewings'" class='uk-button uk-button-default uk-button-large purple-btn main-btn'
                    v-bind:class="{ selected : search.selected == 'openViewings' }"
                >open viewings</a>
            </div>
            <div class="sales-price-sort" v-if="search.selected == 'sales'">
                <div v-for="(value, key) in search.salePrices" :key="key">
                    <a class="uk-button uk-button-default uk-button-large purple-btn">${value.name}</a>
                </div>
            </div>
        </div>
    `,
    methods: {

    },
    data: function(){
        return {
            key: '',
            search: window.search
        }
    }
});