<script>
    import { slide } from 'svelte/transition'
    import dayjs from 'dayjs'
    import advancedFormat from 'dayjs/plugin/advancedFormat'
    import * as fn from '../functions'

    export let photo
    export let index
    export let location

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

    // Format the date
    dayjs.extend(advancedFormat)
    const date = dayjs(photo.created_on).format('MMM Do, YYYY')
</script>

<div class="card" in:slide out:slide>
    <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">
        <h4 class="title is-4">{photo.name}</h4>
        <p>{location.name}, {location.country.name}</p>
    </div>

    <footer class="card-footer">
        <span class="card-footer-item">{date}</span>
        <span class="card-footer-item">#{index}</span>
    </footer>
</div>
