<commit_before><template>
	<div>
		<v-card v-if="loading" outlined class="c-AlbumCard--loading">
			<v-card-title />
			<v-card-text>
				<div class="c-AlbumCard__contentFaker" />
				<div class="c-AlbumCard__contentFaker" />
				<div class="c-AlbumCard__contentFaker" />
				<div class="c-AlbumCard__contentFaker" />
			</v-card-text>
		</v-card>
		<v-card v-else outlined class="c-AlbumCard">
			<router-link :to="`/albums/${album.id}/view`" class="c-AlbumCard__albumLink">
				<v-img
					v-if="album.cover"
					:src="`${baseImageUrl}?w=400`"
					:srcset="`
							${baseImageUrl}?w=400 400w,
							${baseImageUrl}?w=700 700w`"
					:eager="eagerCovers"
					aspect-ratio="3"
					gradient="to top, rgba(0, 0, 0, 0.8) 0%, transparent 72px"
				>
					<v-row align="end" class="fill-height px-4	">
						<v-col class="title">
							{{ album.identifyingName }}
						</v-col>
					</v-row>
				</v-img>
				<v-card-title v-else>
					{{ album.identifyingName }}
				</v-card-title>
			</router-link>
			<v-card-text>
				<v-alert
					v-if="album.wishlist" color="primary" border="left"
					icon="mdi-gift" text dense
				>
					{{ $t('field.Album.wishlist.value.true') }}
				</v-alert>
				<template v-if="album.firstEditionDate && album.firstEditionDate === album.currentEditionDate">
					<FieldValue :label="$t('field.Album.firstEditionDate')">
						{{ $d(new Date(album.firstEditionDate), 'long') }}
						<template v-if="album.markedAsFirstEdition">
							{{ $t('field.Album.markedAsFirstEdition.view') }}
						</template>
						<template v-else>
							{{ $t('field.Album.isFirstEdition') }}
						</template>
					</FieldValue>
				</template>
				<template v-else>
					<FieldValue v-if="album.firstEditionDate" :label="$t('field.Album.firstEditionDate')">
						{{ $d(new Date(album.firstEditionDate), 'long') }}
					</FieldValue>
					<FieldValue v-if="album.currentEditionDate" :label="$t('field.Album.currentEditionDate')">
						{{ $d(new Date(album.currentEditionDate), 'long') }}
					</FieldValue>
				</template>
				<FieldValue
					v-if="album.writers"
					:label="$tc('field.Album.writers', album.writers ? album.writers.length : 0)"
				>
					<ModelLink :model="album.writers" view="AuthorView" />
				</FieldValue>
				<FieldValue
					v-if="album.artists"
					:label="$tc('field.Album.artists', album.artists ? album.artists.length : 0)"
				>
					<ModelLink :model="album.artists" view="AuthorView" />
				</FieldValue>
				<v-fade-transition>
					<div v-if="expanded">
						<FieldValue
							v-if="album.colorists"
							:label="$tc('field.Album.colorists', album.colorists ? album.colorists.length : 0)"
						>
							<ModelLink :model="album.colorists" view="AuthorView" />
						</FieldValue>
						<FieldValue
							v-if="album.inkers"
							:label="$tc('field.Album.inkers', album.inkers ? album.inkers.length : 0)"
						>
							<ModelLink :model="album.inkers" view="AuthorView" />
						</FieldValue>
						<FieldValue
							v-if="album.translators"
							:label="$tc('field.Album.translators', album.translators ? album.translators.length : 0)"
						>
							<ModelLink :model="album.translators" view="AuthorView" />
						</FieldValue>
						<FieldValue v-if="album.publisher" :label="$t('field.Album.publisher')">
							<ModelLink :model="album.publisher" view="PublisherView" />
						</FieldValue>
						<FieldValue v-if="album.collection" :label="$t('field.Album.collection')">
							<ModelLink :model="album.collection" view="CollectionView" />
						</FieldValue>
						<FieldValue v-if="album.tags" :label="$t('field.Album.tags')">
							<TagLink :model="album.tags" />
						</FieldValue>
						<FieldValue v-if="album.binding" :label="$t('field.Album.binding')">
							<ModelLink :model="album.binding" view="BindingView" />
						</FieldValue>
						<FieldValue v-if="album.acquisitionDate" :label="$t('field.Album.acquisitionDate')">
							{{ $d(new Date(album.acquisitionDate), 'long') }}
						</FieldValue>
					</div>
				</v-fade-transition>
			</v-card-text>
			<v-card-actions>
				<v-btn v-if="!expanded" text color="accent" @click="expanded = true">
					{{ $t('page.Series.albums.viewMore') }}
				</v-btn>
				<v-btn v-if="expanded" text color="accent" @click="expanded = false">
					{{ $t('page.Series.albums.viewLess') }}
				</v-btn>
				<v-spacer />
				<FavouriteButton :model-id="album.id" type="Album" />
				<!-- Eventually, replace the following button with an overflow menu to edit, change reading list,
				change wishlist, delete if the album can be deleted (no derivatives)... -->
				<v-btn :to="`/albums/${album.id}/edit`" icon>
					<v-icon>mdi-pencil</v-icon>
				</v-btn>
			</v-card-actions>
		</v-card>
	</div>
</template>

<script>
import FavouriteButton from '@/components/FavouriteButton'
import FieldValue from '@/components/FieldValue'
import ModelLink from '@/components/ModelLink'
import TagLink from '@/components/TagLink'
import { getBaseImageUrl } from '@/helpers/images'

export default {
	name: 'AlbumCard',

	components: {
		FavouriteButton,
		FieldValue,
		ModelLink,
		TagLink
	},

	props: {
		album: {
			type: null,
			required: true
		},

		loading: {
			type: Boolean,
			default: false
		}
	},

	data() {
		return {
			expanded: false
		}
	},

	computed: {
		baseImageUrl() {
			return getBaseImageUrl(this.album.cover)
		},

		eagerCovers() {
			return !(navigator.connection && navigator.connection.saveData)
		}
	}
}
</script>

<style lang="less">
// TODO[dark] adapt load colors to dark theme

.c-AlbumCard__contentFaker {
	min-height: 1.75em;
	margin-top: 1em;
	margin-bottom: 1em;
	border-radius: 8px;
}

.c-AlbumCard {
	.v-card__title, {
		background-color: var(--v-primary-base);
		color: var(--dem-primary-contrast);
	}

	&.theme--light.v-card > .v-card__text {<commit_msg>Remove albums from the reading list from AlbumCard<commit_after><template>
	<div>
		<v-card v-if="loading" outlined class="c-AlbumCard--loading">
			<v-card-title />
			<v-card-text>
				<div class="c-AlbumCard__contentFaker" />
				<div class="c-AlbumCard__contentFaker" />
				<div class="c-AlbumCard__contentFaker" />
				<div class="c-AlbumCard__contentFaker" />
			</v-card-text>
		</v-card>
		<v-card v-else outlined class="c-AlbumCard">
			<router-link :to="`/albums/${album.id}/view`" class="c-AlbumCard__albumLink">
				<v-img
					v-if="album.cover"
					:src="`${baseImageUrl}?w=400`"
					:srcset="`
							${baseImageUrl}?w=400 400w,
							${baseImageUrl}?w=700 700w`"
					:eager="eagerCovers"
					aspect-ratio="3"
					gradient="to top, rgba(0, 0, 0, 0.8) 0%, transparent 72px"
				>
					<v-row align="end" class="fill-height px-4	">
						<v-col class="title">
							{{ album.identifyingName }}
						</v-col>
					</v-row>
				</v-img>
				<v-card-title v-else>
					{{ album.identifyingName }}
				</v-card-title>
			</router-link>
			<v-card-text>
				<v-alert
					v-if="album.wishlist" color="primary" border="left"
					icon="mdi-gift" text dense
				>
					{{ $t('field.Album.wishlist.value.true') }}
				</v-alert>
				<template v-if="album.firstEditionDate && album.firstEditionDate === album.currentEditionDate">
					<FieldValue :label="$t('field.Album.firstEditionDate')">
						{{ $d(new Date(album.firstEditionDate), 'long') }}
						<template v-if="album.markedAsFirstEdition">
							{{ $t('field.Album.markedAsFirstEdition.view') }}
						</template>
						<template v-else>
							{{ $t('field.Album.isFirstEdition') }}
						</template>
					</FieldValue>
				</template>
				<template v-else>
					<FieldValue v-if="album.firstEditionDate" :label="$t('field.Album.firstEditionDate')">
						{{ $d(new Date(album.firstEditionDate), 'long') }}
					</FieldValue>
					<FieldValue v-if="album.currentEditionDate" :label="$t('field.Album.currentEditionDate')">
						{{ $d(new Date(album.currentEditionDate), 'long') }}
					</FieldValue>
				</template>
				<FieldValue
					v-if="album.writers"
					:label="$tc('field.Album.writers', album.writers ? album.writers.length : 0)"
				>
					<ModelLink :model="album.writers" view="AuthorView" />
				</FieldValue>
				<FieldValue
					v-if="album.artists"
					:label="$tc('field.Album.artists', album.artists ? album.artists.length : 0)"
				>
					<ModelLink :model="album.artists" view="AuthorView" />
				</FieldValue>
				<v-fade-transition>
					<div v-if="expanded">
						<FieldValue
							v-if="album.colorists"
							:label="$tc('field.Album.colorists', album.colorists ? album.colorists.length : 0)"
						>
							<ModelLink :model="album.colorists" view="AuthorView" />
						</FieldValue>
						<FieldValue
							v-if="album.inkers"
							:label="$tc('field.Album.inkers', album.inkers ? album.inkers.length : 0)"
						>
							<ModelLink :model="album.inkers" view="AuthorView" />
						</FieldValue>
						<FieldValue
							v-if="album.translators"
							:label="$tc('field.Album.translators', album.translators ? album.translators.length : 0)"
						>
							<ModelLink :model="album.translators" view="AuthorView" />
						</FieldValue>
						<FieldValue v-if="album.publisher" :label="$t('field.Album.publisher')">
							<ModelLink :model="album.publisher" view="PublisherView" />
						</FieldValue>
						<FieldValue v-if="album.collection" :label="$t('field.Album.collection')">
							<ModelLink :model="album.collection" view="CollectionView" />
						</FieldValue>
						<FieldValue v-if="album.tags" :label="$t('field.Album.tags')">
							<TagLink :model="album.tags" />
						</FieldValue>
						<FieldValue v-if="album.binding" :label="$t('field.Album.binding')">
							<ModelLink :model="album.binding" view="BindingView" />
						</FieldValue>
						<FieldValue v-if="album.acquisitionDate" :label="$t('field.Album.acquisitionDate')">
							{{ $d(new Date(album.acquisitionDate), 'long') }}
						</FieldValue>
					</div>
				</v-fade-transition>
			</v-card-text>
			<v-card-actions>
				<v-btn v-if="!expanded" text color="accent" @click="expanded = true">
					{{ $t('page.Series.albums.viewMore') }}
				</v-btn>
				<v-btn v-if="expanded" text color="accent" @click="expanded = false">
					{{ $t('page.Series.albums.viewLess') }}
				</v-btn>
				<v-spacer />
				<v-btn v-if="isInReadingList" :loading="readingListLoading" icon @click="markAsRead">
					<v-icon>mdi-library</v-icon>
				</v-btn>
				<FavouriteButton :model-id="album.id" type="Album" />
				<!-- Eventually, replace the following button with an overflow menu to edit, change reading list,
				change wishlist, delete if the album can be deleted (no derivatives)... -->
				<v-btn :to="`/albums/${album.id}/edit`" icon>
					<v-icon>mdi-pencil</v-icon>
				</v-btn>
			</v-card-actions>
		</v-card>
	</div>
</template>

<script>
import { sortedIndexOf } from 'lodash'
import { mapState } from 'vuex'
import FavouriteButton from '@/components/FavouriteButton'
import FieldValue from '@/components/FieldValue'
import ModelLink from '@/components/ModelLink'
import TagLink from '@/components/TagLink'
import { getBaseImageUrl } from '@/helpers/images'
import readerService from '@/services/reader-service'

export default {
	name: 'AlbumCard',

	components: {
		FavouriteButton,
		FieldValue,
		ModelLink,
		TagLink
	},

	props: {
		album: {
			type: null,
			required: true
		},

		loading: {
			type: Boolean,
			default: false
		}
	},

	data() {
		return {
			expanded: false,
			readingListLoading: false
		}
	},

	computed: {
		baseImageUrl() {
			return getBaseImageUrl(this.album.cover)
		},

		eagerCovers() {
			return !(navigator.connection && navigator.connection.saveData)
		},

		...mapState({
			readingList: state => state.reader.readingList
		}),

		isInReadingList() {
			return sortedIndexOf(this.readingList, this.album.id) > -1
		}
	},

	methods: {
		async markAsRead() {
			this.readingListLoading = true
			await readerService.removeFromReadingList(this.album.id)
			this.readingListLoading = false
		}
	}
}
</script>

<style lang="less">
// TODO[dark] adapt load colors to dark theme

.c-AlbumCard__contentFaker {
	min-height: 1.75em;
	margin-top: 1em;
	margin-bottom: 1em;
	border-radius: 8px;
}

.c-AlbumCard {
	.v-card__title, {
		background-color: var(--v-primary-base);
		color: var(--dem-primary-contrast);
	}

	&.theme--light.v-card > .v-card__text {
{'fraction_non_alphanumeric': 0.18110812789846228, 'fraction_numerical': 0.005939305182653974, 'mean_word_length': 3.162546562817474, 'pattern_counts': {'":': 0, '<': 191, '<?xml version=': 0, '>': 195, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '823177', 'n_tokens_mistral': 5544, 'n_tokens_neox': 4286, 'n_words': 706}