<template>
    <BaseLayout hide-search>
        <main class="content">
            <div class="container-fluid p-0">
                <h1 class="h3 mb-3">Search Inventories</h1>
                <div class="row">
                    <div class="col-md-3">
                        <div class="card">
                            <SearchBox @change=""/>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Results for "{{ query }}"</h5>
                            </div>
                            <div class="card-body">
                                <table class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th style="width:40%;">Name</th>
                                        <th style="width:25%">Owner</th>
                                        <th class="d-none d-md-table-cell" style="width:25%">Amount</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="item in search_results" :key="item.id">
                                        <td>
                                            <router-link :to="`/inventory/${item.id}`">{{ item.name }}</router-link>
                                        </td>
                                        <td>{{ item.owner }}</td>
                                        <td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td>
                                        <td class="table-action">
                                            <!--<router-link :to="`/inventory/${item.id}/edit`">
                                                <b-icon-pencil-square></b-icon-pencil-square>
                                            </router-link>
                                            <a :href="`/inventory/${item.id}/delete`"
                                               @click.prevent="deleteInventoryItem(item)">
                                                <b-icon-trash></b-icon-trash>
                                            </a>-->
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </BaseLayout>
</template>

<script>
import {mapActions} from 'vuex';
import * as BIcons from "bootstrap-icons-vue";
import BaseLayout from "@/components/BaseLayout.vue";
import SearchBox from "@/components/SearchBox.vue";

export default {
    name: 'Search',
    components: {
        SearchBox,
        ...BIcons,
        BaseLayout
    },
    props: {
        query: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            search_results: [],
        }
    },
    methods: {
        ...mapActions(['fetchSearchResults']),
    },
    async mounted() {
        this.fetchSearchResults({query: this.query}).then((results) => {
            this.search_results = results;
        });
    }
}
</script>

<style scoped>

</style>