{{template "user/settings/layout_head" (dict "ctxData" . "pageClass" "user settings appstore")}}
{{define "user/settings/appstore_body"}}
<meta name="_csrf" content="{{.CsrfToken}}">

<style>
/* 应用商店卡片样式 - 强制覆盖 */
.app-store-grid .ui.card {
	height: 380px !important;
	display: flex !important;
	flex-direction: column !important;
	margin: 0.5em 0 !important;
}

.app-store-grid .ui.card .image {
	height: 140px !important;
	background: #f8f9fa !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	flex-shrink: 0 !important;
}

.app-store-grid .ui.card .image img {
	max-width: 90px !important;
	max-height: 90px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
}

.app-store-grid .ui.card .content {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	padding: 1em !important;
}

.app-store-grid .ui.card .content .header {
	font-size: 1.1em !important;
	margin-bottom: 0.5em !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.3em !important;
}

.app-store-grid .ui.card .content .meta {
	margin-bottom: 0.5em !important;
	font-size: 0.9em !important;
}

.app-store-grid .ui.card .content .description {
	flex: 1 !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	text-overflow: ellipsis !important;
	line-height: 1.4em !important;
	max-height: 4.2em !important;
	font-size: 0.9em !important;
	color: #666 !important;
}

.app-store-grid .ui.card .content .extra {
	border-top: 1px solid rgba(34,36,38,.1) !important;
	margin-top: 0.5em !important;
	padding-top: 0.5em !important;
	flex-shrink: 0 !important;
}

.app-store-grid .ui.card .extra.content {
	padding: 0.5em 1em !important;
	flex-shrink: 0 !important;
	border-top: 1px solid rgba(34,36,38,.1) !important;
}

.app-store-grid .ui.card .ui.mini.label {
	font-size: 0.7em !important;
}

.app-store-grid .ui.card .ui.compact.button {
	padding: 0.5em 0.8em !important;
	font-size: 14px !important;
}

.app-store-grid .ui.card .ui.button,
.app-store-grid .ui.card .ui.buttons .button {
    font-size: 14px !important;
}

.app-store-grid .ui.buttons {
    font-size: 14px !important;
}

/* 确保列布局正确 */
.app-store-grid.ui.grid > .column {
	padding: 0.5rem !important;
}

/* 基本的modal显示样式 */
.ui.modal {
	display: none;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 1000 !important;
}

.ui.modal[style*="display: block"] {
	display: block !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
	.app-store-grid .ui.card {
		height: auto !important;
		min-height: 300px !important;
	}
	
	.app-store-grid .ui.card .image {
		height: 100px !important;
	}
	
	.app-store-grid .ui.card .content .header {
		font-size: 1em !important;
	}
}

/* 修复应用详情页面中网站和仓库按钮的文字对齐问题 */
#app-details-modal .ui.buttons .ui.button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 2.5em !important;
	line-height: 1 !important;
}

#app-details-modal .ui.buttons .ui.button i.icon {
	margin-right: 0.5em !important;
	line-height: 1 !important;
}

#app-details-modal .ui.buttons .ui.button:not(.icon) {
	padding-left: 1em !important;
	padding-right: 1em !important;
}
</style>

<div class="ui stackable grid">
	<div class="sixteen wide column">
		<div class="ui segment">
			<div class="ui stackable grid">
				<div class="sixteen wide column">
					<h2 class="ui header">
						<i class="shopping cart icon"></i>
						<div class="content" style="width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5rem;">
							<div>
								<div class="ui buttons" style="margin-right: .5em;">
									<button class="ui primary button" id="btn-source-local">本地应用商店</button>
									<div class="or"></div>
									<button class="ui button" id="btn-source-devstar">DevStar 应用商店</button>
								</div>
							</div>
							<div></div>
						</div>
					</h2>
				</div>
			</div>

			<!-- Search and Filter Bar -->
			<div class="ui stackable grid">
				<div class="sixteen wide column">
					<div class="ui fluid action input">
						<input type="text" placeholder="{{ctx.Locale.Tr "appstore.search_placeholder"}}" id="app-search">
						<button class="ui button" onclick="searchApps()">
							<i class="search icon"></i>
						</button>
					</div>
				</div>
			</div>

			<!-- 添加应用按钮 -->
			<button class="ui primary button" style="margin-bottom:1em;" onclick="showAddAppModal()">添加应用</button>

			<div class="ui stackable grid" style="margin-top: 1rem;">
				<div class="four wide column">
					<!-- Category Filter -->
					<div class="ui vertical fluid menu">
						<div class="header item">{{ctx.Locale.Tr "appstore.category_all"}}</div>
						<a class="item active" data-category="all">
							<i class="grid layout icon"></i>
							{{ctx.Locale.Tr "appstore.category_all"}}
						</a>
						<a class="item" data-category="web-server">
							<i class="server icon"></i>
							{{ctx.Locale.Tr "appstore.category_web_server"}}
						</a>
						<a class="item" data-category="database">
							<i class="database icon"></i>
							{{ctx.Locale.Tr "appstore.category_database"}}
						</a>
						<a class="item" data-category="development">
							<i class="code icon"></i>
							{{ctx.Locale.Tr "appstore.category_development"}}
						</a>
						<a class="item" data-category="monitoring">
							<i class="chart line icon"></i>
							{{ctx.Locale.Tr "appstore.category_monitoring"}}
						</a>
						<a class="item" data-category="other">
							<i class="ellipsis horizontal icon"></i>
							{{ctx.Locale.Tr "appstore.category_other"}}
						</a>
					</div>

					<!-- Deployment Type Filter -->
					<div class="ui vertical fluid menu deployment-filter" style="margin-top: 1rem;">
						<div class="header item">{{ctx.Locale.Tr "appstore.deployment_type"}}</div>
						<a class="item active" data-deployment="kubernetes">
							<i class="kubernetes icon"></i>
							{{ctx.Locale.Tr "appstore.deployment_kubernetes"}}
						</a>
						<a class="item" data-deployment="docker">
							<i class="docker icon"></i>
							{{ctx.Locale.Tr "appstore.deployment_docker"}}
						</a>
					</div>
				</div>

				<div class="twelve wide column">
					<!-- Apps Grid -->
					<div class="ui stackable three column grid app-store-grid" id="apps-grid">
						<!-- App cards will be loaded here -->
						<div class="sixteen wide column">
							<div class="ui placeholder segment">
								<div class="ui icon header">
									<i class="spinner loading icon"></i>
									{{ctx.Locale.Tr "appstore.loading"}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- App Installation Modal -->
<div class="ui modal" id="install-modal">
	<div class="header">
		<span id="install-app-name"></span>
	</div>
	<div class="content">
		<div class="description">
			<form class="ui form" id="install-form">
				<!-- Configuration fields will be dynamically generated here -->
				<div id="install-dynamic-fields"></div>
				<h4 class="ui dividing header" style="margin-top:1em;">安装位置</h4>
				<div id="install-target-inline">
					<div class="grouped fields">
						<label>选择安装位置</label>
						{{if .IsAdmin}}
						<div class="field">
							<div class="ui radio checkbox">
								<input type="radio" name="installTargetRadio" value="local" checked>
								<label>默认位置</label>
							</div>
						</div>
						{{end}}
						<div class="field">
							<div class="ui radio checkbox">
								<input type="radio" name="installTargetRadio" value="kubeconfig" {{if not .IsAdmin}}checked{{end}}>
								<label>自定义位置（Kubernetes URL + Token）</label>
							</div>
						</div>
					</div>
					<div id="k8s-credential-fields" style="display:none;">
						<div class="field">
							<label>Kubernetes API 地址</label>
							<input type="text" id="k8s-url" placeholder="例如：https://your-cluster:6443">
						</div>
						<div class="field">
							<label>Bearer Token</label>
							<textarea id="k8s-token" rows="4" placeholder="粘贴访问该集群的 Bearer Token"></textarea>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="actions">
		<div class="ui button" onclick="closeInstallModal()">{{ctx.Locale.Tr "cancel"}}</div>
		<div class="ui primary button" onclick="installApp()">{{ctx.Locale.Tr "appstore.install"}}</div>
	</div>
</div>

<!-- App Details Modal -->
<div class="ui modal" id="app-details-modal">
	<div class="header">
		<span id="details-app-name"></span>
	</div>
	<div class="content">
		<div class="ui stackable grid">
			<div class="eight wide column">
				<div class="ui segment">
					<h4 class="ui header">运行状态</h4>
					<div id="details-status">
						<span class="ui grey text">正在获取状态...</span>
					</div>
					<div class="ui divider"></div>
					<h4 class="ui header">{{ctx.Locale.Tr "appstore.description"}}</h4>
					<p id="details-description"></p>
					
					<h4 class="ui header">{{ctx.Locale.Tr "appstore.requirements"}}</h4>
					<div id="details-requirements"></div>
					
					<h4 class="ui header">{{ctx.Locale.Tr "appstore.tags"}}</h4>
					<div id="details-tags"></div>
				</div>
			</div>
			<div class="eight wide column">
				<div class="ui segment">
					<h4 class="ui header">{{ctx.Locale.Tr "appstore.version"}}</h4>
					<p id="details-version"></p>
					
					<h4 class="ui header">{{ctx.Locale.Tr "appstore.author"}}</h4>
					<p id="details-author"></p>
					
					<h4 class="ui header">{{ctx.Locale.Tr "appstore.license"}}</h4>
					<p id="details-license"></p>
					
					<div class="ui buttons">
						<a class="ui button" id="details-website" target="_blank">
							<i class="external alternate icon"></i>
							{{ctx.Locale.Tr "appstore.website"}}
						</a>
						<a class="ui button" id="details-repository" target="_blank">
							<i class="github icon"></i>
							{{ctx.Locale.Tr "appstore.repository"}}
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="actions">
		<div class="ui button" onclick="closeDetailsModal()">{{ctx.Locale.Tr "cancel"}}</div>
		<div class="ui primary button" onclick="updateInstalledAppFromDetails()">更新应用</div>
		<div class="ui orange button" id="pause-resume-btn" onclick="togglePauseResumeFromDetails()">暂停应用</div>
		<div class="ui red button" onclick="uninstallCurrentAppFromDetails()">卸载应用</div>
		<div class="ui red button" id="delete-app-btn" onclick="deleteAppFromDetails()">删除应用</div>
	</div>
</div>

<!-- 添加应用模态框 -->
<div class="ui modal" id="add-app-modal">
  <div class="header">添加应用</div>
  <div class="content">
    <textarea id="add-app-json" rows="12" style="width:100%;" placeholder="粘贴应用JSON内容"></textarea>
  </div>
  <div class="actions">
    <div class="ui button" onclick="closeAddAppModal()">取消</div>
    <div class="ui primary button" onclick="submitAddApp()">提交</div>
  </div>
</div>

<!-- 安装位置设置 Modal -->
<!-- 已合并到安装窗口，移除原独立 Modal -->

<script>
let allApps = [];
let filteredApps = [];
let currentApp = null;
let currentAppStatus = null; // 存储当前应用的运行状态
let storeSource = 'local'; // local | devstar
// 安装位置：local | remote
let installTarget = 'local';
let installK8sURL = '';
let installK8sToken = '';

// Initialize the page
document.addEventListener('DOMContentLoaded', function() {
	setupSourceToggle();
	setupInstallTargetUI();
	loadAppsFromAPI();
	setupEventListeners();
});

function setupSourceToggle() {
	const btnLocal = document.getElementById('btn-source-local');
	const btnDev = document.getElementById('btn-source-devstar');
	const applyActive = () => {
		if (storeSource === 'local') {
			btnLocal.classList.add('primary');
			btnDev.classList.remove('primary');
		} else {
			btnDev.classList.add('primary');
			btnLocal.classList.remove('primary');
		}
	};
	btnLocal.addEventListener('click', () => {
		storeSource = 'local';
		applyActive();
		loadAppsFromAPI();
	});
	btnDev.addEventListener('click', () => {
		storeSource = 'devstar';
		applyActive();
		loadAppsFromAPI();
	});
	applyActive();
}

function setupInstallTargetUI() {
	// 使用原生JavaScript初始化radio button事件（安装窗口内）
	const radioButtons = document.querySelectorAll('#install-modal input[name="installTargetRadio"]');
	radioButtons.forEach(radio => {
		radio.addEventListener('change', function() {
			const kubeconfigFields = document.querySelector('#install-modal #k8s-credential-fields');
			if (kubeconfigFields) {
				kubeconfigFields.style.display = (this.value === 'kubeconfig') ? 'block' : 'none';
			}
			// 同步到原有全局变量，保持功能不变
			installTarget = this.value;
		});
	});
	// Kubernetes URL/Token 变化时，同步到全局变量
	const kcContentEl = document.querySelector('#install-modal #k8s-url');
	if (kcContentEl) {
		kcContentEl.addEventListener('input', function() {
			installK8sURL = this.value.trim();
		});
	}
	const kcContextEl = document.querySelector('#install-modal #k8s-token');
	if (kcContextEl) {
		kcContextEl.addEventListener('input', function() {
			installK8sToken = this.value.trim();
		});
	}
}

// 旧的安装位置弹窗相关函数已移除：openInstallTargetModal、closeInstallTargetModal、saveInstallTarget

function setupEventListeners() {
	// Category filter
	document.querySelectorAll('[data-category]').forEach(item => {
		item.addEventListener('click', function() {
			document.querySelectorAll('[data-category]').forEach(i => i.classList.remove('active'));
			this.classList.add('active');
			filterApps();
		});
	});

	// Deployment filter
	document.querySelectorAll('[data-deployment]').forEach(item => {
		item.addEventListener('click', function() {
			document.querySelectorAll('[data-deployment]').forEach(i => i.classList.remove('active'));
			this.classList.add('active');
			filterApps();
		});
	});

	// Search input
	document.getElementById('app-search').addEventListener('input', function() {
		filterApps();
	});
}

async function loadAppsFromAPI() {
	try {
		// 构建查询参数
		const params = new URLSearchParams();
		if (storeSource === 'devstar') {
			params.append('source', 'devstar');
		}
		
		// 添加过滤参数
		const selectedCategory = document.querySelector('[data-category].active')?.dataset.category;
		const selectedDeployment = document.querySelector('[data-deployment].active')?.dataset.deployment;
		const searchTerm = document.getElementById('app-search').value;
		
		if (selectedCategory && selectedCategory !== 'all') {
			params.append('category', selectedCategory);
		}
		if (selectedDeployment && selectedDeployment !== 'all') {
			params.append('deployment', selectedDeployment);
		}
		if (searchTerm.trim()) {
			params.append('search', searchTerm);
		}
		
		const url = `/user/settings/appstore/api/apps?${params.toString()}`;
		const response = await fetch(url);
		if (!response.ok) {
			throw new Error(`HTTP error! status: ${response.status}`);
		}
		const data = await response.json();
		allApps = data.apps || [];
		filteredApps = [...allApps];
		loadApps();
	} catch (error) {
		console.error('Error loading apps:', error);
		showError('Failed to load apps');
	}
}

function showError(message) {
	const grid = document.getElementById('apps-grid');
	grid.innerHTML = `
		<div class="sixteen wide column">
			<div class="ui negative message">
				<div class="header">Error</div>
				<p>${message}</p>
			</div>
		</div>
	`;
}

function loadApps() {
	const grid = document.getElementById('apps-grid');
	grid.innerHTML = '';

	if (filteredApps.length === 0) {
		grid.innerHTML = `
			<div class="sixteen wide column">
				<div class="ui icon header">
					<i class="search icon"></i>
					{{ctx.Locale.Tr "appstore.no_apps"}}
				</div>
			</div>
		`;
		return;
	}

	filteredApps.forEach(app => {
		const card = createAppCard(app);
		grid.appendChild(card);
		// 异步检查应用安装状态
		checkAppInstallStatus(app);
	});
}

function createAppCard(app) {
	const column = document.createElement('div');
	column.className = 'column';
	
	// Create badges for official and verified apps
	let badges = '';
	if (app.isOfficial || app.is_official) {
		badges += '<span class="ui blue label">Official</span> ';
	}
	if (app.isVerified || app.is_verified) {
		badges += '<span class="ui green label">Verified</span> ';
	}
	
	// Get deployment type, prioritize deployment_type field
	let deploymentType = 'docker';
	if (app.deployment_type) {
		deploymentType = app.deployment_type;
	} else if (app.deployment) {
		deploymentType = app.deployment;
	} else if (app.Deploy && app.Deploy.Type) {
		deploymentType = app.Deploy.Type;
	} else if (app.deploy && app.deploy.type) {
		deploymentType = app.deploy.type;
	}
	
	// Get install count
	const installCount = app.installCount || app.install_count || 0;
	
	// Create deployment type label with appropriate styling
	let deploymentLabel = '';
	if (deploymentType === 'both') {
		deploymentLabel = '<span class="ui mini orange label">Docker & K8s</span>';
	} else if (deploymentType === 'kubernetes') {
		deploymentLabel = '<span class="ui mini blue label">Kubernetes</span>';
	} else {
		deploymentLabel = '<span class="ui mini green label">Docker</span>';
	}
	
	// 初始显示安装按钮，后续异步检查状态
	const actionButton = `<button class="ui primary compact button" onclick="showInstallModal('${app.id || app.app_id}')" id="install-btn-${app.id || app.app_id}">
		<i class="download icon"></i>
		安装
	</button>`;

	column.innerHTML = `
		<div class="ui fluid card">
			<div class="image">
				<img src="${app.icon || '/assets/img/logo.png'}" alt="${app.name}" onerror="this.src='/assets/img/logo.png'">
			</div>
			<div class="content">
				<div class="header" title="${app.name}">${app.name}</div>
				<div class="meta">
					<span class="date">v${app.version}</span>
					<span class="right floated">
						${deploymentLabel}
					</span>
				</div>
				<div class="description" title="${app.description || 'No description available'}">
					${truncateText(app.description || 'No description available', 100)}
				</div>
				<div class="extra">
					${badges}
					<span class="ui mini label">
						<i class="download icon"></i>
						${installCount} installs
					</span>
				</div>
			</div>
			<div class="extra content">
				<div class="ui two buttons">
					<button class="ui basic compact button" onclick="showAppDetails('${app.id || app.app_id}')">
						<i class="info circle icon"></i>
						详情
					</button>
					${actionButton}
				</div>
			</div>
		</div>
	`;
	
	return column;
}

// 文本截断函数
function truncateText(text, maxLength) {
	if (text.length <= maxLength) {
		return text;
	}
	return text.substring(0, maxLength) + '...';
}

function filterApps() {
	const selectedCategory = document.querySelector('[data-category].active').dataset.category;
	const selectedDeployment = document.querySelector('[data-deployment].active').dataset.deployment;
	const searchTerm = document.getElementById('app-search').value.toLowerCase();

	filteredApps = allApps.filter(app => {
		const categoryMatch = selectedCategory === 'all' || app.category === selectedCategory;
		
		// Check deployment type from different sources, prioritize deployment_type field
		let appDeployment = 'docker';
		if (app.deployment_type) {
			appDeployment = app.deployment_type;
		} else if (app.deployment) {
			appDeployment = app.deployment;
		} else if (app.Deploy && app.Deploy.Type) {
			appDeployment = app.Deploy.Type;
		} else if (app.deploy && app.deploy.type) {
			appDeployment = app.deploy.type;
		}
		
		// Handle deployment type matching, including 'both' type
		let deploymentMatch = false;
		if (appDeployment === 'both') {
			// 'both' type matches both 'docker' and 'kubernetes' filters
			deploymentMatch = true;
		} else {
			deploymentMatch = appDeployment === selectedDeployment;
		}
		
		// Search in name, description and tags
		const searchMatch = app.name.toLowerCase().includes(searchTerm) || 
						   (app.description && app.description.toLowerCase().includes(searchTerm)) ||
						   (app.tags && app.tags.some && app.tags.some(tag => tag.toLowerCase().includes(searchTerm))) ||
						   (app.Tags && app.Tags.some && app.Tags.some(tag => tag.toLowerCase().includes(searchTerm)));
		
		return categoryMatch && deploymentMatch && searchMatch;
	});

	loadApps();
}

function searchApps() {
	filterApps();
}

function showAppDetails(appId) {
	const app = allApps.find(a => a.id === appId || a.app_id === appId);
	if (!app) return;

	currentApp = app;
	
	document.getElementById('details-app-name').textContent = app.name;
	document.getElementById('details-description').textContent = app.description || 'No description available';
	document.getElementById('details-version').textContent = app.version;
	document.getElementById('details-author').textContent = app.author || 'Unknown';
	document.getElementById('details-license').textContent = app.license || 'Unknown';
	
	// Requirements
	const requirements = document.getElementById('details-requirements');
	if (app.requirements) {
		requirements.innerHTML = `
			<p><strong>系统要求:</strong></p>
			<ul>
				<li>内存: ${app.requirements.min_memory || app.requirements.minMemory || 'Unknown'}</li>
				<li>CPU: ${app.requirements.min_cpu || app.requirements.minCPU || 'Unknown'}</li>
				<li>存储: ${app.requirements.min_storage || app.requirements.minStorage || 'Unknown'}</li>
			</ul>
		`;
	} else {
		requirements.innerHTML = '<p>No requirements specified</p>';
	}
	
	// Tags
	const tags = document.getElementById('details-tags');
	if (app.tags && app.tags.length > 0) {
		tags.innerHTML = app.tags.map(tag => `<span class="ui label">${tag}</span>`).join('');
	} else if (app.Tags && app.Tags.length > 0) {
		tags.innerHTML = app.Tags.map(tag => `<span class="ui label">${tag}</span>`).join('');
	} else {
		tags.innerHTML = '<p>No tags specified</p>';
	}
	
	// Repository
	if (app.repository) {
		document.getElementById('details-repository').href = app.repository;
		document.getElementById('details-repository').style.display = 'inline-block';
	} else {
		document.getElementById('details-repository').style.display = 'none';
	}
	
	// 显示modal
	const modal = document.getElementById('app-details-modal');
	if (modal) {
		modal.style.display = 'block';
	}

	// 初始化按钮显示状态（在状态加载完成前先隐藏所有操作按钮）
	updateActionButtonsVisibility();
	
	// 拉取并展示运行状态
	loadAndRenderAppStatus(app);
}

function showInstallModal(appId) {
	const app = allApps.find(a => a.id === appId || a.app_id === appId);
	if (!app) return;

	currentApp = app;
	document.getElementById('install-app-name').textContent = app.name;

	// Generate configuration form
	const form = document.getElementById('install-form');
	const dyn = document.getElementById('install-dynamic-fields');
	dyn.innerHTML = '';
	// 兼容后端 config/schema 为 null 的情况
	let configSchema = null;
	let configDefaults = null;
	if (app.config && app.config.schema) {
		configSchema = app.config.schema;
		configDefaults = app.config.default || {};
	} else if (app.Config && app.Config.Schema) {
		configSchema = app.Config.Schema;
		configDefaults = app.Config.Default || {};
	}
	if (!configSchema || typeof configSchema !== 'object') {
		dyn.innerHTML = `
			<div class="field">
				<label>port <span style="color: red;">*</span></label>
				<input type="number" name="port" value="80" required>
			</div>
		`;
	} else {
		Object.entries(configSchema).forEach(([key, config]) => {
			if (!config) return;
			let field = document.createElement('div');
			field.className = 'field';
			let inputHtml = '';
			const defaultValue = configDefaults[key] || config.default || '';
			if (config.type === 'int') {
				const min = config.min || '';
				const max = config.max || '';
				inputHtml = `<input type="number" name="${key}" value="${defaultValue}" ${config.required ? 'required' : ''} ${min ? 'min="' + min + '"' : ''} ${max ? 'max="' + max + '"' : ''}>`;
			} else if (config.type === 'string') {
				inputHtml = `<input type="text" name="${key}" value="${defaultValue}" ${config.required ? 'required' : ''}>`;
			} else if (config.type === 'bool' || config.type === 'boolean') {
				inputHtml = `
					<div class="ui checkbox">
						<input type="checkbox" name="${key}" ${defaultValue ? 'checked' : ''}>
						<label></label>
					</div>
				`;
			} else if (config.type === 'select' && config.options) {
				let optionsHtml = '';
				config.options.forEach(option => {
					const selected = option === defaultValue ? 'selected' : '';
					optionsHtml += `<option value="${option}" ${selected}>${option}</option>`;
				});
				inputHtml = `<select name="${key}" class="ui dropdown" ${config.required ? 'required' : ''}>${optionsHtml}</select>`;
			} else {
				inputHtml = `<input type="text" name="${key}" value="${defaultValue}" ${config.required ? 'required' : ''}>`;
			}
			field.innerHTML = `
				<label>${key} ${config.required ? '<span style="color: red;">*</span>' : ''}</label>
				${config.description ? `<div class="ui small text">${config.description}</div>` : ''}
				${inputHtml}
			`;
			dyn.appendChild(field);
		});
		setTimeout(() => {
			const dropdowns = form.querySelectorAll('.ui.dropdown');
			dropdowns.forEach(() => {});
			const checkboxes = form.querySelectorAll('.ui.checkbox input[type="checkbox"]');
			checkboxes.forEach(() => {});
		}, 100);
	}
	// 追加安装位置区块已保留在模板中，这里只同步状态
	const radios = document.querySelectorAll('#install-modal input[name="installTargetRadio"]');
	radios.forEach(r => { r.checked = (r.value === installTarget); });
	const kubeconfigFields = document.querySelector('#install-modal #k8s-credential-fields');
	if (kubeconfigFields) {
		kubeconfigFields.style.display = (installTarget === 'kubeconfig') ? 'block' : 'none';
	}
	const kcContent = document.querySelector('#install-modal #k8s-url');
	const kcContext = document.querySelector('#install-modal #k8s-token');
	if (kcContent) kcContent.value = installK8sURL || '';
	if (kcContext) kcContext.value = installK8sToken || '';

	const modal = document.getElementById('install-modal');
	if (modal) {
		modal.style.display = 'block';
	}
}

function closeInstallModal() {
	// 隐藏modal
	const modal = document.getElementById('install-modal');
	if (modal) {
		modal.style.display = 'none';
	}
}

function closeDetailsModal() {
	// 隐藏modal
	const modal = document.getElementById('app-details-modal');
	if (modal) {
		modal.style.display = 'none';
	}
}

function showInstallModalFromDetails() {
	if (currentApp) {
		closeDetailsModal();
		showInstallModal(currentApp.id || currentApp.app_id);
	}
}

// 更新应用（从详情弹窗触发）
async function updateInstalledAppFromDetails() {
	if (!currentApp) return;
	
	// 关闭详情弹窗，打开更新弹窗（类似安装）
	closeDetailsModal();
	showUpdateModal(currentApp.id || currentApp.app_id);
}

// 显示更新弹窗
function showUpdateModal(appId) {
	const app = allApps.find(a => a.id === appId || a.app_id === appId);
	if (!app) return;

	currentApp = app;
	document.getElementById('install-app-name').textContent = app.name + ' - 更新';

	// 生成配置表单（重用安装的逻辑）
	const form = document.getElementById('install-form');
	const dyn = document.getElementById('install-dynamic-fields');
	dyn.innerHTML = '';
	
	// 配置表单生成逻辑（与 showInstallModal 相同）
	let configSchema = null;
	let configDefaults = null;
	if (app.config && app.config.schema) {
		configSchema = app.config.schema;
		configDefaults = app.config.default || {};
	} else if (app.Config && app.Config.Schema) {
		configSchema = app.Config.Schema;
		configDefaults = app.Config.Default || {};
	}
	if (!configSchema || typeof configSchema !== 'object') {
		dyn.innerHTML = `
			<div class="field">
				<label>port <span style="color: red;">*</span></label>
				<input type="number" name="port" value="80" required>
			</div>
		`;
	} else {
		Object.entries(configSchema).forEach(([key, config]) => {
			if (!config) return;
			let field = document.createElement('div');
			field.className = 'field';
			let inputHtml = '';
			const defaultValue = configDefaults[key] || config.default || '';
			if (config.type === 'int') {
				const min = config.min || '';
				const max = config.max || '';
				inputHtml = `<input type="number" name="${key}" value="${defaultValue}" ${config.required ? 'required' : ''} ${min ? 'min="' + min + '"' : ''} ${max ? 'max="' + max + '"' : ''}>`;
			} else if (config.type === 'string') {
				inputHtml = `<input type="text" name="${key}" value="${defaultValue}" ${config.required ? 'required' : ''}">`;
			} else if (config.type === 'bool' || config.type === 'boolean') {
				inputHtml = `
					<div class="ui checkbox">
						<input type="checkbox" name="${key}" ${defaultValue ? 'checked' : ''}>
						<label></label>
					</div>
				`;
			} else if (config.type === 'select' && config.options) {
				let optionsHtml = '';
				config.options.forEach(option => {
					const selected = option === defaultValue ? 'selected' : '';
					optionsHtml += `<option value="${option}" ${selected}>${option}</option>`;
				});
				inputHtml = `<select name="${key}" class="ui dropdown" ${config.required ? 'required' : ''}>${optionsHtml}</select>`;
			} else {
				inputHtml = `<input type="text" name="${key}" value="${defaultValue}" ${config.required ? 'required' : ''}">`;
			}
			field.innerHTML = `
				<label>${key} ${config.required ? '<span style="color: red;">*</span>' : ''}</label>
				${config.description ? `<div class="ui small text">${config.description}</div>` : ''}
				${inputHtml}
			`;
			dyn.appendChild(field);
		});
	}

	// 设置安装位置表单
	const radios = document.querySelectorAll('#install-modal input[name="installTargetRadio"]');
	radios.forEach(r => { r.checked = (r.value === installTarget); });
	const kubeconfigFields = document.querySelector('#install-modal #k8s-credential-fields');
	if (kubeconfigFields) {
		kubeconfigFields.style.display = (installTarget === 'kubeconfig') ? 'block' : 'none';
	}
	const kcContent = document.querySelector('#install-modal #k8s-url');
	const kcContext = document.querySelector('#install-modal #k8s-token');
	if (kcContent) kcContent.value = installK8sURL || '';
	if (kcContext) kcContext.value = installK8sToken || '';

	// 修改安装按钮文字为"更新"
	const installBtn = document.querySelector('#install-modal .ui.primary.button[onclick="installApp()"]');
	if (installBtn) {
		installBtn.textContent = '更新应用';
		installBtn.onclick = updateApp;
	}

	const modal = document.getElementById('install-modal');
	if (modal) {
		modal.style.display = 'block';
	}
}

// 更新应用（表单提交）
function updateApp() {
	if (!currentApp) return;
	const form = document.getElementById('install-form');
	const formData = new FormData(form);
	const config = {};
	for (let [key, value] of formData.entries()) {
		const input = form.querySelector(`[name="${key}"]`);
		if (input && input.type === 'checkbox') {
			config[key] = input.checked;
		} else if (input && input.type === 'number') {
			config[key] = parseInt(value) || 0;
		} else {
			config[key] = value;
		}
	}
	const appId = currentApp.id || currentApp.app_id;
	const currentDeploymentFilter = document.querySelector('.deployment-filter .active');
	const deploymentType = currentDeploymentFilter?.getAttribute('data-deployment');
	
	// 从安装窗口读取安装位置
	const selectedTarget = document.querySelector('#install-modal input[name="installTargetRadio"]:checked');
	installTarget = selectedTarget ? selectedTarget.value : 'local';
	if (installTarget === 'kubeconfig') {
		const kcContentEl = document.querySelector('#install-modal #k8s-url');
		const kcContextEl = document.querySelector('#install-modal #k8s-token');
		installK8sURL = kcContentEl ? kcContentEl.value.trim() : '';
		installK8sToken = kcContextEl ? kcContextEl.value.trim() : '';
		if (!installK8sURL || !installK8sToken) {
			alert('请输入 Kubernetes API 地址和 Token');
			return;
		}
		config.deploy = { type: 'kubernetes' };
	} else {
		if (deploymentType === 'docker') {
			config.deploy = { type: 'docker' };
		} else if (deploymentType === 'kubernetes') {
			config.deploy = { type: 'kubernetes' };
		} else {
			// 回退到 docker 作为默认选择
			config.deploy = { type: 'docker' };
		}
	}
	
	// 创建表单提交到更新路由
	const updateForm = document.createElement('form');
	updateForm.method = 'POST';
	updateForm.action = `/user/settings/appstore/update/${appId}`;
	
	const csrfInput = document.createElement('input');
	csrfInput.type = 'hidden';
	csrfInput.name = '_csrf';
	csrfInput.value = document.querySelector('meta[name="_csrf"]')?.content || '';
	updateForm.appendChild(csrfInput);
	
	const appIdInput = document.createElement('input');
	appIdInput.type = 'hidden';
	appIdInput.name = 'app_id';
	appIdInput.value = appId;
	updateForm.appendChild(appIdInput);
	
	const configInput = document.createElement('input');
	configInput.type = 'hidden';
	configInput.name = 'config';
	configInput.value = JSON.stringify(config);
	updateForm.appendChild(configInput);
	
	const targetInput = document.createElement('input');
	targetInput.type = 'hidden';
	targetInput.name = 'install_target';
	targetInput.value = installTarget;
	updateForm.appendChild(targetInput);
	
	const redirectInput = document.createElement('input');
	redirectInput.type = 'hidden';
	redirectInput.name = 'redirect_to';
	redirectInput.value = window.location.pathname;
	updateForm.appendChild(redirectInput);
	
	if (installTarget === 'kubeconfig') {
		const kcInput = document.createElement('input');
		kcInput.type = 'hidden';
		kcInput.name = 'k8s_url';
		kcInput.value = installK8sURL;
		updateForm.appendChild(kcInput);
		
		const kctxInput = document.createElement('input');
		kctxInput.type = 'hidden';
		kctxInput.name = 'k8s_token';
		kctxInput.value = installK8sToken;
		updateForm.appendChild(kctxInput);
	}
	
	document.body.appendChild(updateForm);
	updateForm.submit();
	closeInstallModal();
}

// 检查应用安装状态并更新按钮
async function checkAppInstallStatus(app) {
	const appId = app.id || app.app_id;
	const installBtn = document.getElementById(`install-btn-${appId}`);
	if (!installBtn) return;

	try {
		const resp = await fetch(`/user/settings/appstore/api/status/${appId}`);
		if (resp.ok) {
			const data = await resp.json();
			const phase = data.phase || data.status?.phase || 'Unknown';
			const replicas = data.replicas ?? data.status?.replicas ?? 0;
			const readyReplicas = data.readyReplicas ?? data.status?.readyReplicas ?? 0;
			
			// 判断是否已安装（包括暂停状态）
			const isInstalled = phase !== 'Not Installed' && phase !== 'Unknown';
			
			if (isInstalled) {
				installBtn.className = 'ui green compact button disabled';
				installBtn.innerHTML = '<i class="check icon"></i>已安装';
				installBtn.onclick = null;
			}
		}
	} catch (e) {
		// 状态检查失败，保持安装按钮不变
		console.log('Failed to check app status:', e);
	}
}

// 卸载应用（从详情弹窗触发）
function uninstallCurrentAppFromDetails() {
	if (!currentApp) return;
	const appId = currentApp.id || currentApp.app_id;
	const uninstallForm = document.createElement('form');
	uninstallForm.method = 'POST';
	uninstallForm.action = `/user/settings/appstore/uninstall/${appId}`;
	const csrfInput = document.createElement('input');
	csrfInput.type = 'hidden';
	csrfInput.name = '_csrf';
	csrfInput.value = document.querySelector('meta[name="_csrf"]')?.content || '';
	uninstallForm.appendChild(csrfInput);
	const appIdInput = document.createElement('input');
	appIdInput.type = 'hidden';
	appIdInput.name = 'app_id';
	appIdInput.value = appId;
	uninstallForm.appendChild(appIdInput);
	const redirectInput = document.createElement('input');
	redirectInput.type = 'hidden';
	redirectInput.name = 'redirect_to';
	redirectInput.value = window.location.pathname;
	uninstallForm.appendChild(redirectInput);
	document.body.appendChild(uninstallForm);
	uninstallForm.submit();
}

// 删除应用（从详情弹窗触发）
function deleteAppFromDetails() {
	if (!currentApp) return;
	const appId = currentApp.id || currentApp.app_id;
	const appName = currentApp.name || appId;
	
	// 确认删除
	if (!confirm(`确定要删除应用 "${appName}" 吗？\n\n注意：这将从应用商店中删除该应用模板，但不会影响已安装的应用实例。`)) {
		return;
	}
	
	const deleteForm = document.createElement('form');
	deleteForm.method = 'POST';
	deleteForm.action = `/user/settings/appstore/delete/${appId}`;
	
	const csrfInput = document.createElement('input');
	csrfInput.type = 'hidden';
	csrfInput.name = '_csrf';
	csrfInput.value = document.querySelector('meta[name="_csrf"]')?.content || '';
	deleteForm.appendChild(csrfInput);
	
	const redirectInput = document.createElement('input');
	redirectInput.type = 'hidden';
	redirectInput.name = 'redirect_to';
	redirectInput.value = window.location.pathname;
	deleteForm.appendChild(redirectInput);
	
	document.body.appendChild(deleteForm);
	deleteForm.submit();
}

// 暂停/恢复应用（从详情弹窗触发）
function togglePauseResumeFromDetails() {
	if (!currentApp) return;
	const appId = currentApp.id || currentApp.app_id;
	
	// 根据当前状态决定操作
	const isRunning = currentAppStatus && currentAppStatus.replicas > 0;
	const action = isRunning ? 'stop' : 'resume';
	const actionText = isRunning ? '暂停' : '恢复';
	const confirmText = isRunning ? 
		'确定要暂停应用吗？暂停后应用将停止运行，但数据会保留。' : 
		'确定要恢复应用吗？应用将重新开始运行。';
	
	// 显示确认对话框
	if (!confirm(confirmText)) {
		return;
	}
	
	// 创建暂停/恢复应用的请求
	const form = document.createElement('form');
	form.method = 'POST';
	form.action = `/user/settings/appstore/${action}/${appId}`;
	
	const csrfInput = document.createElement('input');
	csrfInput.type = 'hidden';
	csrfInput.name = '_csrf';
	csrfInput.value = document.querySelector('meta[name="_csrf"]')?.content || '';
	form.appendChild(csrfInput);
	
	const appIdInput = document.createElement('input');
	appIdInput.type = 'hidden';
	appIdInput.name = 'app_id';
	appIdInput.value = appId;
	form.appendChild(appIdInput);
	
	const redirectInput = document.createElement('input');
	redirectInput.type = 'hidden';
	redirectInput.name = 'redirect_to';
	redirectInput.value = window.location.pathname;
	form.appendChild(redirectInput);
	
	document.body.appendChild(form);
	form.submit();
}

// 暂停应用（从详情弹窗触发）- 保留向后兼容
function stopCurrentAppFromDetails() {
	togglePauseResumeFromDetails();
}

// 加载并渲染运行状态（基于 K8s Application CRD）
async function loadAndRenderAppStatus(app) {
	const statusEl = document.getElementById('details-status');
	if (!statusEl || !app) return;
	statusEl.innerHTML = '<span class="ui grey text">正在获取状态...</span>';
	try {
		const appId = app.id || app.app_id;
		const resp = await fetch(`/user/settings/appstore/api/status/${appId}`);
		if (!resp.ok) throw new Error(`status: ${resp.status}`);
		const data = await resp.json();
		// 期望后端返回 { phase, replicas, readyReplicas, ready } 或类似结构
		const phase = data.phase || data.status?.phase || 'Unknown';
		const replicas = data.replicas ?? data.status?.replicas ?? '-';
		const readyReplicas = data.readyReplicas ?? data.status?.readyReplicas ?? '-';
		const ready = (typeof data.ready === 'boolean')
			? data.ready
			: (phase !== 'Not Installed' && phase !== 'Unknown' && (replicas === 0 || readyReplicas > 0));
		
		// 存储应用状态到全局变量
		currentAppStatus = {
			phase: phase,
			replicas: replicas,
			readyReplicas: readyReplicas,
			ready: ready
		};
		
		statusEl.innerHTML = `
			<div class="ui small statistic">
				<div class="value">${ready ? '<span class="ui green text">Ready</span>' : '<span class="ui orange text">Not Ready</span>'}</div>
				<div class="label">${phase} · ${readyReplicas}/${replicas}</div>
			</div>
		`;
		
		// 根据状态动态控制按钮显示
		updateActionButtonsVisibility();
	} catch (e) {
		statusEl.innerHTML = '<span class="ui red text">获取状态失败</span>';
		currentAppStatus = null;
		updateActionButtonsVisibility();
	}
}

// 根据应用状态动态控制操作按钮的显示
function updateActionButtonsVisibility() {
	const updateBtn = document.querySelector('#app-details-modal .ui.primary.button[onclick="updateInstalledAppFromDetails()"]');
	const pauseResumeBtn = document.getElementById('pause-resume-btn');
	const uninstallBtn = document.querySelector('#app-details-modal .ui.red.button[onclick="uninstallCurrentAppFromDetails()"]');
	const deleteBtn = document.getElementById('delete-app-btn');
	
	if (!currentAppStatus) {
		// 状态未知，隐藏所有操作按钮（除了删除按钮，因为未安装时应该显示）
		if (updateBtn) updateBtn.style.display = 'none';
		if (pauseResumeBtn) pauseResumeBtn.style.display = 'none';
		if (uninstallBtn) uninstallBtn.style.display = 'none';
		// 状态未知时，默认显示删除按钮（假设未安装）
		if (deleteBtn) deleteBtn.style.display = 'inline-block';
		return;
	}
	
	const isInstalled = currentAppStatus.phase !== 'Not Installed' && currentAppStatus.phase !== 'Unknown';
	const isRunning = isInstalled && currentAppStatus.replicas > 0;
	const isStopped = isInstalled && currentAppStatus.replicas === 0;
	
	// 更新按钮：只有已安装的应用才能更新
	if (updateBtn) {
		updateBtn.style.display = isInstalled ? 'inline-block' : 'none';
	}
	
	// 暂停/恢复按钮：已安装的应用可以暂停或恢复
	if (pauseResumeBtn) {
		if (isInstalled) {
			pauseResumeBtn.style.display = 'inline-block';
			// 根据应用状态更新按钮文本和样式
			if (isRunning) {
				pauseResumeBtn.textContent = '暂停应用';
				pauseResumeBtn.className = 'ui orange button';
			} else if (isStopped) {
				pauseResumeBtn.textContent = '恢复应用';
				pauseResumeBtn.className = 'ui green button';
			}
		} else {
			pauseResumeBtn.style.display = 'none';
		}
	}
	
	// 卸载按钮：只有已安装的应用才能卸载
	if (uninstallBtn) {
		uninstallBtn.style.display = isInstalled ? 'inline-block' : 'none';
	}
	
	// 删除按钮：只有未安装的应用才能删除（删除的是应用模板）
	if (deleteBtn) {
		deleteBtn.style.display = isInstalled ? 'none' : 'inline-block';
	}
}

async function installApp() {
	if (!currentApp) return;
	const form = document.getElementById('install-form');
	const formData = new FormData(form);
	const config = {};
	for (let [key, value] of formData.entries()) {
		const input = form.querySelector(`[name="${key}"]`);
		if (input && input.type === 'checkbox') {
			config[key] = input.checked;
		} else if (input && input.type === 'number') {
			config[key] = parseInt(value) || 0;
		} else {
			config[key] = value;
		}
	}
	const appId = currentApp.id || currentApp.app_id;
	const currentDeploymentFilter = document.querySelector('.deployment-filter .active');
	const deploymentType = currentDeploymentFilter?.getAttribute('data-deployment');
	// 从安装窗口读取安装位置
	const selectedTarget = document.querySelector('#install-modal input[name="installTargetRadio"]:checked');
	installTarget = selectedTarget ? selectedTarget.value : 'local';
	if (installTarget === 'kubeconfig') {
		const kcContentEl = document.querySelector('#install-modal #k8s-url');
		const kcContextEl = document.querySelector('#install-modal #k8s-token');
		installK8sURL = kcContentEl ? kcContentEl.value.trim() : '';
		installK8sToken = kcContextEl ? kcContextEl.value.trim() : '';
		if (!installK8sURL || !installK8sToken) {
			alert('请输入 Kubernetes API 地址和 Token');
			return;
		}
		config.deploy = { type: 'kubernetes' };
	} else {
		if (deploymentType === 'docker') {
			config.deploy = { type: 'docker' };
		} else if (deploymentType === 'kubernetes') {
			config.deploy = { type: 'kubernetes' };
		} else {
			// 回退到 docker 作为默认选择
			config.deploy = { type: 'docker' };
		}
	}
	// 避免全局 beforeunload 提示：标记当前表单忽略脏检测
	try { form.classList.add('ignore-dirty'); form.classList.remove('dirty'); } catch(e) {}
	const installForm = document.createElement('form');
	installForm.method = 'POST';
	installForm.action = `/user/settings/appstore/install/${appId}`;
	const csrfInput = document.createElement('input');
	csrfInput.type = 'hidden';
	csrfInput.name = '_csrf';
	csrfInput.value = document.querySelector('meta[name="_csrf"]')?.content || '';
	installForm.appendChild(csrfInput);
	const appIdInput = document.createElement('input');
	appIdInput.type = 'hidden';
	appIdInput.name = 'app_id';
	appIdInput.value = appId;
	installForm.appendChild(appIdInput);
	const configInput = document.createElement('input');
	configInput.type = 'hidden';
	configInput.name = 'config';
	configInput.value = JSON.stringify(config);
	installForm.appendChild(configInput);
	const targetInput = document.createElement('input');
	targetInput.type = 'hidden';
	targetInput.name = 'install_target';
	targetInput.value = installTarget;
	installForm.appendChild(targetInput);
	// 带上回跳地址，优先返回提交页面（后台或用户设置页）
	const redirectInput = document.createElement('input');
	redirectInput.type = 'hidden';
	redirectInput.name = 'redirect_to';
	redirectInput.value = window.location.pathname;
	installForm.appendChild(redirectInput);
	if (installTarget === 'kubeconfig') {
		const kcInput = document.createElement('input');
		kcInput.type = 'hidden';
		kcInput.name = 'k8s_url';
		kcInput.value = installK8sURL;
		installForm.appendChild(kcInput);
		const kctxInput = document.createElement('input');
		kctxInput.type = 'hidden';
		kctxInput.name = 'k8s_token';
		kctxInput.value = installK8sToken;
		installForm.appendChild(kctxInput);
	}
	// 提交安装表单
	document.body.appendChild(installForm);
	
	// 显示安装中状态
	const installBtn = document.querySelector('#install-modal .ui.primary.button');
	if (installBtn) {
		installBtn.className = 'ui loading primary button';
		installBtn.textContent = '安装中...';
		installBtn.disabled = true;
	}

	// 与卸载一致：使用表单直接提交，后端重定向以显示绿色提示
	installForm.submit();
	return;
}

function showAddAppModal() {
  document.getElementById('add-app-json').value = '';
  // 显示modal
  const modal = document.getElementById('add-app-modal');
  if (modal) {
    modal.style.display = 'block';
  }
}
function closeAddAppModal() {
  // 隐藏modal
  const modal = document.getElementById('add-app-modal');
  if (modal) {
    modal.style.display = 'none';
  }
}
async function submitAddApp() {
  console.log('submitAddApp called'); // 调试信息

  const jsonText = document.getElementById('add-app-json').value.trim();
  console.log('JSON text:', jsonText); // 调试信息
  
  let appData;
  try {
    appData = JSON.parse(jsonText);
    console.log('Parsed app data:', appData); // 调试信息
  } catch (e) {
    console.error('JSON parse error:', e); // 调试信息
    alert('JSON格式错误');
    return;
  }
  
  // 获取 CSRF token
  const csrfToken = document.querySelector('meta[name="_csrf"]')?.content || '';
  console.log('CSRF token:', csrfToken); // 调试信息
  
  try {
    const resp = await fetch('/user/settings/appstore/api/add', {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json',
        'X-CSRF-Token': csrfToken
      },
      body: JSON.stringify(appData)
    });
    console.log('Response status:', resp.status); // 调试信息
    
    if (resp.ok) {
      closeAddAppModal();
      loadAppsFromAPI(); // 刷新应用列表
      alert('添加成功');
    } else {
      const err = await resp.json();
      console.error('API error:', err); // 调试信息
      alert('添加失败: ' + (err.error || '未知错误'));
    }
  } catch (error) {
    console.error('Fetch error:', error); // 调试信息
    alert('网络错误: ' + error.message);
  }
}
</script>

{{end}}
{{template "user/settings/appstore_body" .}}
{{template "user/settings/layout_footer" .}}