<script>
    // Svelte
    import { fade, slide } from 'svelte/transition'
    import { site, currentLocation } from '../store'

    // Dependencies
    import dayjs from 'dayjs'
    import advancedFormat from 'dayjs/plugin/advancedFormat'
    dayjs.extend(advancedFormat)

    export let index
    export let photo
    const location = $currentLocation.location

    // Manipulate data
    const thumbnail = photo.image.data.thumbnails.find(t => t.url.includes('key=large'))
    index = (index < 10 ? '0' : null) + index
</script>

<div class="card" in:fade out:fade>
    <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
        <div class="card-image">
            <figure class="image is-4by3">
                <img src="{thumbnail.url}" alt="{photo.name}, {location.name}, {location.country.name}" width="{thumbnail.width}" height="{thumbnail.height}">
            </figure>
        </div>

        <div class="card-content">
            <p class="is-size-5"><strong></strong>
                <strong>{photo.name}</strong>
            </p>
            <p>{location.name}, {location.country.name}</p>
        </div>

        <footer class="card-footer has-text-grey-light">
            <span class="card-footer-item">{dayjs(photo.date).format('MMM Do, YYYY')}</span>
            <span class="card-footer-item">#{index}</span>
        </footer>
    </a>
</div>
