<script lang="ts">
	import axios from 'axios';
	export default {
		data() {
			return {
				categories:[],
				categorySessions:[]
			}
		},
		methods: {
			change(event){
				axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'show-category/'+event.target.value).then((response)=>{
					this.categorySessions = response.data;
				})
			}
		},
		mounted() {
			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories').then((response)=>{
				this.categories = response.data
			})
		}
	}
</script>

<template>
	<h2>Show Category</h2>
	<select @change="change">
		<option v-for="category in categories" v-bind:value="category.id">
			{{category.id}}.
			{{category.instrument}}
			:
			{{category.category}}
		</option>
	</select>
	<table>
		<thead>
			<tr>
				<th>id</th>
			<th>description</th>
			<th>seconds</th>
			<th>comments</th>
			<th>created at</th>
			<th>category id</th>
			<th>category</th>
			<th>instrument</th>
		</tr>
		</thead>
		<tbody>
			<tr v-for="session in categorySessions">
				<td>{{session.id}}</td>
				<td>{{session.description}}</td>
				<td>{{session.seconds}}</td>
				<td>{{session.comments}}</td>
				<td>{{session.created_at}}</td>
				<td>{{session.category_id}}</td>
				<td>{{session.category}}</td>
				<td>{{session.instrument}}</td>
			</tr>
		</tbody>
	</table>
</template>

<style scoped>
</style>
