---
import { marked,  } from 'marked';
const { item, thumbSize } = Astro.props;
import { getSpeaker, getSpeakerImage } from '../lib/events.js';
import core from "../core.json";

---

{item.speakers &&
    <div class="my-6">
        <h2>Speakers ({item.speakers.length})</h2>
        <div class="w3pn-speaker-list grid grid-cols-1 gap-6 mt-4">
            {item.speakers.map(spId => getSpeaker(core, spId)).map((speaker) => (
                <div class="flex gap-4">
                    <div class={`${thumbSize === 'big' ? 'w-16 h-16' : 'w-14 h-14'}`}><img class={`${thumbSize === 'big' ? 'w-16 h-16' : 'w-14 h-14'} aspect-square rounded-full object-cover`} src={getSpeakerImage(speaker, '128')} /></div>
                    <div>
                        <div>
                            <span class="text-white">{speaker.name}</span>
                            {speaker.refs?.twitter &&
                                <span class="ml-2">(<a href={"https://twitter.com/"+speaker.refs.twitter}>@{speaker.refs.twitter}</a>)</span>
                            }
                        </div>
                        <div set:html={marked.parseInline(speaker.caption)} class="text-sm"></div>
                    </div>
                </div>
            ))}
        </div>

        <div class="mt-8">
            <a href={core.links.cfp} class="button inverted"><button>Submit proposal (CfP)</button></a>
        </div>
    </div>
}
{!item.speakers &&
    <div class="my-6">
        <h2>Speakers (0)</h2>

        <div class="mt-4">Stay tuned. Speakers coming :-)</div>

        <div class="mt-6">
            <a href={core.links.cfp} class="button inverted"><button>Submit proposal (CfP)</button></a>
        </div>
    </div>
}