<script lang="ts" src="./included-items"></script>

<template>
	<div class="-included-items">
		<div class="row">
			<div class="col-xs-6 col-centered">
				<p v-if="package.description">
					{{ package.description }}
				</p>

				<ul>
					<li v-for="build of packagePayload.builds" :key="build.id">
						{{ build.primary_file.filename }}
						<small class="text-muted">
							({{ filesize(build.primary_file.filesize) }})
						</small>

						<span
							v-for="os of ['windows', 'mac', 'linux', 'other']"
							:key="os"
							v-app-tooltip.touchable="packageCard.platformSupportInfo[os].tooltip"
						>
							<template v-if="hasSupport(build, os)">
								{{ packageCard.platformSupportInfo[os].tooltip }}
							</template>

							<template v-if="is64BitOnly(build, os)">
								64-bit
							</template>
						</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<style lang="stylus" scoped>
@import '~styles/variables'

.-included-items
	p
	ul
		margin-bottom: $shell-padding

		&:last-child
			margin-bottom: 0

	ul
		padding-left: 0
		list-style: none

	li
		margin-bottom: 5px
</style>
