<template>
	<section class="project-information">
		<p>
			{{ $t('PROJECT_SETTINGS_INFORMATION_DESC') }}
		</p>
		<p
			v-html="$t('PROJECT_SETTINGS_INFORMATION_MARKDOWN_SUPPORT')"
		/>

		<client-only>
			<MarkdownEditor
				v-model="project.readme"
				class="project-information__editor"
			/>
			<template #placeholder>
				<div class="project-information__loading">
					Loading editor...
				</div>
			</template>
		</client-only>
	</section>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
	name: 'InformationTab',

	props: ['project'],

	data: () => ({
		information: '',
	}),

	created() {
		this.information = this.project.readme;
	}
});
</script>

<style lang="scss">
.project-information {
	p {
		@include margin(2, y);

		color: #737373;
	}

	&__loading {
		@include ring(var(--color-shade-2), 2);
		@include margin(6, t);
		@include padding(3);
		@include rounded(md);

		background-color: var(--color-shade-2);
		color: #575757;
	}

	&__editor .CodeMirror {
		@include ring(var(--color-shade-2), 2);
		@include margin(6, t);
		@include rounded(md);

		height: 400px;
	}	
}
</style>