<template>
	<div id="page__wrapper" class="flex flex-col justify-between min-h-520">
		<div class="page__scroller">
			<h2 id="page__heading" class="text-xl font-bold leading-tight dark:text-slate-400 text-center">
				{{ 'More about TethysCloud' }}
			</h2>
			<div id="page__content" class="flex flex-wrap justify-center page__content">
				<Card href="https://gitea.geologie.ac.at/geolba" :title="'Explore more apps ↗'"
					:subtitle="'Extend the functionality of TethysCloud.'" />
				<Card href="https://gitea.geologie.ac.at/geolba" :title="'Get involved! ↗'"
					:subtitle="'Be a part of the community that helps build, design, translate and promote TethysCloud!'" />
				<Card href="https://gitea.geologie.ac.at/geolba" :title="'Need help? ↗'"
					:subtitle="'Find out more about your TethysCloud setup with the admin, user or developer documentation.'" />
				<Card href="https://gitea.geologie.ac.at/geolba" :title="'For large organisations ↗'"
					:subtitle="'Get TethysCloud Enterprise for mission critical environments where advanced security and compliance are important.'" />
			</div>
			<p class="version-number">
				{{ versionNumber }}
			</p>
		</div>
	</div>
</template>

<script>
import Card from './Card.vue'

export default {
	name: 'Page3',

	components: {
		Card,
	},

	computed: {
		versionNumber() {
			return 'This TethysCloud is on version 2.0.0'; // + OC.config.versionstring
		},
	},
}
</script>

<style lang="css" scoped>
.page {

	&__scroller {
		/* overflow-y: scroll; */
		margin-top: calc(var(--default-grid-baseline) * 8);
	}

	/* &__content {       
        
        gap: calc(var(--default-grid-baseline) * 6);       
        margin: calc(var(--default-grid-baseline) * 10) 0;
    } */
}


.page__content {
	gap: calc(var(--default-grid-baseline) * 6);
	margin: calc(var(--default-grid-baseline) * 6) 0 calc(var(--default-grid-baseline) * 4) 0;
}

.version-number {
	margin: 0px 0 calc(var(--default-grid-baseline) * 4) 0;
	color: var(--color-text-maxcontrast);
	text-align: center;
}
</style>
