<script>
    import { locations } from '../store'
</script>

<div class="columns">
    {#each $locations as location}
    <div class="column is-one-third">
        <div class="card">
            <div class="card-content">
                <a class="media" href="/location/{location.country.slug}/{location.slug}">
                    <figure class="media-left">
                        <span class="icon is-medium has-text-danger">
                            <i class="fas fa-map-marker-alt fa-lg"></i>
                        </span>
                    </figure>
                    <div class="media-content">
                        <span class="title is-5">{location.name}</span><br>
                        {location.region}, {location.country.name}<br>
                        <!-- {#if (location.photos.length > 0)}
                        {location.photos.length} {(location.photos.length > 1) ? 'photos' : 'photo'}
                        {/if} -->
                    </div>
                </a>
            </div>
        </div>
    </div>
    {/each}
</div>
