{# No inline script: static/v3/js/pages/raw-json.js runs this page. Its buttons
   name an action and an editor (data-action, data-editor) for one delegated
   listener. The page registry (static/v3/js/core/registry.js) starts it when
   this root appears and stops it when the partial is swapped away. #}
<div class="space-y-6" data-page="raw-json">
    <!-- Config.json Editor -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="border-b border-gray-200 pb-4 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h2 id="main-config-editor-title" class="text-lg font-semibold text-gray-900">config.json Editor</h2>
                    <p class="mt-1 text-sm text-gray-600">{{ main_config_path }}</p>
                </div>
                <div class="flex gap-2">
                    <button type="button" data-action="format" data-editor="main"
                            class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-align-left mr-2"></i>
                        Format JSON
                    </button>
                    <button type="button" data-action="validate" data-editor="main"
                            class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700">
                        <i class="fas fa-check-circle mr-2"></i>
                        Validate JSON
                    </button>
                    <button type="button" data-action="save" data-editor="main"
                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                        <i class="fas fa-save mr-2"></i>
                        Save
                    </button>
                </div>
            </div>
        </div>

        <div class="relative">
            <textarea id="main-config-editor" aria-labelledby="main-config-editor-title"
                      class="w-full h-96 font-mono text-sm p-4 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                      spellcheck="false">{{ main_config_json }}</textarea>
            <div id="main-config-validation" class="mt-2 text-sm"></div>
        </div>

        <div class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-md">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-yellow-600"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800">Warning</h3>
                    <div class="mt-2 text-sm text-yellow-700">
                        <p>Editing this file directly can break your configuration. Always validate JSON syntax before saving.</p>
                        <p class="mt-1">After saving, you may need to restart the display service for changes to take effect.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Config_secrets.json Editor -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="border-b border-gray-200 pb-4 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h2 id="secrets-config-editor-title" class="text-lg font-semibold text-gray-900">config_secrets.json Editor</h2>
                    <p class="mt-1 text-sm text-gray-600">{{ secrets_config_path }}</p>
                </div>
                <div class="flex gap-2">
                    <button type="button" data-action="format" data-editor="secrets"
                            class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-align-left mr-2"></i>
                        Format JSON
                    </button>
                    <button type="button" data-action="validate" data-editor="secrets"
                            class="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700">
                        <i class="fas fa-check-circle mr-2"></i>
                        Validate JSON
                    </button>
                    <button type="button" data-action="save" data-editor="secrets"
                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
                        <i class="fas fa-save mr-2"></i>
                        Save
                    </button>
                </div>
            </div>
        </div>

        <div class="relative">
            <textarea id="secrets-config-editor" aria-labelledby="secrets-config-editor-title"
                      class="w-full h-96 font-mono text-sm p-4 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                      spellcheck="false">{{ secrets_config_json }}</textarea>
            <div id="secrets-config-validation" class="mt-2 text-sm"></div>
        </div>

        <div class="mt-4 p-4 bg-red-50 border border-red-200 rounded-md">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-shield-alt text-red-600"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800">Security Notice</h3>
                    <div class="mt-2 text-sm text-red-700">
                        <p>This file contains sensitive information like API keys and passwords.</p>
                        <p class="mt-1">Never share this file or commit it to version control.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>