{{define "hwaccel"}}
<!DOCTYPE html>
<html lang="en">
<head>
    {{template "head-common" .}}
    <title>{{.Title}}</title>
</head>
<body class="bg-gray-900 text-gray-100">
    {{template "accessibility-common" .}}
    {{template "main-layout-start" .}}
    {{template "hwaccel-content" .}}
    {{template "main-layout-end" .}}
    {{template "body-common-scripts" .}}
    <script>
        // Toast notification function
        function showToast(message, type = 'error') {
            const toast = document.createElement('div');
            toast.className = `fixed bottom-4 right-4 p-4 rounded-lg shadow-lg z-50 flex items-center gap-2 ${type === 'error' ? 'bg-red-600' : 'bg-green-600'} text-white`;
            toast.innerHTML = `<i class="bx ${type === 'error' ? 'bx-error-circle' : 'bx-check-circle'}"></i><span>${message}</span>`;
            document.body.appendChild(toast);
            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.transition = 'opacity 0.3s';
                setTimeout(() => toast.remove(), 300);
            }, 5000);
        }

        document.getElementById('apply-hwa-btn').addEventListener('click', function() {
            const selected = document.querySelector('input[name="hwdec"]:checked');
            if (!selected) return;

            const button = this;
            const originalContent = button.innerHTML;

            button.disabled = true;
            button.innerHTML = '<i class="bx bx-loader-alt bx-spin"></i> Applying...';

            const hwdec = selected.value;
            fetch('/api/config/apply', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ hardware_acceleration: hwdec })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    showToast('Settings applied successfully!', 'success');

                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                } else {
                    button.disabled = false;
                    button.innerHTML = originalContent;
                    showToast('Failed to apply settings: ' + (data.message || 'Unknown error'), 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                button.disabled = false;
                button.innerHTML = originalContent;
                showToast('Failed to apply settings: ' + error.message, 'error');
            });
        });
    </script>
</body>
</html>
{{end}}

{{define "hwaccel-content"}}
<div class="space-y-6">
    <div class="mb-6 flex items-start justify-between">
        <div>
            <h2 class="text-3xl font-bold text-white">Hardware Acceleration</h2>
            <p class="text-gray-400 mt-1">Configure GPU-based video decoding</p>
        </div>
        <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg transition flex items-center gap-2 font-medium shrink-0"
                id="apply-hwa-btn">
            <i class="bx bx-save"></i>
            Apply Settings
        </button>
    </div>

    <div class="grid md:grid-cols-2 gap-6 mb-6">
        <div class="bg-gray-800 rounded-lg p-6">
            <h3 class="text-xl font-semibold text-purple-400 mb-4">GPU Information</h3>

            <div class="grid grid-cols-2 gap-4">
                <div class="bg-gray-700 rounded-lg p-4">
                    <p class="text-sm text-gray-400">GPU Model</p>
                    {{range .Platform.GPUInfo.Models}}
                    <p class="font-medium {{getVendorColor $.Platform.GPUInfo.Brand}}">
                        {{.}}
                    </p>
                    {{end}}
                </div>
                <div class="bg-gray-700 rounded-lg p-4">
                    <p class="text-sm text-gray-400">GPU Vendor</p>
                    <p class="font-medium text-white">{{getVendorDisplay .Platform.GPUInfo.Brand}}</p>
                </div>
            </div>
        </div>

        <div class="bg-gray-800 rounded-lg p-6">
            <h3 class="text-xl font-semibold text-purple-400 mb-4">Supported Codecs</h3>

            <p class="text-gray-400 mb-4">Your GPU supports the following hardware decoding formats:</p>

            <div class="flex flex-wrap gap-2">
                {{range .Platform.GPUInfo.SupportedCodecs}}
                <span class="{{getCodecBadgeColor .}} text-white px-3 py-1 rounded-full text-sm font-medium">{{formatCodecName .}}</span>
                {{end}}
                {{if not .Platform.GPUInfo.SupportedCodecs}}
                <span class="text-gray-400 text-sm">No codec information available</span>
                {{end}}
            </div>
        </div>
    </div>

    <div class="bg-gray-800 rounded-lg p-6">
        <h3 class="text-xl font-semibold text-purple-400 mb-4">Hardware Acceleration Method</h3>

        <p class="text-gray-400 mb-4">Select hardware acceleration method for MPV:</p>

        <div class="space-y-3">
            <label class="flex items-center p-4 bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-600 transition">
                <input type="radio" name="hwdec" value="auto" class="mr-4" {{if eq $.CurrentHWA "auto"}}checked{{end}}>
                <div class="flex-1">
                    <div class="flex items-center gap-2">
                        <p class="font-medium text-white">Auto</p>
                        {{if eq $.RecommendedHWA "auto"}}<span class="bg-purple-600 text-xs px-2 py-1 rounded">Recommended</span>{{end}}
                    </div>
                    <p class="text-gray-400 text-sm">Let MPV choose best method</p>
                </div>
            </label>

            {{range .HWAOptions}}
            <label class="flex items-center p-4 bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-600 transition">
                <input type="radio" name="hwdec" value="{{ . }}" class="mr-4" {{if eq $.CurrentHWA .}}checked{{end}}>
                <div class="flex-1">
                    <div class="flex items-center gap-2">
                        <p class="font-medium text-white">{{ . }}</p>
                        {{if eq $.RecommendedHWA .}}<span class="bg-purple-600 text-xs px-2 py-1 rounded">Recommended</span>{{end}}
                    </div>
                    <p class="text-gray-400 text-sm">{{getHWADescription . }}</p>
                </div>
            </label>
            {{end}}

            <label class="flex items-center p-4 bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-600 transition">
                <input type="radio" name="hwdec" value="no" class="mr-4" {{if eq .CurrentHWA "no"}}checked{{end}}>
                <div class="flex-1">
                    <div class="flex items-center gap-2">
                        <p class="font-medium text-white">Disabled</p>
                    </div>
                    <p class="text-gray-400 text-sm">Disable hardware acceleration (CPU only)</p>
                </div>
            </label>
        </div>
    </div>
</div>
{{end}}
