{% extends "layout.html" %}
{% block content %}
<div class="max-w-4xl mx-auto p-4 md:p-8">
    <h2 class="text-3xl font-black text-white tracking-tighter italic mb-8 uppercase flex items-center gap-3">
        <svg class="w-8 h-8 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
        User Profile & API
    </h2>
    
    <div class="bg-[#12161f] border border-gray-800 rounded-3xl p-6 md:p-8 shadow-2xl">
        <div class="flex items-center gap-6 mb-8 border-b border-gray-800 pb-6">
            <div class="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center text-2xl font-black text-white shadow-lg">
                {{ session['username'][0].upper() }}
            </div>
            <div>
                <h3 class="text-xl font-bold text-white">{{ session['username'] }}</h3>
                <p class="text-gray-500 text-xs font-bold uppercase tracking-widest">{{ session['role'] }} Account</p>
            </div>
        </div>

        <div class="mb-8 p-5 bg-blue-900/10 border border-blue-500/20 rounded-2xl">
            <h4 class="text-[10px] font-black text-blue-400 uppercase tracking-widest mb-3">Your Assigned Templates</h4>
            <div class="flex gap-2 flex-wrap">
                {% if user_data.assigned_templates %}
                    {% for t in user_data.assigned_templates %}
                        <span class="bg-blue-600/20 text-blue-400 px-3 py-1.5 rounded-lg text-[10px] font-mono border border-blue-500/30">{{ t }}</span>
                    {% endfor %}
                {% else %}
                    <span class="text-gray-500 text-[10px] uppercase font-bold tracking-widest">No templates assigned.</span>
                {% endif %}
            </div>
        </div>

        <div class="space-y-6">
            <h4 class="text-[10px] font-black text-gray-400 uppercase tracking-widest">Personal API Access Token</h4>
            <p class="text-gray-500 text-xs">Use this token to authenticate your API requests. Keep it secret!</p>
            
            {% if user_data.api_token %}
            <div class="flex flex-col lg:flex-row gap-4 items-stretch">
                <code class="flex-1 bg-[#0b0e14] px-6 py-4 rounded-xl border border-gray-800 text-green-400 font-mono text-sm break-all shadow-inner">
                    {{ user_data.api_token }}
                </code>
                <form action="/settings/generate_token" method="POST" class="flex" onsubmit="return confirm('Regenerating will break existing API integrations. Continue?');">
                    <button type="submit" class="w-full lg:w-auto bg-red-900/20 text-red-400 hover:bg-red-600 hover:text-white px-8 py-4 rounded-xl text-[10px] font-black uppercase tracking-widest border border-red-500/30 transition shadow-lg">
                        Regenerate
                    </button>
                </form>
            </div>
            {% else %}
            <form action="/settings/generate_token" method="POST">
                <button type="submit" class="bg-blue-600 hover:bg-blue-500 text-white px-8 py-4 rounded-xl text-xs font-black uppercase tracking-widest shadow-xl transition">
                    Generate My First API Token
                </button>
            </form>
            {% endif %}
        </div>

        <div class="mt-12 pt-8 border-t border-gray-800">
            <h4 class="text-[10px] font-black text-gray-400 uppercase tracking-widest mb-6 flex items-center gap-2">
                <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                API Examples (Documentation)
            </h4>

            <div class="space-y-6">
                <div class="space-y-2">
                    <p class="text-[11px] font-bold text-gray-300 uppercase">1. Get Available Profiles (Templates)</p>
                    <div class="bg-[#0b0e14] p-5 rounded-2xl font-mono text-[11px] text-gray-400 border border-gray-800 overflow-x-auto shadow-inner">
                        <span class="text-green-500">curl</span> -X GET {{ request.host_url }}api/v1/user/templates \<br>
                        &nbsp;&nbsp;-H <span class="text-yellow-500">"Authorization: Bearer {{ user_data.api_token or 'YOUR_TOKEN' }}"</span>
                        
                        <div class="mt-4 pt-4 border-t border-gray-800/50 text-gray-500">
                            <span class="text-gray-600">// Expected Response:</span><br>
                            {<br>
                            &nbsp;&nbsp;<span class="text-blue-400">"status"</span>: "success",<br>
                            &nbsp;&nbsp;<span class="text-blue-400">"templates"</span>: ["Basic_Profile", "Advanced_Hosting"]<br>
                            }
                        </div>
                    </div>
                </div>

                <div class="space-y-2">
                    <p class="text-[11px] font-bold text-gray-300 uppercase">2. Check if Zone Exists</p>
                    <div class="bg-[#0b0e14] p-5 rounded-2xl font-mono text-[11px] text-gray-400 border border-gray-800 overflow-x-auto shadow-inner">
                        <span class="text-green-500">curl</span> -X GET {{ request.host_url }}api/v1/user/zone/check/example.com \<br>
                        &nbsp;&nbsp;-H <span class="text-yellow-500">"Authorization: Bearer {{ user_data.api_token or 'YOUR_TOKEN' }}"</span>
                    </div>
                </div>

                <div class="space-y-2">
                    <p class="text-[11px] font-bold text-gray-300 uppercase">3. Create New Master Zone</p>
                    <div class="bg-[#0b0e14] p-5 rounded-2xl font-mono text-[11px] text-gray-400 border border-gray-800 overflow-x-auto shadow-inner">
                        <span class="text-green-500">curl</span> -X POST {{ request.host_url }}api/v1/user/zone/create \<br>
                        &nbsp;&nbsp;-H <span class="text-yellow-500">"Authorization: Bearer {{ user_data.api_token or 'YOUR_TOKEN' }}"</span> \<br>
                        &nbsp;&nbsp;-H "Content-Type: application/json" \<br>
                        &nbsp;&nbsp;-d '{<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">"domain"</span>: "example.com", <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">"template_name"</span>: "YOUR_TEMPLATE_NAME", <span class="text-gray-600">// REQUIRED</span><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">"sync"</span>: true <br>
                        &nbsp;&nbsp;}'
                    </div>
                </div>

                <div class="space-y-2">
                    <p class="text-[11px] font-bold text-gray-300 uppercase">4. Add Record (Forward: A, CNAME, TXT etc)</p>
                    <div class="bg-[#0b0e14] p-5 rounded-2xl font-mono text-[11px] text-gray-400 border border-gray-800 overflow-x-auto shadow-inner">
                        <span class="text-green-500">curl</span> -X POST {{ request.host_url }}api/v1/user/record/add \<br>
                        &nbsp;&nbsp;-H <span class="text-yellow-500">"Authorization: Bearer {{ user_data.api_token or 'YOUR_TOKEN' }}"</span> \<br>
                        &nbsp;&nbsp;-H "Content-Type: application/json" \<br>
                        &nbsp;&nbsp;-d '{<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">"domain"</span>: "example.com", <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">"name"</span>: "web", <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">"type"</span>: "A", <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">"value"</span>: "1.2.3.4", <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">"sync"</span>: true <br>
                        &nbsp;&nbsp;}'
                    </div>
                </div>

                <div class="space-y-2">
                    <p class="text-[11px] font-bold text-gray-300 uppercase">5. Add Reverse Record (PTR)</p>
                    <div class="bg-[#0b0e14] p-5 rounded-2xl font-mono text-[11px] text-gray-400 border border-gray-800 overflow-x-auto shadow-inner">
                        <span class="text-green-500">curl</span> -X POST {{ request.host_url }}api/v1/user/record/add \<br>
                        &nbsp;&nbsp;-H <span class="text-yellow-500">"Authorization: Bearer {{ user_data.api_token or 'YOUR_TOKEN' }}"</span> \<br>
                        &nbsp;&nbsp;-H "Content-Type: application/json" \<br>
                        &nbsp;&nbsp;-d '{<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">"domain"</span>: "1.168.192.in-addr.arpa", <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">"name"</span>: "10", <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">"type"</span>: "PTR", <br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="text-blue-400">"value"</span>: "nas.example.com" <br>
                        &nbsp;&nbsp;}'
                    </div>
                </div>

                <div class="space-y-2">
                    <p class="text-[11px] font-bold text-gray-300 uppercase">6. Manual Cluster Sync</p>
                    <div class="bg-[#0b0e14] p-5 rounded-2xl font-mono text-[11px] text-gray-400 border border-gray-800 overflow-x-auto shadow-inner">
                        <span class="text-green-500">curl</span> -X POST {{ request.host_url }}api/v1/user/sync \<br>
                        &nbsp;&nbsp;-H <span class="text-yellow-500">"Authorization: Bearer {{ user_data.api_token or 'YOUR_TOKEN' }}"</span> \<br>
                        &nbsp;&nbsp;-H "Content-Type: application/json" \<br>
                        &nbsp;&nbsp;-d '{<span class="text-blue-400">"domain"</span>: "example.com"}'
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{% endblock %}