{{define "enhance-button.html"}}
<div class="enhance-controls flex flex-col sm:flex-row items-start sm:items-center gap-2 p-2 bg-terminal-bg border border-terminal-border">
    <div class="flex items-center gap-2">
        <label for="enhance-mode" class="text-xs text-terminal-muted">Mode</label>
        <select id="enhance-mode" class="tooltip tooltip-bottom bg-terminal-bg text-terminal-text border border-terminal-border px-4 py-2 text-sm focus:border-terminal-accent focus:outline-none" data-tooltip="Choose how to enhance the content" aria-label="Enhancement mode selection">
            <option value="elaborate">Elaborate</option>
            <option value="examples">Add Examples</option>
            <option value="bestPractices">Best Practices</option>
            <option value="simplify">Simplify</option>
        </select>
    </div>

    <button id="enhance-btn"
            type="button"
            class="tooltip flex items-center gap-2 px-4 py-2 text-sm bg-terminal-bg text-terminal-text border border-terminal-border hover:border-terminal-accent hover:text-terminal-accent transition-colors font-medium btn-hover"
            data-tooltip="Runs locally in browser (~400MB model download first time)"
            aria-label="Enhance content with AI">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
        </svg>
        <span class="btn-text">Enhance</span>
    </button>

    <div id="enhance-status" class="hidden text-xs flex items-center gap-2">
        <span class="loading-spinner w-3 h-3 border-2 border-terminal-accent border-t-transparent rounded-full"></span>
        <span class="status-text">Loading...</span>
    </div>

    <button type="button" id="enhance-info-toggle" class="tooltip tooltip-left text-terminal-muted hover:text-terminal-accent text-xs ml-auto" onclick="toggleEnhanceInfo()" data-tooltip="Show privacy and usage information" aria-label="Show AI enhancement information">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
    </button>
</div>

<div class="enhance-info mt-2 p-2 bg-terminal-bg/50 border border-terminal-border/50 text-xs text-terminal-muted hidden" id="enhance-info">
    <p>Runs in your browser. First use downloads about 400MB. Content stays local.</p>
</div>
{{end}}