{{template "base" .}}

{{define "title"}}Profile - Webhooker{{end}}

{{define "content"}}
<div class="container mt-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <h1 class="mb-4">User Profile</h1>
            
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="row align-items-center mb-3">
                        <div class="col-auto">
                            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-person-circle text-primary" viewBox="0 0 16 16">
                                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                                <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
                            </svg>
                        </div>
                        <div class="col">
                            <h3 class="mb-0">{{.User.Username}}</h3>
                            <p class="text-muted mb-0">User ID: {{.User.ID}}</p>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Account Information</h5>
                            <dl class="row">
                                <dt class="col-sm-4">Username</dt>
                                <dd class="col-sm-8">{{.User.Username}}</dd>
                                
                                <dt class="col-sm-4">Account Type</dt>
                                <dd class="col-sm-8">Standard User</dd>
                            </dl>
                        </div>
                        <div class="col-md-6">
                            <h5>Settings</h5>
                            <p class="text-muted">Profile settings and preferences will be available here.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-4">
                <a href="/" class="btn btn-secondary">Back to Home</a>
            </div>
        </div>
    </div>
</div>
{{end}}