{% extends "base.html" %}

{% block title %}Node Profile{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <div class="dark-card p-8 rounded-lg shadow-2xl border border-purple-800">
        <div class="text-center mb-6">
            <div class="text-5xl mb-4">🧠</div>
            <h2 class="text-3xl font-bold text-white protocol-text">Node Profile</h2>
            <p class="text-gray-400 mt-2">MCP Protocol Endpoint Details</p>
        </div>
        
        <div class="space-y-6">
            <div class="border-l-4 border-yellow-500 pl-4">
                <label class="block text-gray-300 text-sm font-bold mb-2 protocol-text">
                    <span class="text-yellow-400">→</span> Node Identifier
                </label>
                <div class="dark-card border border-purple-700 rounded w-full py-3 px-4 text-white leading-tight bg-gray-900 bg-opacity-70">
                    <span class="protocol-text text-lg">{{ current_user.username }}</span>
                </div>
            </div>
            
            <div class="border-l-4 border-purple-500 pl-4">
                <label class="block text-gray-300 text-sm font-bold mb-2 protocol-text">
                    <span class="text-yellow-400">→</span> Node Description
                </label>
                <div class="dark-card border border-purple-700 rounded w-full py-3 px-4 text-white leading-tight min-h-32 bg-gray-900 bg-opacity-70">
                    <div class="text-gray-300">{{ current_user.description|safe }}</div>
                </div>
            </div>

            <div class="border-t border-purple-700 pt-6 mt-6">
                <div class="grid grid-cols-2 gap-4 text-center">
                    <div class="dark-card p-4 rounded border border-purple-800 bg-gray-900 bg-opacity-50">
                        <div class="text-2xl mb-2">🔗</div>
                        <div class="text-sm text-gray-400 protocol-text">Protocol</div>
                        <div class="text-white font-bold">MCP v1.0</div>
                    </div>
                    <div class="dark-card p-4 rounded border border-purple-800 bg-gray-900 bg-opacity-50">
                        <div class="text-2xl mb-2">✅</div>
                        <div class="text-sm text-gray-400 protocol-text">Status</div>
                        <div class="text-green-400 font-bold">Connected</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-6 text-center">
        <a href="{{ url_for('auth.landing') }}" class="dark-card hover:bg-purple-900 hover:bg-opacity-50 text-white font-bold py-2 px-6 rounded transition duration-300 inline-block protocol-text border border-purple-800">
            ← Back to Hub
        </a>
    </div>
</div>

<div class="mt-8 text-center text-white">
    <p class="protocol-text text-sm text-gray-400">
        <span class="text-yellow-400">※</span> Secure MCP Protocol Connection Established 
        <span class="text-yellow-400">※</span>
    </p>
</div>
{% endblock %}