<script>
 import {
     ButtonGroup,
     Icon,
 } from 'sveltestrap';

 import { settings, time } from '../stores/settings.js';
</script>

{#if $settings}
    {#if $settings.end - $settings.start > 0}
        <div
            class="clock display-2"
            class:expired={$time.expired}
            class:end={$time.end}
            class:wait={$time.startIn}
        >
            {#if $time.seconds}
                <span id="hours">
                    {$time.hours}
                </span>
                <span class="point">
                    :
                </span>
                <span id="minutes">
                    {$time.minutes}
                </span>
                <span class="point">
                    :
                </span>
                <span id="seconds">
                    {$time.seconds}
                </span>
            {:else}
                Chargement
            {/if}
        </div>
    {:else}
        <div class="d-flex h-100 justify-content-center align-items-center">
            <ButtonGroup size="lg">
	        <a
                    href="/"
                    class="btn btn-light"
                >
                    <Icon name="ui-checks-grid" />
	            Accueil
	        </a>
	        <a
                    href="/rank"
                    class="btn btn-light"
                >
                    <Icon name="sort-down" />
	            Classement
	        </a>
	        <a
                    href="{$settings.videoslink}"
                    class="btn btn-light"
                    class:disabled={$settings.videoslink === ''}
                >
                    <Icon name="laptop-fill" />
	            Vidéos
	        </a>
            </ButtonGroup>
        </div>
    {/if}
{:else}
    <div class="d-flex h-100 justify-content-center align-items-center">
        <h1 class="display-3 m-0">
            Challenge forensic
        </h1>
    </div>
{/if}

<style>
 .clock:not(.expired):not(.wait) .point, .clock.expired {
     transition: color text-shadow 1s;
     position: relative;
     animation: clockanim 1s ease infinite;
     -moz-animation: clockanim 1s ease infinite;
     -webkit-animation: clockanim 1s ease infinite;
 }
 .clock.wait .point {
     transition: color text-shadow 1s;
     position: relative;
     animation: clockwait 1s ease infinite;
     -moz-animation: clockwait 1s ease infinite;
     -webkit-animation: clockwait 1s ease infinite;
 }
 .end {
     color: #e64143;
 }
 .point {
     text-shadow: 0 0 20px #4eaee6;
 }
 .end .point {
     text-shadow: 0 0 20px #e64143;
 }
 @keyframes clockanim {
     0% { opacity: 1.0; }
     50% { opacity: 0; }
     100% { opacity: 1.0; }
 }
 @keyframes clockwait {
     0% { text-shadow: 0 0 20px #A6D6F2; }
     50% { text-shadow: 0 0 2px #A6D6F2; }
     100% { text-shadow: 0 0 20px #A6D6F2; }
 }
</style>
