<script lang="ts">
    export let skills: any;

    import Card from '$lib/components/Card.svelte';
    import Modal from '$lib/components/Modal.svelte';

    let showModal: boolean = false;
    let activeModal: any = null;
</script>

<style>
    .card-footer {
        margin-bottom: 1em;
        display: flex;
        gap: 1.5em;
        justify-content: space-between;
    }

    .logo {
        color: var(--fg);
        font-size: 3em;
    }
</style>

{#each skills as skill}
    <Card on:click={() => {showModal = true; activeModal = skill}}>
        <div slot="header">
            <h2>{skill.skill}</h2>
            <i class="{skill.logo} logo"></i>
        </div>
        <div slot="content">
            <p class="not-required">{@html skill.usage}</p>
        </div>
        <div slot="footer">
            <!-- svelte-ignore a11y-invalid-attribute -->
            <a href="#">View More</a>
            <a href="/repos">Repos</a>
        </div>
    </Card>
{/each}

<!--Modal to be displayed on click-->
{#if activeModal != null}
    <Modal bind:showModal>
        <h2 slot="header" class="card-header">
            {activeModal.skill}
            <i class="{activeModal.logo} logo"></i>
        </h2>

        <p>
            {activeModal.about}
        </p>

        <div class="card-footer">
            <a href="{activeModal.link}" target="_blank" rel="noopener noreferrer">Learn More</a>
            <a href="/repos">Repos</a>
        </div>
    </Modal>
{/if}