{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<script>
    window._toubizBrochuresLabels = {
        salutation: '<f:translate id="salutation" source="Models/Order"/>',
        first_name: '<f:translate id="first_name" source="Models/Order"/>',
        last_name: '<f:translate id="last_name" source="Models/Order"/>',
        street_number: '<f:translate id="street_number" source="Models/Order"/>',
        street: '<f:translate id="street" source="Models/Order"/>',
        zip: '<f:translate id="zip" source="Models/Order"/>',
        city: '<f:translate id="city" source="Models/Order"/>',
        country: '<f:translate id="country" source="Models/Order"/>',
        email: '<f:translate id="email" source="Models/Order"/>',
        referred_by: '<f:translate id="referred_by" source="Models/Order"/>',
    };
</script>


<f:render partial="Icons"/>

<div data-vue="toubiz-brochures" data-node="{node.path}" data-layout="{layout}">
    <h1 v-if="loading">LOADING YO</h1>

    <h1>CATEGORIES</h1>
    <ul>
        <li v-for="(label, id) in filterConfiguration.categories">
            <label>
                <input type="checkbox" v-model="activeFilters.categories" :value="id">
                {{ label }}
            </label>
        </li>
    </ul>
    <h1>TARGETS</h1>
    <ul>
        <li v-for="(label, id) in filterConfiguration.targets">
            <label>
                <input type="checkbox" v-model="activeFilters.targets" :value="id">
                {{ label }}
            </label>
        </li>
    </ul>

    <brochure-list :items="filteredBrochures" :layout="layout" v-model="order.brochures"></brochure-list>
    <div class="tb-brochure-form__button is-hidden" data-toubiz-brochure-button>
        <button type="button" @click="showForm = true" class="c-button c-button--secondary c-button--pill">
            <f:translate id="send" source="Views/Order"/>
        </button>
    </div>
    <order-form v-show="showForm" :order="order" :node="node" @close="closeForm" ></order-form>
    <order-status v-show="statusModal" :statusresult="statusResult" @showStatusModal="openModal"></order-status>
</div>

<script src="{vh:uri.resource(path: 'Scripts/index.bundle.js', package: 'Newland.Toubiz.Brochures.Neos')}"></script>
<!--TODO add Loaders, Translations and validations to components, markup for filters-->
<style>
    .modal-backdrop {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal {
        background: #FFFFFF;
        box-shadow: 2px 2px 20px 1px;
        overflow-x: auto;
        display: flex;
        flex-direction: column;
    }
</style>