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

 import { my } from '$lib/stores/my.js';
 import { max_solved } from '$lib/stores/themes.js';
 import { myThemes } from '$lib/stores/mythemes.js';

 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)"
                style:filter={theme.locked ? "grayscale(60%)":null}
            ></div>
        {/if}
        <CardBody class="text-indent">
            <CardTitle class="fw-bolder">
                {#if $my && $my.team_id}
                    <div class="float-end">
                        {#if theme.locked}
                            <Badge color="light">
                                <Icon name="lock-fill" />
                            </Badge>
                        {:else}
                            {#if $max_solved > 1 && theme.solved == $max_solved}
                                <Badge color="danger">
                                    <Icon name="heart-fill" />
                                </Badge>
                            {/if}
                            {#if theme.exercice_coeff_max > 1 || (exercice && exercice.curcoeff > 1)}
                                <Badge color="success">
                                    <Icon name="gift-fill" />
                                </Badge>
                            {/if}
                        {/if}
                        {#if exercice && $my && $my.exercices[exercice.id] && $my.exercices[exercice.id].solved_rank}
                            <Badge color="light" class="text-success fw-bold">
                                <Icon name="check" />
                            </Badge>
                        {/if}
                        {#if !exercice && $myThemes[theme.id].exercice_solved > 0}
                            <Badge color="light">
                                {$myThemes[theme.id].exercice_solved}/{theme.exercice_count}
                            </Badge>
                        {/if}
                    </div>
                {/if}
	        {#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>
