<template>
	<section class="simplestats-settings">
		<h1 class="simplestats-settings-title">{{ text_title }}</h1>
		<ApiConnectionCard />
		<GeneralCard v-if="showFullCards" />
		<DisconnectCard v-if="showFullCards" />
	</section>
</template>

<script setup>
	import { computed, onMounted } from 'vue';
	import { useStore } from '@/dashboard/store.js';
	import ApiConnectionCard from './ApiConnectionCard.vue';
	import GeneralCard from './GeneralCard.vue';
	import DisconnectCard from './DisconnectCard.vue';

	const store = useStore();

	const text_title = wp.i18n.__( 'SimpleStats Settings', 'simplestats-friendly-website-analytics' );

	const showFullCards = computed( () => store.connection.status !== 'disconnected' );

	onMounted( () => {
		store.fetchConnectionStatus();
	} );
</script>
