{% extends "layout.html" %}

{% block title %}{{ user.username }} - Flask MVC App{% endblock %}

{% block content %}
<div class="page-header">
    <h1>User Details</h1>
    <div class="header-actions">
        <a href="{{ url_for('user.edit', user_id=user.id) }}" class="btn btn-warning">Edit</a>
        <a href="{{ url_for('user.index') }}" class="btn btn-secondary">Back to List</a>
    </div>
</div>

<div class="user-detail-card">
    <div class="card">
        <div class="card-header">
            <h2>{{ user.full_name or user.username }}</h2>
        </div>
        <div class="card-body">
            <div class="detail-row">
                <label>ID:</label>
                <span>{{ user.id }}</span>
            </div>
            <div class="detail-row">
                <label>Username:</label>
                <span>{{ user.username }}</span>
            </div>
            <div class="detail-row">
                <label>Email:</label>
                <span>{{ user.email }}</span>
            </div>
            <div class="detail-row">
                <label>First Name:</label>
                <span>{{ user.first_name or 'N/A' }}</span>
            </div>
            <div class="detail-row">
                <label>Last Name:</label>
                <span>{{ user.last_name or 'N/A' }}</span>
            </div>
            <div class="detail-row">
                <label>Status:</label>
                <span class="badge badge-{{ 'success' if user.is_active else 'danger' }}">
                    {{ 'Active' if user.is_active else 'Inactive' }}
                </span>
            </div>
            <div class="detail-row">
                <label>Created At:</label>
                <span>{{ user.created_at or 'N/A' }}</span>
            </div>
            <div class="detail-row">
                <label>Updated At:</label>
                <span>{{ user.updated_at or 'N/A' }}</span>
            </div>
        </div>
        <div class="card-footer">
            <form method="POST" action="{{ url_for('user.delete', user_id=user.id) }}" 
                  onsubmit="return confirm('Are you sure you want to delete this user?');">
                <button type="submit" class="btn btn-danger">Delete User</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}