<script setup>
	import { onMounted, ref } from 'vue'

	const songs = ref([])

	onMounted(async ()=>{
		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'songs')
		songs.value = await response.json()
	})
	const copy = (title) => {
		navigator.clipboard.writeText(title);
	}
	const paste = (title) => {
		alert(title)
	}
</script>
<template>
	<h2>Songs</h2>
	<table>
		<thead>
			<tr>
				<th>id</th>
				<th>title</th>
				<th>notes</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="song in songs">
				<td>{{song.id}}</td>
				<td>
					{{song.title}}
					<button @click="copy(song.title)">Copy</button>
					<button @click="paste(song.title)">Paste</button>
				</td>
				<td>{{song.notes}}</td>
			</tr>
		</tbody>
	</table>
</template>
