<div class="grid md:grid-cols-3 gap-16"> <div> <template v-for="album in tracklist"> <strong v-if="album.title">{{album.title}}</strong> <ul> <li v-for="(track, index) in album.tracks" class="ml-4"> {{track.position || (index+1)}} - {{ track.title }} <template v-if="track.duration">({{track.duration}})</template> <ul v-if="track.artists && track.artists.length > 0" class="sm-hidden"> <li v-for="extra in track.artists" class=" ml-4"> <small>{{extra.name}}</small> </li> </ul> <ul v-if="track.extraartists && track.extraartists.length > 0" class="sm-hidden"> <li v-for="extra in track.extraartists" class=" ml-4"> <small>{{extra.role}} : <a :href="`/ma-collection?page=1&limit=16&sort=year&order=asc&artist=${extra.name}`">{{extra.name}}</a></small> </li> </ul> </li> </ul> </template> </div> <div class="md:col-span-2"> <div class="grid grid-cols-2 gap-10"> <div> <strong>Genres</strong> <br /> <template v-for="(genre, index) in item.genres"> {{genre}}<template v-if="index < item.genres.length - 1">, </template> </template> </div> <div> <strong>Styles</strong> <br /> <span v-for="(style, index) in item.styles"> {{style}}<template v-if="index < item.styles.length - 1">, </template> </span> </div> </div> <hr /> <div class="grid grid-cols-3 gap-10"> <div> <strong>Pays</strong> <br /> <span>{{item.country}}</span> </div> <div> <strong>Année</strong> <br /> <span>{{item.year}}</span> </div> <div> <strong>Date de sortie</strong> <br /> <span>{{item.released}}</span> </div> </div> <hr /> <div class="grid gap-10"> <div> <strong>Format<template v-if="item.formats.length > 1">s</template></strong> <ul class="ml-4"> <li v-for="(format) in item.formats"> {{format.name}} <template v-if="format.text"> - <i>{{format.text}}</i> </template> <template v-if="format.descriptions && format.descriptions.length > 0"> (<span v-for="(description, index) in format.descriptions"> {{description}}<template v-if="index < format.descriptions.length - 1">, </template> </span>) </template> </li> </ul> </div> </div> <hr /> <div class="grid grid-cols-1 md:grid-cols-2 gap-10"> <div> <strong id="identifiers">Code<template v-if="item.identifiers.length > 1">s</template> barre<template v-if="item.identifiers.length > 1">s</template></strong> <ol class="ml-4"> <li v-for="identifier in identifiers"> {{identifier.value}} ({{identifier.type}}) </li> </ol> <template v-if="item.identifiers.length > identifiersPreviewLength"> <button type="button" class="button is-link" v-if="identifiersMode === 'preview'" @click="showAllIdentifiers"> Voir la suite </button> <button type="button" class="button is-link" v-if="identifiersMode === 'all'" @click="showLessIdentifiers"> Voir moins </button> </template> </div> <div> <strong>Label<template v-if="item.labels.length > 1">s</template></strong> <ol class="ml-4"> <li v-for="label in item.labels"> {{label.name}} {{label.catno}} </li> </ol> <strong>Société<template v-if="item.companies.length > 1">s</template></strong> <ol class="ml-4"> <li v-for="company in item.companies"> <strong>{{company.entity_type_name}}</strong> {{company.name}} </li> </ol> </div> </div> <hr /> <div class="grid gap-10"> <div> <strong>Note</strong> <div v-html="(item.notes || '').replaceAll('\n', '<br />')"></div> </div> </div> <hr /> <div class="grid gap-10"> <div> <strong>Vidéos</strong> <dl> <template v-for="video in item.videos"> <dt> <a :href="video.uri" target="_blank" rel="noopener noreferrer">{{video.title}}</a> </dt> <dd> {{video.description}} </dd> </template> </dl> </div> </div> </div> </div>