{{define "settings_navlinks"}}
{{template "header" .}}
<section class="max-w-3xl mx-auto px-4 py-12">
    <h2 class="text-3xl font-bold text-gray-900 mb-2">{{index .Tr "settings_navlinks_title"}}</h2>
    <p class="text-gray-500 mb-4">{{index .Tr "settings_navlinks_desc"}}</p>

    <div class="flex gap-2 mb-8">
        <a href="/admin/settings/site" class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors">{{index .Tr "settings_site_title"}}</a>
        <a href="/admin/settings/navlinks" class="px-4 py-2 rounded-lg text-sm font-medium bg-blue-600 text-white">{{index .Tr "settings_navlinks_title"}}</a>
        <a href="/admin/settings/upload" class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors">{{index .Tr "settings_upload_title"}}</a>
        <a href="/admin/settings/download" class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors">{{index .Tr "settings_download_title"}}</a>
    </div>

    {{if .Success}}
    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-6">{{.Success}}</div>
    {{end}}

    <!-- Add New Link Form -->
    <form action="/admin/settings/navlinks" method="post" class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
        <input type="hidden" name="action" value="add">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">{{index .Tr "navlinks_add"}}</h3>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "navlinks_title_zh"}}</label>
                <input type="text" name="title_zh" placeholder="首页" required
                    class="w-full border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "navlinks_title_en"}}</label>
                <input type="text" name="title_en" placeholder="Home" required
                    class="w-full border border-gray-300 rounded-lg px-3 py-2">
            </div>
        </div>

        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "navlinks_url"}}</label>
            <input type="text" name="url" placeholder="/about" required
                class="w-full border border-gray-300 rounded-lg px-3 py-2">
            <p class="text-xs text-gray-500 mt-1">{{index .Tr "navlinks_url_hint"}}</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "navlinks_sort"}}</label>
                <input type="number" name="sort" value="0" min="0"
                    class="w-full border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div class="flex items-end gap-4">
                <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="open_new" value="1" class="rounded border-gray-300">
                    <span class="text-sm text-gray-700">{{index .Tr "navlinks_open_new"}}</span>
                </label>
                <label class="inline-flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" name="enabled" value="1" checked class="rounded border-gray-300">
                    <span class="text-sm text-gray-700">{{index .Tr "navlinks_enabled"}}</span>
                </label>
            </div>
        </div>

        <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors">
            {{index .Tr "navlinks_add"}}
        </button>
    </form>

    <!-- Existing Links List -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">{{index .Tr "navlinks_enabled"}}</h3>

        {{if .NavLinks}}
        <div class="space-y-3">
            {{range .NavLinks}}
            <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors" id="link-{{.ID}}">
                <div class="flex items-start justify-between gap-4">
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="font-medium text-gray-900">{{if .TitleZh}}{{.TitleZh}}{{else}}{{.TitleEn}}{{end}}</span>
                            {{if not .Enabled}}
                            <span class="px-2 py-0.5 bg-gray-200 text-gray-600 text-xs rounded">{{index $.Tr "status_disabled"}}</span>
                            {{end}}
                            {{if .OpenNew}}
                            <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded">↗ {{index $.Tr "navlinks_open_new"}}</span>
                            {{end}}
                        </div>
                        <div class="text-sm text-gray-600">
                            <div><strong>ZH:</strong> {{.TitleZh}} | <strong>EN:</strong> {{.TitleEn}}</div>
                            <div><strong>URL:</strong> <a href="{{.URL}}" target="_blank" class="text-blue-600 hover:underline">{{.URL}}</a></div>
                            <div><strong>{{index $.Tr "navlinks_sort"}}:</strong> {{.Sort}}</div>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <!-- Toggle Button -->
                        <form action="/admin/settings/navlinks" method="post" class="inline">
                            <input type="hidden" name="action" value="toggle">
                            <input type="hidden" name="id" value="{{.ID}}">
                            <button type="submit" class="text-sm px-3 py-1.5 rounded-lg border {{if .Enabled}}bg-green-50 border-green-300 text-green-700 hover:bg-green-100{{else}}bg-gray-100 border-gray-300 text-gray-600 hover:bg-gray-200{{end}} transition-colors">
                                {{if .Enabled}}✓{{else}}✗{{end}} {{index $.Tr "settings_toggle"}}
                            </button>
                        </form>
                        <!-- Edit Button -->
                        <button onclick="editLink({{.ID}}, '{{.TitleZh}}', '{{.TitleEn}}', '{{.URL}}', {{if .OpenNew}}true{{else}}false{{end}}, {{.Sort}})" class="text-sm px-3 py-1.5 bg-blue-50 border border-blue-300 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors">
                            {{index $.Tr "navlinks_edit"}}
                        </button>
                        <!-- Delete Button -->
                        <form action="/admin/settings/navlinks" method="post" class="inline" onsubmit="return confirm('{{index $.Tr "navlinks_confirm_delete"}}')">
                            <input type="hidden" name="action" value="delete">
                            <input type="hidden" name="id" value="{{.ID}}">
                            <button type="submit" class="text-sm px-3 py-1.5 bg-red-50 border border-red-300 text-red-700 rounded-lg hover:bg-red-100 transition-colors">
                                {{index $.Tr "navlinks_delete"}}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            {{end}}
        </div>
        {{else}}
        <p class="text-gray-500 text-center py-8">{{index .Tr "navlinks_no_links"}}</p>
        {{end}}
    </div>
</section>

<!-- Edit Modal -->
<div id="editModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-xl shadow-xl max-w-2xl w-full mx-4 p-6">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">{{index .Tr "navlinks_edit"}}</h3>
        <form action="/admin/settings/navlinks" method="post" id="editForm">
            <input type="hidden" name="action" value="edit">
            <input type="hidden" name="id" id="edit_id">

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "navlinks_title_zh"}}</label>
                    <input type="text" name="title_zh" id="edit_title_zh" required
                        class="w-full border border-gray-300 rounded-lg px-3 py-2">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "navlinks_title_en"}}</label>
                    <input type="text" name="title_en" id="edit_title_en" required
                        class="w-full border border-gray-300 rounded-lg px-3 py-2">
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "navlinks_url"}}</label>
                <input type="text" name="url" id="edit_url" required
                    class="w-full border border-gray-300 rounded-lg px-3 py-2">
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "navlinks_sort"}}</label>
                    <input type="number" name="sort" id="edit_sort" min="0"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2">
                </div>
                <div class="flex items-end">
                    <label class="inline-flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="open_new" id="edit_open_new" value="1" class="rounded border-gray-300">
                        <span class="text-sm text-gray-700">{{index .Tr "navlinks_open_new"}}</span>
                    </label>
                </div>
            </div>

            <div class="flex justify-end gap-3">
                <button type="button" onclick="closeEditModal()" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
                    {{index .Tr "navlinks_cancel"}}
                </button>
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                    {{index .Tr "navlinks_save"}}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function editLink(id, titleZh, titleEn, url, openNew, sort) {
    document.getElementById('edit_id').value = id;
    document.getElementById('edit_title_zh').value = titleZh;
    document.getElementById('edit_title_en').value = titleEn;
    document.getElementById('edit_url').value = url;
    document.getElementById('edit_open_new').checked = openNew;
    document.getElementById('edit_sort').value = sort;
    document.getElementById('editModal').classList.remove('hidden');
}

function closeEditModal() {
    document.getElementById('editModal').classList.add('hidden');
}

// Close modal when clicking outside
document.getElementById('editModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeEditModal();
    }
});
</script>

{{template "footer" .}}
{{end}}