<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>