<!-- 多语言AI资讯系统主页 - 严格遵循UTS Android开发规范 -->
<template>
	<scroll-view direction="vertical" class="info-home"  :enable-back-to-top="true">	
		<view class="header">
			<view class="header-content">
				<view class="header-actions">
					<view class="action-btn" @click="showLanguageSelector">
						<text class="action-text">{{ currentLanguageName }}{{$t('mt.category.politics')}}</text>
					</view>
					<view class="action-btn" @click="navigateToTopics">
						<text class="action-icon">📑</text>
					</view>
					<view class="action-btn" @click="navigateToSearch">
						<text class="action-icon">🔍</text>
					</view>
					<view class="action-btn" @click="navigateToChat">
						<text class="action-icon">💬</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 分类标签栏 -->
<view class="category-section">
  <scroll-view direction="horizontal" class="category-scroll" >
	<view style="white-space: nowrap;flex-direction: row;">
	  <view 
		v-for="(category, index) in categoriesList" 
		:key="category.id" 
		class="category-tab"
		:class="{ 'is-active': selectedCategoryId === category.id, 'is-last': index === categoriesList.length - 1 }"
		@click="selectCategory(category)"
		style="display: inline-block; margin-right: 12px;">
		<text class="category-text" :class="{ 'is-active': selectedCategoryId === category.id }">{{ getCategoryName(category) }}</text>
	  </view>
	</view>
  </scroll-view>
</view>

		<!-- 精选内容区域 -->
		<view class="featured-section" v-if="featuredContentsList.length > 0">
			<view class="section-header">
				<text class="section-title">{{ $t('mt.section.featured') }}</text>
			</view>
			<scroll-view direction="horizontal" class="featured-scroll" :scroll-x="true">
				<view class="featured-cards">
					<view 
						v-for="(content, index) in featuredContentsList" 
						:key="content.id" 
						class="featured-card"
						:style="{ width: cardWidth + 'px' }"
						@click="navigateToDetail(content)">
						<view class="card-header">
							<text class="card-title">{{ content.title }}</text>
							<view class="quality-badge" :style="{ backgroundColor: getQualityScoreColorLocal(content.quality_score) }">
								<text class="quality-text">{{ getQualityScoreTextLocal(content.quality_score) }}</text>
							</view>
						</view>
						<text class="card-summary">{{ content.summary }}</text>
						<view class="card-footer">
							<text class="card-author">{{ content.author }}</text>
							<text class="card-time">{{ formatRelativeTimeLocal(content.published_at) }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 内容列表区域 -->
		<view class="content-section">
			<view class="section-header">
				<text class="section-title">{{ $t('mt.section.latest') }}</text>
				<view class="section-actions">
					<view class="sort-btn" @click="showSortOptions">
						<text class="sort-text">{{ sortOptionText }}</text>
					</view>
				</view>
			</view>			

			<!-- 加载状态 -->
			<view class="loading-section" v-if="pageState.loading">
				<text class="loading-text">{{ $t('mt.status.loading') }}</text>
			</view>

			<!-- 错误状态 -->
			<view class="error-section" v-if="pageState.error !== null">
				<text class="error-text">{{ pageState.error }}</text>
				<view class="retry-btn" @click="retryLoad">
					<text class="retry-text">{{ $t('mt.action.retry') }}</text>
				</view>
			</view>

			<!-- 内容列表 -->
			<view class="content-list" v-if="contentsList.length > 0">
				<view 
					v-for="(content, index) in contentsList" 
					:key="content.id" 
					class="content-item"
					@click="navigateToDetail(content)">
					<view class="content-header">
						<text class="content-title">{{ content.title }}</text>
						<view class="content-meta">
							<!-- <text class="content-category">{{ getCategoryDisplayNameByIdLocal(content.category_id) }}</text> -->
							<text class="content-time">{{ formatRelativeTimeLocal(content.published_at) }}</text>
						</view>
					</view>
					<text class="content-summary">{{ content.summary }}</text>
					<view class="content-footer">
						<view class="content-stats">
							<text class="stat-item">👁 {{ content.view_count }}</text>
							<text class="stat-item">👍 {{ content.like_count }}</text>
							<text class="stat-item">📤 {{ content.share_count }}</text>
						</view>
						<view class="quality-badge" :style="{ backgroundColor: getQualityScoreColorLocal(content.quality_score) }">
							<text class="quality-text">{{ getQualityScoreTextLocal(content.quality_score) }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-section" v-if="contentsList.length === 0 && !pageState.loading && pageState.error === null">
				<text class="empty-text">{{ $t('mt.empty.content') }}</text>
				<view class="refresh-btn" @click="refreshData">
					<text class="refresh-text">{{ $t('mt.action.refresh') }}</text>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="load-more-section" v-if="contentsList.length > 0 && hasMore">
				<view class="load-more-btn" @click="loadMore" v-if="!loadingMore">
					<text class="load-more-text">{{ $t('mt.button.loadMore') }}</text>
				</view>
				<view class="loading-more" v-if="loadingMore">
					<text class="loading-more-text">{{ $t('mt.loadingMore') }}</text>
				</view>
			</view>
		</view>

		<!-- 语言选择弹窗 -->
		<view class="modal-overlay" v-if="showLanguageModal" @click="hideLanguageSelector">
			<view class="language-modal" @click.stop="">
				<view class="modal-header">
					<text class="modal-title">{{ $t('mt.modal.selectLanguage') }}</text>
					<view class="modal-close" @click="hideLanguageSelector">
						<text class="close-text">×</text>
					</view>
				</view>
				<view class="language-list">
					<view 
						v-for="(language, index) in languagesList" 
						:key="language.id" 
						class="language-item"
						:class="{ active: currentLanguageCode === language.code }"
						@click="selectLanguage(language)">
						<text class="language-name">{{ getLanguageDisplayNameLocal(language.code) }}</text>
						<text class="language-native">{{ language.native_name }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 排序选择弹窗 -->
		<view class="modal-overlay" v-if="showSortModal" @click="hideSortOptions">
			<view class="sort-modal">
				<view class="modal-header">
					<text class="modal-title">{{ $t('mt.modal.sort') }}</text>
					<view class="modal-close" @click="hideSortOptions">
						<text class="close-text">×</text>
					</view>
				</view>
				<view class="sort-list">
					<view 
						v-for="(option, index) in sortOptionsList" 
						:key="option.value" 
						class="sort-item"
						:class="{ active: currentSortOption === option.value }"
						@click="selectSortOption(option)">
						<text class="sort-name">{{ option.text }}</text>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="uts">
import supa from '@/components/supadb/aksupainstance.uts'
import {OrderOptions} from '@/components/supadb/aksupa.uts'

import {
  OptionItem,
  InfoContent,
  LanguageData,
  Language,
  PageState,
  ResponsiveState,
  
  LANGUAGE_OPTIONS,
  SORT_OPTIONS,
  formatRelativeTimeKey,
  getQualityScoreColor,
  getQualityScoreText,
  CategoryData,
  CategoryTranslation
} from './types.uts'

import { tt } from '@/utils/i18nfun.uts'



// 页面状态 - 严格使用简单类型避免复杂嵌套
const pageState = ref<PageState>({
	loading: false,
	error: null,
	currentPage: 1,
	pageSize: 20,
	total: 0
})

// 响应式状态
const responsiveState = ref<ResponsiveState>({
	isLargeScreen: false,
	isSmallScreen: true,
	screenWidth: 375,
	cardColumns: 1
})

// UI状态变量 - 与template交互使用1维变量
const showLanguageModal = ref<boolean>(false)
const showSortModal = ref<boolean>(false)
const loadingMore = ref<boolean>(false)
const hasMore = ref<boolean>(true)

// 当前选择状态 - 使用简单字符串类型
const selectedCategoryId = ref<string>('all')
const currentLanguageCode = ref<string>('zh-CN')
const currentLanguageName = ref<string>('简体中文')
const currentSortOption = ref<string>('published_at_desc')
const sortOptionText = ref<string>('最新发布')

// 数据列表 - 直接使用强类型 InfoContent 数组
const contentsList = ref<Array<InfoContent>>([])
const featuredContentsList = ref<Array<InfoContent>>([])
const categoriesList = ref<CategoryData[]>([])
const languagesList = ref<Array<LanguageData>>([])

// 选项列表
const sortOptionsList = ref<Array<OptionItem>>(SORT_OPTIONS)

// 计算属性
const cardWidth = computed((): number => {
	return responsiveState.value.isLargeScreen ? 300 : 280
})

const contentFilter = computed((): string => {
	let filter = "status=eq.published"
	if (selectedCategoryId.value !== '') {
		filter += `&category_id=eq.${selectedCategoryId.value}`
	}
	// 根据排序选项构建order参数
	const sortParts = currentSortOption.value.split('_')
	const column = sortParts.slice(0, -1).join('_')
	const direction = sortParts[sortParts.length - 1] === 'desc' ? 'desc' : 'asc'
	filter += `&order=${column}.${direction}`
	return filter
})

// Supabase组件引用 - 移除，使用直接调用方式
// const contentsRef = ref<SupadbComponentPublicInstance | null>(null)


// 响应式处理
const handleResize = () => {
	const systemInfo = uni.getSystemInfoSync()
	const screenWidth = systemInfo.screenWidth
	responsiveState.value.screenWidth = screenWidth
	responsiveState.value.isLargeScreen = screenWidth >= 768
	responsiveState.value.isSmallScreen = screenWidth < 768
	responsiveState.value.cardColumns = screenWidth >= 768 ? 2 : 1
}


// 错误处理
const handleError = (error: any) => {
	pageState.value.loading = false
	pageState.value.error = '加载失败，请稍后重试'
	console.error('Contents loading error:', error)
}

// 处理内容数据
const handleContentsData = (data: Array<InfoContent>) => {
	pageState.value.loading = false
	pageState.value.error = null
	
	if (pageState.value.currentPage === 1) {
		contentsList.value = []
	}
	
	// 直接赋值强类型数组
	contentsList.value = contentsList.value.concat(data)
	
	// 检查是否还有更多数据
	hasMore.value = data.length === pageState.value.pageSize
}

// 本地工具函数 - 只保留必要的辅助函数，内容相关 getter 可全部移除，模板直接用 content.xxx
// 保留分类/语言/格式化等工具
const formatRelativeTimeLocal = (dateString: string): string => {
  const key = formatRelativeTimeKey(dateString)
  const now = new Date()
  const date = new Date(dateString)
  const diff = now.getTime() - date.getTime()
  const seconds = Math.floor(diff / 1000)
  const minutes = Math.floor(seconds / 60)
  const hours = Math.floor(minutes / 60)
  const days = Math.floor(hours / 24)
  if (key === 'mt.time.daysAgo') return tt(key, { days })
  if (key === 'mt.time.hoursAgo') return tt(key, { hours })
  if (key === 'mt.time.minutesAgo') return tt(key, { minutes })
  return tt(key)
}

const getLanguageDisplayNameLocal = (languageCode: string): string => {
  return tt(languageCode)
}
const getQualityScoreTextLocal = (score: number): string => {
	// console.log(score)
	// return score.toString()
	return getQualityScoreText(score*100)
}
const getQualityScoreColorLocal = (score: number): string => {
	return getQualityScoreColor(score*100)
}


// 语言选择
const showLanguageSelector = () => {
	showLanguageModal.value = true
}

const hideLanguageSelector = () => {
	showLanguageModal.value = false
}

const selectLanguage = (language: LanguageData) => {
	currentLanguageCode.value = language.code
	currentLanguageName.value = getLanguageDisplayNameLocal(language.code)
	hideLanguageSelector()
}

// 排序选择
const showSortOptions = () => {
	showSortModal.value = true
}

const hideSortOptions = () => {
	showSortModal.value = false
}


// 排序选项类型定义，保证类型安全

// 排序选项转换，保证 v-for 传递类型安全
// const sortOptionsListTyped: Array<OptionItem> = SORT_OPTIONS.map(opt => ({
//   value: opt.value,
//   text: opt.text
// }))

// 加载内容数据 - 使用 executeAs 替代 supadb 组件
const loadContents = async () => {
	if (supa === null) return
	pageState.value.loading = true
	pageState.value.error = null
	try {
	let query = supa.from('ak_contents')
		.select('*,ak_contents_category_id_fkey(name_key)', {})
		.order('published_at', { ascending: false } as OrderOptions)
		// 应用分类筛选
		if (selectedCategoryId.value !== 'all') {
			query = query.eq('category_id', selectedCategoryId.value)
		}
		// 应用分页
		const start = (pageState.value.currentPage - 1) * pageState.value.pageSize
		const end = start + pageState.value.pageSize - 1
		query = query.range(start, end)
		const result = await query.executeAs<InfoContent>()
		if (result.data !== null && Array.isArray(result.data)) {
			handleContentsData(result.data as Array<InfoContent>)
		} else {
			throw new Error('Failed to load contents')
		}
	} catch (e) {
		handleError(e)
	}
}
const selectSortOption = async (option: OptionItem) => {
  currentSortOption.value = option.value
  sortOptionText.value = option.text
  hideSortOptions()
  pageState.value.currentPage = 1
  await loadContents()
}
// 分类选择
const selectCategory = async (category: CategoryData) => {
  selectedCategoryId.value = category.id
  pageState.value.currentPage = 1
  await loadContents()
}

const getCategoryName = (category: CategoryData):string => {
   const translations = category.translations;
   const name =  translations?.[0]?.name??'--';
   return name;
}

// 加载精选内容 - 使用 executeAs 替代模拟数据
const loadFeaturedContents = async () => {
	if (supa === null) return
	try {
		const result = await supa.from('ak_contents')
			.select('*', {})
			.eq('is_featured', true)
			.order('published_at', { ascending: false })
			.limit(5)
			.executeAs<Array<InfoContent>>()
		if (result.data !== null && Array.isArray(result.data)) {
			featuredContentsList.value = result.data as Array<InfoContent>
		}
	} catch (e) {
		console.error('Featured contents loading error:', e)
		featuredContentsList.value = []
	}
}

// 加载更多
const loadMore = async () => {
	if (loadingMore.value || !hasMore.value) return
	loadingMore.value = true
	pageState.value.currentPage += 1
	setTimeout(() => {
		loadContents().then(() => {
			loadingMore.value = false
		})
	}, 500)
}

// 刷新数据
const refreshData = async () => {
	pageState.value.currentPage = 1
	await loadContents()
}

// 重试加载
const retryLoad = async () => {
	pageState.value.error = null
	await loadContents()
}

// 导航函数
const navigateToDetail = (content: InfoContent) => {
	const contentId = content.id
	uni.navigateTo({
		url: `/pages/info/detail?id=${contentId}`
	})
}

const navigateToSearch = () => {
	uni.navigateTo({
		url: '/pages/info/search'
	})
}

const navigateToChat = () => {
	uni.navigateTo({
		url: '/pages/info/chat'
	})
}

const navigateToTopics = () => {
	uni.navigateTo({
		url: '/pages/info/topics'
	})
}

// 从数据库动态加载分类
const loadCategories = async () => {
  if (supa === null) return
  try {
	const lang = currentLanguageCode.value
	console.log(lang)
	const result = await supa
	  .from('ak_content_categories')
	  .select('*,translations:ak_content_category_translations(name)', {})
	  .eq('translations.language_code', lang)
	  .order('sort_order', { ascending: true })
	  .executeAs<CategoryData>()
	console.log(result)
	if (result.data !== null && Array.isArray(result.data)) {
	  categoriesList.value = result.data as CategoryData[]
	} else {
	  categoriesList.value = []
	}
  } catch (e) {
	console.error('加载分类失败:', e)
	categoriesList.value = []
  }
}

// 初始化数据
const initializeData = async () => {
	// 动态加载分类列表
	await loadCategories()

	// 初始化语言列表（强类型 LanguageData）
	languagesList.value = []
	for (let i: Int = 0; i < LANGUAGE_OPTIONS.length; i++) {
		const language: LanguageData = LANGUAGE_OPTIONS[i]
		languagesList.value.push(language)
	}

	// await loadContents()
	// await loadFeaturedContents()
}

// 生命周期
onMounted(() => {
	initializeData()
	handleResize()
})
</script>

<style>
/* uts-android 兼容性重构：
  1. 拆分所有嵌套选择器为扁平 class（如 .category-tab.is-active、.category-text.is-active）。
  2. 所有“最后一个”元素的 margin-right/margin-bottom 用 .is-last 控制，移除伪类。
  3. 移除所有 gap、flex-wrap、嵌套选择器、伪类等不兼容写法。
  4. 在注释中补充重构说明，便于后续维护。
*/
.info-home {
  flex: 1;
  background-color: #f8fafc;
}
.header {
  background-color: #ffffff;
  border-bottom-width: 1px;
  border-bottom-color: #e2e8f0;
  padding-top: 10px;
  padding-bottom: 10px;
}
.header-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
}
.title {
  font-size: 20px;
  font-weight: bold;
  color: #1f2937;
}
.header-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.action-btn {
  padding: 8px 12px;
  margin-left: 8px;
  background-color: #f1f5f9;
  border-radius: 20px;
}
.action-text {
  font-size: 14px;
  color: #475569;
}
.action-icon {
  font-size: 16px;
}
.category-section {
  background-color: #ffffff;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom-width: 1px;
  border-bottom-color: #e2e8f0;
}
/* 横向滚动兼容 UTS Android */
.category-scroll {
  height: 40px;
  display: flex;
  flex-direction: row;
  padding-left: 16px;
  padding-right: 16px;
  min-width: max-content;
}
.category-tab {
  flex: 0 0 auto;
  padding: 8px 16px;
  margin-right: 12px;
  background-color: #f8fafc;
  border-radius: 20px;
  border-width: 1px;
  border-color: #e2e8f0;
  white-space: nowrap;
}

.category-tab.is-active {
  background-color: #3b82f6;
  border-color: #3b82f6;
}
.category-tab.is-last {
  margin-right: 0;
}
.category-text {
  font-size: 14px;
  color: #64748b;
  white-space: nowrap;
}
.category-text.is-active {
  color: #ffffff;
}
.featured-section {
  background-color: #ffffff;
  margin-top: 8px;
  padding: 16px 0;
}
.section-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
  margin-bottom: 12px;
}
.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #1f2937;
}
.section-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.sort-btn {
  padding: 6px 12px;
  background-color: #f1f5f9;
  border-radius: 16px;
}
.sort-text {
  font-size: 12px;
  color: #475569;
}
.featured-scroll {
  height: 180px;
}
.featured-cards {
  display: flex;
  flex-direction: row;
  padding-left: 16px;
  padding-right: 16px;
}
.featured-card {
  background-color: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  margin-right: 12px;
  border-width: 1px;
  border-color: #e2e8f0;
}
.featured-card.is-last {
  margin-right: 0;
}
.card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.card-title {
  flex: 1;
  font-size: 16px;
  font-weight: bold;
  color: #1f2937;
  line-height: 22px;
}
.quality-badge {
  background-color: #10b981;
  border-radius: 12px;
  padding: 4px 8px;
  margin-left: 8px;
}
.quality-text {
  font-size: 12px;
  color: #ffffff;
}
.card-summary {
  font-size: 14px;
  color: #64748b;
  line-height: 20px;
  margin-bottom: 12px;
}
.card-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.card-author {
  font-size: 12px;
  color: #94a3b8;
}
.card-time {
  font-size: 12px;
  color: #94a3b8;
}
.content-section {
  background-color: #ffffff;
  margin-top: 8px;
  padding: 16px 0;
}
.loading-section {
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-text {
  font-size: 14px;
  color: #94a3b8;
}
.error-section {
  padding: 40px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.error-text {
  font-size: 14px;
  color: #ef4444;
  margin-bottom: 16px;
  text-align: center;
}
.retry-btn {
  background-color: #3b82f6;
  border-radius: 20px;
  padding: 8px 24px;
}
.retry-text {
  font-size: 14px;
  color: #ffffff;
}
.content-list {
  padding-left: 16px;
  padding-right: 16px;
}
.content-item {
  background-color: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  border-width: 1px;
  border-color: #e2e8f0;
}
.content-header {
  margin-bottom: 8px;
}
.content-title {
  font-size: 16px;
  font-weight: bold;
  color: #1f2937;
  line-height: 22px;
  margin-bottom: 4px;
}
.content-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.content-category {
  font-size: 12px;
  color: #3b82f6;
  background-color: #eff6ff;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 8px;
}
.content-time {
  font-size: 12px;
  color: #94a3b8;
}
.content-summary {
  font-size: 14px;
  color: #64748b;
  line-height: 20px;
  margin-bottom: 12px;
}
.content-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.content-stats {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.stat-item {
  font-size: 12px;
  color: #94a3b8;
  margin-right: 16px;
}
.stat-item.is-last {
  margin-right: 0;
}
.empty-section {
  padding: 60px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-text {
  font-size: 16px;
  color: #94a3b8;
  margin-bottom: 16px;
}
.refresh-btn {
  background-color: #3b82f6;
  border-radius: 20px;
  padding: 10px 24px;
}
.refresh-text {
  font-size: 14px;
  color: #ffffff;
}
.load-more-section {
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.load-more-btn {
  background-color: #f1f5f9;
  border-radius: 20px;
  padding: 10px 24px;
  border-width: 1px;
  border-color: #e2e8f0;
}
.load-more-text {
  font-size: 14px;
  color: #475569;
}
.loading-more {
  padding: 10px 24px;
}
.loading-more-text {
  font-size: 14px;
  color: #94a3b8;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.language-modal, .sort-modal {
  background-color: #ffffff;
  border-radius: 16px;
  margin: 20px;
  max-height: 500px;
  min-width: 280px;
}
.modal-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom-width: 1px;
  border-bottom-color: #e2e8f0;
}
.modal-title {
  font-size: 18px;
  font-weight: bold;
  color: #1f2937;
}
.modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background-color: #f1f5f9;
}
.close-text {
  font-size: 20px;
  color: #64748b;
}
.language-list, .sort-list {
  max-height: 400px;
}
.language-item, .sort-item {
  padding: 16px 20px;
  border-bottom-width: 1px;
  border-bottom-color: #f1f5f9;
}
.language-item.is-active, .sort-item.is-active {
  background-color: #eff6ff;
}
.language-name {
  font-size: 16px;
  color: #1f2937;
  margin-bottom: 4px;
}
.language-name.is-active {
  color: #3b82f6;
}
.language-native {
  font-size: 14px;
  color: #64748b;
}
</style>
