<template>
	<div>
		<section-header>
			<h4>{{ __('Selling') }}</h4>
		</section-header>
		<div class="row" v-if="items && items.length">
			<div class="col-md-7"
				style="margin-bottom: 30px;"
				v-for="item of items"
				:key="item.name"
			>
				<item-list-card
					:item="item"
				>
					<div slot="subtitle">
						<span class="text-muted">{{ __('{0} conversations', [item.received_messages.length]) }}</span>
					</div>
				</item-list-card>
				<div class="hub-list-item" v-for="(message, index) in item.received_messages" :key="index"
					v-route="'marketplace/selling/' + message.buyer + '/' + item.name"
				>
					<div class="hub-list-left">
						<div class="hub-list-body">
							<div class="hub-list-title">
								{{ message.buyer_name }}
							</div>
							<div class="hub-list-subtitle">
								{{ message.sender }}: {{ message.message | striphtml }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<empty-state v-else :message="__('This page keeps track of your items in which buyers have showed some interest.')" :centered="false" />
	</div>
</template>
<script>
import EmptyState from '../components/EmptyState.vue';
import SectionHeader from '../components/SectionHeader.vue';
import ItemListCard from '../components/ItemListCard.vue';

export default {
	components: {
		SectionHeader,
		ItemListCard,
		EmptyState
	},
	data() {
		return {
			items: null
		}
	},
	created() {
		this.get_items_for_messages()
			.then(items => {
				this.items = items;
			});
	},
	methods: {
		get_items_for_messages() {
			return hub.call('get_selling_items_for_messages');
		}
	}
}
</script>