<!-- Color Scheme Modal -->
<div v-if="showColorSchemeModal" class="color-scheme-modal" @click.self="closeColorSchemeModal">
    <div class="color-scheme-modal-content">
        <div class="color-scheme-header">
            <div class="flex items-center justify-between mb-2">
                <h2 class="color-scheme-title">
                    <i class="fas fa-palette"></i>
                    <span v-text="t('colorScheme.title')"></span>
                </h2>
                <button @click="closeColorSchemeModal" class="text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-colors">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <p class="color-scheme-subtitle" v-text="t('colorScheme.subtitle')"></p>
        </div>

        <div class="color-scheme-body">
            <div class="color-scheme-section">
                <h3 class="color-scheme-section-title">
                    <i :class="isDarkMode ? 'fas fa-moon' : 'fas fa-sun'"></i>
                    <span v-text="isDarkMode ? t('colorScheme.darkThemes') : t('colorScheme.lightThemes')"></span>
                </h3>
                <div class="color-scheme-grid">
                    <div v-for="scheme in colorSchemes[isDarkMode ? 'dark' : 'light']"
                         :key="scheme.id"
                         @click="selectColorScheme(scheme.id)"
                         :class="['color-scheme-option', currentColorScheme === scheme.id ? 'active' : '']">
                        <div class="color-scheme-preview">
                            <div :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-primary color-scheme-preview-segment`"></div>
                            <div :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-secondary color-scheme-preview-segment`"></div>
                            <div :class="`preview-${isDarkMode ? 'dark-' : ''}${scheme.id}-tertiary color-scheme-preview-segment`"></div>
                        </div>
                        <div class="color-scheme-name" v-text="t('colorScheme.themes.' + (isDarkMode ? 'dark' : 'light') + '.' + scheme.id + '.name')"></div>
                        <div class="color-scheme-description" v-text="t('colorScheme.themes.' + (isDarkMode ? 'dark' : 'light') + '.' + scheme.id + '.description')"></div>
                        <div v-if="currentColorScheme === scheme.id" class="color-scheme-check">
                            <i class="fas fa-check"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="color-scheme-footer">
            <button @click="resetColorScheme" class="color-scheme-reset-btn">
                <i class="fas fa-undo mr-2"></i><span v-text="t('colorScheme.resetToDefault')"></span>
            </button>
            <button @click="closeColorSchemeModal" class="color-scheme-close-btn" v-text="t('common.close')">
            </button>
        </div>
    </div>
</div>
