
<recommended-products :variations="{{ variations }}"
                      :recommended-items="{{ items }}"
                      question-id="{{ question.id }}"
                      type="{{ type }}"
                      inline-template
>
    <div>
        <fieldset class="show">
            <template v-if="hasRecommended">
                <h3 v-if="type === 'recommend'">
                    Recommended products:
                </h3>
                <h3 v-else>
                    Exclude products:
                </h3>
                <div>
                    <table class="recommendedList">
                        <tr>
                            <th>Answer</th>
                            <th>Product / variation</th>
                        </tr>
                        <tr v-for="(items, answer) in recommended">
                            <td v-html="answer"></td>
                            <td>
                                <ul>
                                    <li v-for="(attributes, item_id, key) in items">
                                        <ul v-if="attributes.sizes">
                                            <hr v-if="key" style="margin:1em;" />
                                            <li v-for="sizeAttributes in attributes.sizes">
                                                <span
                                                    v-html="attributes.item_name + ' (' + sizeAttributes.size_name + ')'"
                                                ></span>
                                                <i class="fa fa-close red pointerCursor"
                                                   @click="removeItem(answer, item_id, sizeAttributes.size_id)"
                                                ></i>
                                            </li>
                                        </ul>
                                        <template v-else>
                                            <span v-html="attributes.item_name"></span>
                                            <i class="fa fa-close red pointerCursor"
                                               @click="removeItem(answer, item_id)"
                                            ></i>
                                        </template>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                    </table>
                </div>
            </template>
            <h3 v-if="type === 'recommend'">
                Add recommended product / size:
            </h3>
            <h3 v-else>
                Add <span class="red">EXCLUDED</span> product / size:
            </h3>
            <div class="row positionRelative">
                <label for="selectVariation">
                    Select answer
                </label>
                <select id="selectVariation"
                        v-model="selectedVariation"
                >
                    <option :value="null">--- Select answer ---</option>
                    <option v-for="variation in variations"
                            :value="variation"
                            v-html="variation"
                    >
                    </option>
                </select>
            </div>
            <div class="row positionRelative" v-if="showProductSearch">
                <label for="memberQuery">
                    Search Items
                </label>
                <input type="text"
                       name="id"
                       id="itemQuery"
                       value=""
                       v-model="itemQuery"
                       @keyup="searchItems"
                />
                <div class="searchResults" v-if="foundItems.length > 0">
                    <table class="manage-items">
                        <tr>
                            <th class="center">Product ID</th>
                            <th>Name</th>
                            <th>Size</th>
                            <th>Price</th>
                            <th>Stock</th>
                        </tr>
                        <tbody class="tabular">
                        <tr v-for="item in foundItems"
                            @click="selectItem(item)"
                            class="pointerCursor"
                        >
                            <td v-html="item.id"></td>
                            <td v-html="item.name"></td>
                            <td v-html="item.size"></td>
                            <td v-html="'&pound;' + (item.size ? item.size_price : item.price)"></td>
                            <td v-html="item.size ? item.size_stock : item.stock"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="clearItemSearch"
                     v-if="itemQuery.length > 0"
                >
                    <i class="fa fa-close red"
                       @click="clearItemSearch"
                    ></i>
                </div>
            </div>

        </fieldset>
        <fieldset>
            <div class="el success msg"
                 v-html="successMessage"
                 v-if="successMessage"
            ></div>
            <div class="buttonBlock">
                <input type="button"
                       class="button btn"
                       value="Save"
                       @click="saveRecommended"
                />
                <a href="/shop/admin/assessment/manage.question.php?{{ query }}"
                   class="button btn btn-grey saveAndAdd"
                >
                    Cancel
                </a>
            </div>
        </fieldset>
    </div>
</recommended-products>