<script>
	let cards = [
		{
			"name": "La voix est libre",
			"description": "Une émission hebdomadaire de Picasoft sur la radio locale et associative compiégnoise Graf'hit sur 94.9FM ou en ligne sur http://grafhit.net. Ces podcasts sont disponibles sous licence CC BY https://creativecommons.org/licenses/by/3.0/fr/.",
			"image": "https://podcast.picasoft.net/media/podcasts/la_voix_est_libre/cover_thumbnail.webp",
			"url": "https://podcast.picasoft.net/@la_voix_est_libre"
		},
		{
			"name": "Silence, ça transitionne !",
			"description": "Ce projet mené par des étudiant.es de Compiègne en Transition - une association étudiante et Compiègnoise rattachée à l'UTC - a pour vocation de parler de thématiques environnementales, discuter de nos ressentis face à ces enjeux, partager des retours d'expérience et tout simplement papoter de sujets qui nous tiennent à cœur !",
			"image": "https://podcast.picasoft.net/media/podcasts/silence_transition/cover_thumbnail.webp",
			"url": "https://podcast.picasoft.net/@silence_transition"
		}
	];
	
	function init(tab) {
		return tab[0];
	}
	
	let card = init(cards);
	
	function randomize() {
		let index = Math.floor(Math.random()*cards.length);
		if (cards[index] == card)
			card = cards[(index+1)%cards.length];
		else
			card = cards[index];
	}
</script>

<div class="card">
	<div class="card-title">
		{card.name}
	</div>
	<div class="card-main-content">
		<img src={card.image} alt="Icône de l'item aléatoire" />
		<p>
			{card.description}
		</p>
	</div>
	<div class="card-button">
		<a href={card.url}>Y aller !</a>
	</div>
</div>

<div class="randomize-button" on:click={randomize}>
	Un autre !
</div>

<style>
	.card {
		margin: auto;
		width: 50%;
		padding: 14px;
		background-color: #ECEFF1;
		border: dotted #90A4AE 1px;
		border-radius: 15px;
	}

	.card-title {
		text-align: center;
		font-size: 3em;
	}

	.card-main-content {
		display: flex;
		align-items: center;
	}

	.card-main-content img {
		width: 20%;
		height: auto;
		margin: 5px;
	}

	.card-main-content p {
		width: 80%;
	}

	.card-button {
		width: 25%;
		padding: 10px;
		margin: auto;
		text-align: center;
		background-color: #203590;
		border-radius: 10px;
		transition: 0.2s;
	}

	.card-button:hover {
		background-color: #3550A7;
	}

	.card-button a {
		color: white;
	}

	.randomize-button {
		background-color: #4A148C;
		color: white;
		text-align: center;
		border-radius: 10px;
		transition: 0.2s;
		margin: auto;
		padding: 15px;
		width: 25%;
		margin-top: 20px;
		cursor: pointer;
	}

	.randomize-button:hover {
		background-color: #6A1B9A;
	}
</style>
