@let plugin = plugin$ | async; @let canConfigure = canConfigure$ | async; @if(plugin) {
<div class="settings-tab-content">
	<!-- Header Card -->
	<div class="header-card mb-4">
		<div class="header-content">
			<div class="header-left">
				<div class="icon-container">
					<nb-icon icon="settings-2-outline"></nb-icon>
				</div>
				<div class="header-info">
					<h6 class="section-title mb-1">{{ 'PLUGIN.SETTINGS.TITLE' | translate }}</h6>
					<p class="section-description text-hint mb-0">
						{{ 'PLUGIN.SETTINGS.DESCRIPTION' | translate }}
					</p>
				</div>
			</div>
		</div>
	</div>

	<!-- Settings Overview Card -->
	<div class="settings-overview-card mb-4">
		<nb-card>
			<nb-card-body>
				<div class="settings-info">
					<div class="info-icon-container">
						<nb-icon icon="settings-2-outline"></nb-icon>
					</div>
					<div class="info-content">
						<h6 class="info-title">{{ 'PLUGIN.SETTINGS.CONFIGURE' | translate }}</h6>
						<p class="info-description">
							{{ 'PLUGIN.SETTINGS.CONFIGURE_DESCRIPTION' | translate }}
						</p>

						@if(canConfigure) {
						<button nbButton status="primary" size="medium" (click)="openSettingsDialog()" class="configure-button mt-3">
							<nb-icon icon="settings-outline" class="mr-1"></nb-icon>
							{{ 'PLUGIN.SETTINGS.OPEN_SETTINGS' | translate }}
						</button>
						} @else {
						<div class="permission-alert mt-3">
							<div class="alert-content">
								<nb-icon icon="lock-outline" status="warning"></nb-icon>
								<span>{{ 'PLUGIN.SETTINGS.NO_PERMISSION' | translate }}</span>
							</div>
						</div>
						}
					</div>
				</div>
			</nb-card-body>
		</nb-card>
	</div>

	<!-- Settings Features Info -->
	<div class="features-section">
		<div class="section-header mb-3">
			<nb-icon icon="layers-outline" class="section-icon"></nb-icon>
			<h6 class="section-title">{{ 'PLUGIN.SETTINGS.FEATURES_TITLE' | translate }}</h6>
		</div>

		<div class="features-grid">
			<div class="feature-card">
				<div class="feature-icon info-icon">
					<nb-icon icon="edit-outline"></nb-icon>
				</div>
				<div class="feature-content">
					<h6 class="feature-title">{{ 'PLUGIN.SETTINGS.FEATURE_1_TITLE' | translate }}</h6>
					<p class="feature-description">{{ 'PLUGIN.SETTINGS.FEATURE_1_DESC' | translate }}</p>
				</div>
			</div>

			<div class="feature-card">
				<div class="feature-icon success-icon">
					<nb-icon icon="shield-outline"></nb-icon>
				</div>
				<div class="feature-content">
					<h6 class="feature-title">{{ 'PLUGIN.SETTINGS.FEATURE_2_TITLE' | translate }}</h6>
					<p class="feature-description">{{ 'PLUGIN.SETTINGS.FEATURE_2_DESC' | translate }}</p>
				</div>
			</div>

			<div class="feature-card">
				<div class="feature-icon warning-icon">
					<nb-icon icon="options-2-outline"></nb-icon>
				</div>
				<div class="feature-content">
					<h6 class="feature-title">{{ 'PLUGIN.SETTINGS.FEATURE_3_TITLE' | translate }}</h6>
					<p class="feature-description">{{ 'PLUGIN.SETTINGS.FEATURE_3_DESC' | translate }}</p>
				</div>
			</div>

			<div class="feature-card">
				<div class="feature-icon primary-icon">
					<nb-icon icon="checkmark-circle-outline"></nb-icon>
				</div>
				<div class="feature-content">
					<h6 class="feature-title">{{ 'PLUGIN.SETTINGS.FEATURE_4_TITLE' | translate }}</h6>
					<p class="feature-description">{{ 'PLUGIN.SETTINGS.FEATURE_4_DESC' | translate }}</p>
				</div>
			</div>
		</div>
	</div>
</div>
}