{% extends "base.html" %}

{% block title %}Profile - PacificPy App{% endblock %}

{% block content %}
<div class="row">
    <div class="col">
        <h1>User Profile</h1>
        
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">{{ user.username }}</h5>
                <p class="card-text">
                    <strong>Email:</strong> {{ user.email }}<br>
                    <strong>User ID:</strong> {{ user.id }}<br>
                    <strong>Member since:</strong> {{ user.created_at | format_date }}<br>
                    <strong>Status:</strong> 
                    {% if user.is_active %}
                        <span class="badge bg-success">Active</span>
                    {% else %}
                        <span class="badge bg-secondary">Inactive</span>
                    {% endif %}
                </p>
                
                <div class="mt-3">
                    <a href="/settings" class="btn btn-primary">Edit Profile</a>
                    <a href="/logout" class="btn btn-secondary">Logout</a>
                </div>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Account Settings</h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">Manage your account settings and preferences.</p>
                        <a href="/settings" class="btn btn-outline-primary">Settings</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Security</h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text">Update your password and security settings.</p>
                        <a href="/security" class="btn btn-outline-primary">Security</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}