{% extends "admin/base.html" %}

{% block title %}Site Settings{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-2xl font-bold text-white mb-2">Site Settings</h1>
    <p class="text-white/50 text-sm">Manage dynamic page visibility, menus, and site-wide theme options.</p>
</div>

<form action="/admin/settings" method="POST" class="space-y-6">
    <!-- General Identity -->
    <div class="terminal-box p-6">
        <h2 class="text-white font-bold mb-4 text-sm uppercase tracking-wider border-b border-white/10 pb-2">General
            Identity
        </h2>

        <div class="grid md:grid-cols-2 gap-4">
            <div>
                <label class="block text-white/60 text-xs mb-2 uppercase">Site Title (Browser Tab)</label>
                <input type="text" name="site_title"
                    value="{{ profile.site_title if profile and profile.site_title else 'ojsTerminalBio' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                <p class="text-[10px] text-white/40 mt-1">Appears in the browser tab and search results.</p>
            </div>
            <div>
                <label class="block text-white/60 text-xs mb-2 uppercase">Navbar Brand Name</label>
                <input type="text" name="hero_title"
                    value="{{ profile.hero_title if profile and profile.hero_title else 'ojsTerminalBio' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
            </div>
            <div class="md:col-span-2">
                <label class="block text-white/60 text-xs mb-2 uppercase">Hero Subtitle (Home Page)</label>
                <input type="text" name="hero_subtitle"
                    value="{{ profile.hero_subtitle if profile and profile.hero_subtitle else '' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none"
                    placeholder="e.g. Professor • Your Institution">
                <p class="text-[10px] text-white/40 mt-1">Displayed below the name in the hero section with typing
                    animation.</p>
            </div>
        </div>
    </div>

    <style>
        .settings-input {
            width: 100%;
            background-color: black;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
        }

        .settings-input:focus {
            border-color: var(--color-cyan, #0ff);
            outline: none;
        }
    </style>

    <!-- Projects Page Settings -->
    <div class="terminal-box p-6">
        <h2 class="text-white font-bold mb-4 text-sm uppercase tracking-wider border-b border-white/10 pb-2">Projects
            Page</h2>
        <div class="grid md:grid-cols-2 gap-4">
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Header</label>
                <input type="text" name="projects_header"
                    value="{{ profile.projects_header or 'Sponsored & Consultancy Projects' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Subheader</label>
                <input type="text" name="projects_subheader"
                    value="{{ profile.projects_subheader or 'Principal Investigator...' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 1 Value (Funding Amount)</label>
                <input type="text" name="projects_stat1_value" value="{{ profile.projects_stat1_value or '₹17 Cr+' }}"
                    class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 1 Label (Funding)</label>
                <input type="text" name="projects_stat1_label"
                    value="{{ profile.projects_stat1_label or 'Total Funding' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 2 Label (Projects)</label>
                <input type="text" name="projects_stat2_label"
                    value="{{ profile.projects_stat2_label or 'Total Projects' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 3 Label (Ongoing)</label>
                <input type="text" name="projects_stat3_label" value="{{ profile.projects_stat3_label or 'Ongoing' }}"
                    class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Ongoing Title</label>
                <input type="text" name="projects_ongoing_title"
                    value="{{ profile.projects_ongoing_title or 'Ongoing_Projects' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Completed Title</label>
                <input type="text" name="projects_completed_title"
                    value="{{ profile.projects_completed_title or 'Completed_Projects' }}" class="settings-input">
            </div>
        </div>
    </div>

    <!-- Students Page Settings -->
    <div class="terminal-box p-6">
        <h2 class="text-white font-bold mb-4 text-sm uppercase tracking-wider border-b border-white/10 pb-2">Students
            Page</h2>
        <div class="grid md:grid-cols-2 gap-4">
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Header</label>
                <input type="text" name="students_header" value="{{ profile.students_header or 'Students Supervised' }}"
                    class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Subheader</label>
                <input type="text" name="students_subheader"
                    value="{{ profile.students_subheader or 'PhD Scholars and MTech Students' }}"
                    class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 1 Label (Total PhD)</label>
                <input type="text" name="students_stat1_label" value="{{ profile.students_stat1_label or 'Total PhD' }}"
                    class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 2 Label (Completed)</label>
                <input type="text" name="students_stat2_label"
                    value="{{ profile.students_stat2_label or 'PhD Completed' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 3 Label (Ongoing)</label>
                <input type="text" name="students_stat3_label"
                    value="{{ profile.students_stat3_label or 'PhD Ongoing' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 4 Label (MTech)</label>
                <input type="text" name="students_stat4_label"
                    value="{{ profile.students_stat4_label or 'MTech Supervised' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">PhD Section Title</label>
                <input type="text" name="students_phd_title" value="{{ profile.students_phd_title or 'PhD_Scholars' }}"
                    class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">MTech Section Title</label>
                <input type="text" name="students_mtech_title"
                    value="{{ profile.students_mtech_title or 'MTech_Students' }}" class="settings-input">
            </div>
        </div>
    </div>

    <!-- Teaching Page Settings -->
    <div class="terminal-box p-6">
        <h2 class="text-white font-bold mb-4 text-sm uppercase tracking-wider border-b border-white/10 pb-2">Teaching
            Page</h2>
        <div class="grid md:grid-cols-2 gap-4">
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Header</label>
                <input type="text" name="teaching_header" value="{{ profile.teaching_header or 'Teaching' }}"
                    class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Subheader</label>
                <input type="text" name="teaching_subheader"
                    value="{{ profile.teaching_subheader or 'Courses Taught...' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 1 Label (Courses)</label>
                <input type="text" name="teaching_stat1_label"
                    value="{{ profile.teaching_stat1_label or 'Courses Taught' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 2 Label (Levels)</label>
                <input type="text" name="teaching_stat2_label" value="{{ profile.teaching_stat2_label or 'Levels' }}"
                    class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 3 Label (EXP)</label>
                <input type="text" name="teaching_stat3_label"
                    value="{{ profile.teaching_stat3_label or 'Teaching Experience' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 2 Value</label>
                <input type="text" name="teaching_stat2_value" value="{{ profile.teaching_stat2_value or 'UG & PG' }}"
                    class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 3 Value</label>
                <input type="text" name="teaching_stat3_value" value="{{ profile.teaching_stat3_value or '15+ Years' }}"
                    class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Theory Title</label>
                <input type="text" name="teaching_theory_title"
                    value="{{ profile.teaching_theory_title or 'Theory_Courses' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Lab Title</label>
                <input type="text" name="teaching_lab_title" value="{{ profile.teaching_lab_title or 'Lab_Courses' }}"
                    class="settings-input">
            </div>
        </div>
    </div>

    <!-- Research Page Settings -->
    <div class="terminal-box p-6">
        <h2 class="text-white font-bold mb-4 text-sm uppercase tracking-wider border-b border-white/10 pb-2">Research
            Page</h2>
        <div class="grid md:grid-cols-2 gap-4">
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Header</label>
                <input type="text" name="research_header"
                    value="{{ profile.research_header or 'Research & Publications' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Subheader</label>
                <input type="text" name="research_subheader"
                    value="{{ profile.research_subheader or 'Peer-Reviewed Papers...' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Interests Title</label>
                <input type="text" name="research_interests_title"
                    value="{{ profile.research_interests_title or 'RESEARCH_INTERESTS' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Indexes Title</label>
                <input type="text" name="research_indexes_title"
                    value="{{ profile.research_indexes_title or 'Digital_Library_Indexes' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Google Scholar Label</label>
                <input type="text" name="research_google_label"
                    value="{{ profile.research_google_label or 'Google Scholar' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Google Scholar Desc</label>
                <input type="text" name="research_google_desc"
                    value="{{ profile.research_google_desc or 'View all citations...' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">DBLP Label</label>
                <input type="text" name="research_dblp_label" value="{{ profile.research_dblp_label or 'DBLP' }}"
                    class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">DBLP Desc</label>
                <input type="text" name="research_dblp_desc"
                    value="{{ profile.research_dblp_desc or 'Computer Science Bibliography' }}" class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Publications Title</label>
                <input type="text" name="research_publications_title"
                    value="{{ profile.research_publications_title or 'Publications' }}" class="settings-input">
            </div>
        </div>
    </div>

    <!-- About Page Settings -->
    <div class="terminal-box p-6">
        <h2 class="text-white font-bold mb-4 text-sm uppercase tracking-wider border-b border-white/10 pb-2">About Page
        </h2>
        <div class="grid md:grid-cols-2 gap-4">
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Header</label>
                <input type="text" name="about_header" value="{{ profile.about_header or 'About Me' }}"
                    class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Subheader</label>
                <input type="text" name="about_subheader" value="{{ profile.about_subheader or 'Professor...' }}"
                    class="settings-input">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Location Label</label>
                <input type="text" name="about_location_label" value="{{ profile.about_location_label or 'LOCATION' }}"
                    class="settings-input">
            </div>
        </div>
    </div>

    <!-- Home Page Quick Stats -->
    <div class="terminal-box p-6">
        <h2 class="text-white font-bold mb-4 text-sm uppercase tracking-wider border-b border-white/10 pb-2">Home Page -
            Quick Stats</h2>
        <p class="text-white/40 text-xs mb-4">Customize the three stats displayed in the hero section.</p>

        <div class="grid md:grid-cols-3 gap-4">
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 1 Value</label>
                <input type="text" name="stat1_value"
                    value="{{ profile.stat1_value if profile and profile.stat1_value else '100+' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                <label class="block text-white/60 text-xs uppercase mt-2">Stat 1 Label</label>
                <input type="text" name="stat1_label"
                    value="{{ profile.stat1_label if profile and profile.stat1_label else 'Publications' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 2 Value</label>
                <input type="text" name="stat2_value"
                    value="{{ profile.stat2_value if profile and profile.stat2_value else '10+' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                <label class="block text-white/60 text-xs uppercase mt-2">Stat 2 Label</label>
                <input type="text" name="stat2_label"
                    value="{{ profile.stat2_label if profile and profile.stat2_label else 'PhD Scholars' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">Stat 3 Value</label>
                <input type="text" name="stat3_value"
                    value="{{ profile.stat3_value if profile and profile.stat3_value else '₹10Cr+' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                <label class="block text-white/60 text-xs uppercase mt-2">Stat 3 Label</label>
                <input type="text" name="stat3_label"
                    value="{{ profile.stat3_label if profile and profile.stat3_label else 'Project Funding' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
            </div>
        </div>
    </div>

    <!-- Home Page Quick Links -->
    <div class="terminal-box p-6">
        <h2 class="text-white font-bold mb-4 text-sm uppercase tracking-wider border-b border-white/10 pb-2">Home Page -
            Quick Links</h2>
        <p class="text-white/40 text-xs mb-4">Customize the three card descriptions on the home page.</p>

        <div class="grid md:grid-cols-3 gap-4">
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">📚 Link 1 Title</label>
                <input type="text" name="link1_title"
                    value="{{ profile.link1_title if profile and profile.link1_title else 'Research & Publications' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                <label class="block text-white/60 text-xs uppercase mt-2">Link 1 Description</label>
                <input type="text" name="link1_description"
                    value="{{ profile.link1_description if profile and profile.link1_description else '' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">💼 Link 2 Title</label>
                <input type="text" name="link2_title"
                    value="{{ profile.link2_title if profile and profile.link2_title else 'Sponsored Projects' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                <label class="block text-white/60 text-xs uppercase mt-2">Link 2 Description</label>
                <input type="text" name="link2_description"
                    value="{{ profile.link2_description if profile and profile.link2_description else '' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
            </div>
            <div class="space-y-2">
                <label class="block text-white/60 text-xs uppercase">🎓 Link 3 Title</label>
                <input type="text" name="link3_title"
                    value="{{ profile.link3_title if profile and profile.link3_title else 'Students Supervised' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                <label class="block text-white/60 text-xs uppercase mt-2">Link 3 Description</label>
                <input type="text" name="link3_description"
                    value="{{ profile.link3_description if profile and profile.link3_description else '' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
            </div>
        </div>
    </div>

    <!-- Page Visibility -->
    <div class="terminal-box p-6">
        <h2 class="text-white font-bold mb-4 text-sm uppercase tracking-wider border-b border-white/10 pb-2">Dynamic
            Pages</h2>
        <p class="text-white/40 text-xs mb-4">Toggle visibility and menu appearance for custom pages.</p>

        <div class="space-y-2">
            {% for page in pages %}
            <div class="flex items-center justify-between p-3 bg-black/50 border border-white/10 hover:border-cyan/30">
                <div class="flex-1">
                    <span class="text-white text-sm font-bold">{{ page.title }}</span>
                    <span class="text-white/40 text-xs block">/{{ page.slug }}</span>
                </div>
                <div class="flex gap-4 items-center">
                    <!-- Parent Page Dropdown -->
                    <div class="flex items-center gap-2">
                        <span class="text-white/40 text-xs">Parent:</span>
                        <select name="parent_page_{{ page.id }}"
                            class="bg-black border border-white/20 text-white text-xs px-2 py-1.5 rounded-sm focus:border-cyan focus:outline-none w-auto min-w-[120px] cursor-pointer">
                            <option value="">None</option>
                            {% for p in pages %}
                            {% if p.id != page.id %}
                            <option value="{{ p.id }}" class="text-white bg-black" {% if page.parent_id==p.id
                                %}selected{% endif %}>{{ p.title }}
                            </option>
                            {% endif %}
                            {% endfor %}
                        </select>
                    </div>

                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="visible_pages" value="{{ page.id }}" class="accent-cyan h-4 w-4" {%
                            if page.is_published %}checked{% endif %}>
                        <span class="text-white/60 text-xs">Visible</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="menu_pages" value="{{ page.id }}" class="accent-pink h-4 w-4" {% if
                            page.show_in_menu %}checked{% endif %}>
                        <span class="text-white/60 text-xs">In Menu</span>
                    </label>
                </div>
            </div>
            {% else %}
            <p class="text-white/40 text-sm">No pages created yet. <a href="/admin/pages/editor"
                    class="text-cyan hover:underline">Create a page</a></p>
            {% endfor %}
        </div>
    </div>

    <!-- Navigation Pages (Standard) -->
    <div class="terminal-box p-6">
        <h2 class="text-white font-bold mb-4 text-sm uppercase tracking-wider border-b border-white/10 pb-2">Navigation
            Pages</h2>
        <p class="text-white/40 text-xs mb-4">Toggle visibility and customize labels for standard pages.</p>

        <div class="grid md:grid-cols-2 gap-4">
            <!-- About -->
            <div class="flex items-center justify-between p-3 bg-black/50 border border-white/10 hover:border-cyan/30">
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" name="show_about_page" class="accent-cyan h-4 w-4" {% if not profile or
                        profile.show_about_page %}checked{% endif %}>
                    <span class="text-white text-sm">About Page</span>
                </label>
                <input type="text" name="label_about_page"
                    value="{{ profile.label_about_page if profile and profile.label_about_page else 'About' }}"
                    class="bg-black border border-white/20 text-white text-xs px-2 py-1 w-32 focus:border-cyan focus:outline-none placeholder-white/20"
                    placeholder="Label">
            </div>

            <!-- Research -->
            <div class="flex items-center justify-between p-3 bg-black/50 border border-white/10 hover:border-cyan/30">
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" name="show_research_page" class="accent-cyan h-4 w-4" {% if not profile or
                        profile.show_research_page %}checked{% endif %}>
                    <span class="text-white text-sm">Research Page</span>
                </label>
                <input type="text" name="label_research_page"
                    value="{{ profile.label_research_page if profile and profile.label_research_page else 'Research' }}"
                    class="bg-black border border-white/20 text-white text-xs px-2 py-1 w-32 focus:border-cyan focus:outline-none placeholder-white/20"
                    placeholder="Label">
            </div>

            <!-- Publications -->
            <div class="flex items-center justify-between p-3 bg-black/50 border border-white/10 hover:border-cyan/30">
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" name="show_publications_page" class="accent-cyan h-4 w-4" {% if not profile
                        or profile.show_publications_page %}checked{% endif %}>
                    <span class="text-white text-sm">Publications Page</span>
                </label>
                <input type="text" name="label_publications_page"
                    value="{{ profile.label_publications_page if profile and profile.label_publications_page else 'Publications' }}"
                    class="bg-black border border-white/20 text-white text-xs px-2 py-1 w-32 focus:border-cyan focus:outline-none placeholder-white/20"
                    placeholder="Label">
            </div>

            <!-- Projects -->
            <div class="flex items-center justify-between p-3 bg-black/50 border border-white/10 hover:border-cyan/30">
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" name="show_projects_page" class="accent-cyan h-4 w-4" {% if not profile or
                        profile.show_projects_page %}checked{% endif %}>
                    <span class="text-white text-sm">Projects Page</span>
                </label>
                <input type="text" name="label_projects_page"
                    value="{{ profile.label_projects_page if profile and profile.label_projects_page else 'Projects' }}"
                    class="bg-black border border-white/20 text-white text-xs px-2 py-1 w-32 focus:border-cyan focus:outline-none placeholder-white/20"
                    placeholder="Label">
            </div>

            <!-- Students -->
            <div class="flex items-center justify-between p-3 bg-black/50 border border-white/10 hover:border-cyan/30">
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" name="show_students_page" class="accent-cyan h-4 w-4" {% if not profile or
                        profile.show_students_page %}checked{% endif %}>
                    <span class="text-white text-sm">Students Page</span>
                </label>
                <input type="text" name="label_students_page"
                    value="{{ profile.label_students_page if profile and profile.label_students_page else 'Students' }}"
                    class="bg-black border border-white/20 text-white text-xs px-2 py-1 w-32 focus:border-cyan focus:outline-none placeholder-white/20"
                    placeholder="Label">
            </div>

            <!-- Teaching -->
            <div class="flex items-center justify-between p-3 bg-black/50 border border-white/10 hover:border-cyan/30">
                <label class="flex items-center gap-3 cursor-pointer">
                    <input type="checkbox" name="show_teaching_page" class="accent-cyan h-4 w-4" {% if not profile or
                        profile.show_teaching_page %}checked{% endif %}>
                    <span class="text-white text-sm">Teaching Page</span>
                </label>
                <input type="text" name="label_teaching_page"
                    value="{{ profile.label_teaching_page if profile and profile.label_teaching_page else 'Teaching' }}"
                    class="bg-black border border-white/20 text-white text-xs px-2 py-1 w-32 focus:border-cyan focus:outline-none placeholder-white/20"
                    placeholder="Label">
            </div>
        </div>
    </div>

    <!-- Matrix Animation -->
    <div class="terminal-box p-6">
        <h2 class="text-white font-bold mb-4 text-sm uppercase tracking-wider border-b border-white/10 pb-2">Matrix
            Animation</h2>

        <div class="grid md:grid-cols-2 gap-4">
            <div>
                <label class="flex items-center gap-2 cursor-pointer mb-4">
                    <input type="checkbox" name="show_matrix_effect" class="accent-cyan h-4 w-4" {% if profile and
                        profile.show_matrix_effect %}checked{% endif %}>
                    <span class="text-white text-sm">Enable Matrix Rain Effect</span>
                </label>
            </div>
            <div>
                <label class="block text-white/60 text-xs mb-2 uppercase">Matrix Characters</label>
                <input type="text" name="matrix_characters"
                    value="{{ profile.matrix_characters if profile and profile.matrix_characters else 'ꯀꯁꯂꯃꯄꯅꯆꯇꯈꯉ01' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none"
                    placeholder="Characters for matrix animation">
                <p class="text-[10px] text-white/40 mt-1">e.g. ꯀꯁꯂꯃꯄꯅꯆꯇꯈꯉ01 or ABCDEFGHIJKアイウエオ</p>
            </div>
            <div>
                <label class="block text-white/60 text-xs mb-2 uppercase">Opacity (0.01 - 0.2)</label>
                <input type="number" name="matrix_opacity" step="0.01" min="0.01" max="0.2"
                    value="{{ profile.matrix_opacity if profile and profile.matrix_opacity else '0.05' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                <p class="text-[10px] text-white/40 mt-1">Lower = more visible trails, Higher = faster fade</p>
            </div>
            <div>
                <label class="block text-white/60 text-xs mb-2 uppercase">Font Size (px)</label>
                <input type="number" name="matrix_font_size" min="8" max="24"
                    value="{{ profile.matrix_font_size if profile and profile.matrix_font_size else '14' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                <p class="text-[10px] text-white/40 mt-1">Suggested: 10-18px</p>
            </div>
        </div>
    </div>

    <!-- Theme -->
    <div class="terminal-box p-6">
        <h2 class="text-white font-bold mb-4 text-sm uppercase tracking-wider border-b border-white/10 pb-2">Theme</h2>

        <div class="grid md:grid-cols-2 gap-4">
            <div>
                <label class="block text-white/60 text-xs mb-2 uppercase">Primary Color</label>
                <select name="theme_primary_color"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                    <option value="cyan" {% if profile and profile.theme_primary_color=='cyan' %}selected{% endif %}>
                        Cyan</option>
                    <option value="pink" {% if profile and profile.theme_primary_color=='pink' %}selected{% endif %}>
                        Pink</option>
                    <option value="amber" {% if profile and profile.theme_primary_color=='amber' %}selected{% endif %}>
                        Amber</option>
                    <option value="green" {% if profile and profile.theme_primary_color=='green' %}selected{% endif %}>
                        Green</option>
                </select>
            </div>
            <div>
                <label class="block text-white/60 text-xs mb-2 uppercase">Footer Text</label>
                <input type="text" name="footer_text"
                    value="{{ profile.footer_text if profile and profile.footer_text else '© 2025 ojsTerminalBio' }}"
                    class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
            </div>
        </div>
    </div>

    <button type="submit"
        class="px-6 py-3 bg-cyan text-black font-bold uppercase text-sm hover:bg-white transition-colors">
        Save Settings
    </button>
</form>
{% endblock %}