<script>
	import ScoreSlider from './ScoreSlider.svelte';
</script>

<div class="mx-auto lg:w-1/2 space-y-4 bg-gray-200 p-8">
	<h1 class="text-2xl font-bold text-center">Joku maa</h1>
	<img
		src="https://upload.wikimedia.org/wikipedia/commons/8/81/Metallica_March_2024.jpg"
		alt="Artist"
		class="rounded-lg mx-auto drop-shadow-md border-2 border-gray-300"
	/>
	<div class="text-center">
		<p>Metallica</p>
		<p>-</p>
		<p>Unforgiven</p>
	</div>
	<div class="space-y-4">
		<section class="space-y-2">
			<input
				type="checkbox"
				name="kuvaus_toggle"
				id="kuvaus_toggle"
				class="kuvaus_toggle"
				checked
			/>
			<label for="kuvaus_toggle">Kuvaus</label>
			<div class="kuvaus space-y-2">
				<p>
					Kappale kertoo yksilön elämänkaaresta, jossa hän kokee jatkuvaa alistamista ja
					epäoikeudenmukaisuutta. Kappale kuvaa lapsuutta, jossa hánet pakotetaan muiden sääntöihin,
					ja aikuisuutta, jossa hän yrittää turhaan miellyttää muita. Lopulta hänestä tulee katkera
					ja väsynyt vanhus, joka katsoo elämänkaaresta katumuksen täyttämiän. Kappaleen keskiössä
					on taistelu oman vapauden ja identiteetin puolesta sekä pettymysten ja katkeruuden
					tunteet.
				</p>
				<div>
					<span class="review-tag">Identiteetti ja kamppailu</span>
					<span class="review-tag">sopeutuminen vs. vapaus</span>
					<span class="review-tag">katumus ja katkeruus</span>
					<span class="review-tag">tunteellinen kipu</span>
					<span class="review-tag">elämänkaari</span>
					<span class="review-tag">itsereflektio</span>
					<span class="review-tag">sisäinen konflikti.</span>
				</div>
			</div>
		</section>
		<section>
			<input type="checkbox" name="sanat_toggle" id="sanat_toggle" class="sanat_toggle" />
			<label for="sanat_toggle">Sanat</label>

			<div class="sanat space-y-4 text-center">
				<p>
					[Verse 1]<br />
					New blood joins this earth<br />
					And quickly he's subdued<br />
					Through constant pained disgrace<br />
					The young boy learns their rules<br />
					With time, the child draws in<br />
					This whipping boy done wrong<br />
					Deprived of all his thoughts<br />
					The young man struggles on and on, he's known<br />
					Ooh, a vow onto his own, that never from this day<br />
					His will they'll take away, yeah
				</p>
				<p>
					[Chorus]<br />
					What I've felt, what I've known<br />
					Never shined through in what I've shown<br />
					Never be, never see<br />
					Won't see what might have been<br />
					What I've felt, what I've known<br />
					Never shined through in what I've shown<br />
					Never free, never me<br />
					So I dub thee unforgiven
				</p>
				<p>
					[Verse 2]<br />
					They dedicate their lives<br />
					To running all of his<br />
					He tries to please them all<br />
					This bitter man he is<br />
					Throughout his life the same<br />
					He's battled constantly<br />
					This fight he cannot win<br />
					A tired man they see no longer cares<br />
					The old man then prepares to die regretfully<br />
					That old man here is me, yeah
				</p>
				<p>[Chorus]</p>
				<p>[Guitar Solo]</p>
				<p>[Chorus]</p>
				<p>
					[Outro]<br />
					Never free, never me<br />
					So I dub thee unforgiven<br />
					You labeled me, I'll label you<br />
					So I dub thee unforgiven<br />
					Never free, never me<br />
					So I dub thee unforgiven<br />
					You labeled me, I'll label you<br />
					So I dub thee unforgiven<br />
					Never free, never me<br />
					So I dub thee unforgiven
				</p>
			</div>
		</section>
	</div>
	<div class="space-y-8">
		<ScoreSlider title="Kappale" currentRating={50} />
		<ScoreSlider title="Asuste" currentRating={50} />
		<ScoreSlider title="Lava show" currentRating={50} />
		<input type="submit" value="Tallenna" class="btn btn-primary" />
		<button class="btn">Peruuta</button>
	</div>
</div>

<style>
	.sanat,
	.kuvaus {
		display: none;
	}

	.sanat_toggle:checked ~ .sanat {
		display: block;
	}

	.kuvaus_toggle:checked ~ .kuvaus {
		display: block;
	}
</style>
