<script>
    // a 'technology' object
    export let technology;
    export let affiliate_colours;

	const formatter = new Intl.ListFormat('en', {
	  style: 'long',
	  type: 'conjunction',
	});

	// combine an array of terms into a sentence with proper Oxford commas, dealing with the special cases
	// of one or two elements.
	function toOxfordCommaString(arr) {
		//console.log('arr: ', arr);
		return formatter.format(arr);
	}

	// return a singular or plural term depending on the value of 'count'
	function pluraliser(singular, plural, count) {
		if (count > 1) return plural;
		return singular;
	}

	//    console.log(technologies);
	// return true if a tech object includes valid instances
	function hasInstances(tech) {
		if (
			tech.hasOwnProperty('instances') &&
			tech.instances.constructor === Array &&
			tech.instances.length
		) return true;
		return false;
	}
</script>

<div class="tile technology">
    <div class="links">
        {#if technology.repository}<span class="repository"><a
			href={technology.repository} title="The source code repository for {technology.name}">R</a></span>{/if}
        {#if technology.wikipedia}<span class="wikipedia"><a
			href={technology.wikipedia}
			title="Wikipedia Page for {technology.name}">W</a></span>{/if}
    </div>
    <h2><a href={technology.website}>{technology.name}</a></h2>
    <p class="description">{technology.description}{#if technology.extended_description}<span
        title={technology.extended_description}>i</span>{/if}
    </p>
    {#if technology.categories}<p class="categories">{pluraliser('Category',
		'Categories', technology.categories.length)}: <span class="value">{toOxfordCommaString(technology.categories)}</span></p>{/if}
    {#if technology.analogues}<p class="analogues">Alternative to <span
		class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
    {#if technology.license}<p class="license"
        title="The libre license for this project is {technology.license}">License: <span
		class="value">{technology.license}</span></p>{/if}
    {#if hasInstances(technology)}
        <div class="instances">
            <p>{#each technology.instances as instance}<a
				href="https://{instance.domain}"
				title="{technology.name} instance {instance.domain} hosted on '{instance.host}' by {instance.affiliation}"><span class="marker circle"
				style="background-color: {affiliate_colours[instance.affiliation].colour}"
				></span></a>{/each}
            </p>
        </div>
    {:else}
        <div class="instances">Nothing here yet...</div>
    {/if}
</div>

<style>
	.tile {
        display: inline-block;
		height: 515px;
		/*min-width: 240px;
		max-width: 300px;*/
		width: 290px;
		overflow: hidden;
		box-sizing: border-box;
		box-shadow: 5px 5px 3px #6a6d6a;
		border: solid 3px #516855;
		border-radius: 15px;
		text-overflow: ellipsis;
		overflow: hidden;
		position: relative;
		background-color: #eee;
		margin-top: 8px;
		margin-right: 18px;
		margin-bottom: 10px;
	}
	.tile .links {
		position: absolute;
		top: 0;
		right: 0;
		padding: 2px 6px;
		font-size: 90%;
	}
	.tile:hover {
		box-shadow: 10px 10px 6px #727372;
	}
	.tile p.description {
	    height: 200px;
	    overflow: scroll;
	}
	.tile .links h2 a {
		color: #e6c4fc;
	}
	.tile .links a:visited {
		color: #ced0ff;
	}
	.tile .links a:hover,
	.tile:hover h2 a {
		color: #fff !important;
	}
	.tile h2 {
		background-color: #999;
		text-align: center;
		padding: 0.5em;
		margin: 0;
	}
	.tile h2 a {
		color: #e6c4fc;
	}
	.tile h2 a:visited {
		color: #ced0ff;
	}
	.tile h2 a:hover {
		color: #fff;
	}
	.tile .description {
		height: 260px;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.tile p {
		padding: 0 1em 0.2em 1em;
		font-size: 80%;
		color: #555;
	}
	.instances {
		background-color: #ddd;
		position: absolute;
		bottom: 0;
		height: 3em;
		width: 100%;
	}
	.instances .marker {
		margin-right: 3px;
	}
	.webservices li {
		list-style-type: none;
	}
	.value {
		font-weight: bold;
		color: #000;
	}
	.marker {
		vertical-align: middle;
	}
	.circle {
		height: 20px;
		width: 20px;
		background-color: #555;
		border-radius: 50%;
		display: inline-block;
	}
	.square {
		height: 20px;
		width: 20px;
		background-color: #555;
		display: inline-block;
	}
</style>
