<script>
 import {
     Alert,
     Card,
     CardBody,
     CardTitle,
     Col,
     Icon,
     Row,
 } from 'sveltestrap';

 export { className as class };
 export let theme = {};
 export let exercice = null;
 let className = '';
</script>

<div class="theme-card h-100">
    <Card
        class="text-light h-100 rounded-3 niceborder {className}"
        color="dark"
        on:click
    >
        {#if theme.image}
            <div class="card-img-top" style="background-image: url({ theme.image.substr(0, theme.image.length-3) }thumb.jpg)"></div>
        {/if}
        <CardBody class="text-indent">
            <CardTitle class="fw-bolder">
	        {#if exercice}{exercice.title}{:else}{theme.name}{/if}
            </CardTitle>
            <p class="card-text text-justify">{#if exercice}{@html exercice.headline}{:else}{@html theme.headline}{/if}</p>
        </CardBody>
    </Card>
</div>

<style>
 .theme-card {
     cursor: pointer;
     transition: transform 250ms;
 }
 .theme-card:hover {
     transform: scale(1.07);
 }

 .card-img-top {
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
 }
 .theme-card .card-img-top {
     height: 10rem;
 }

 p {
     color: #ccc;
 }
</style>
