{% extends 'base.html' %}

{% block title %}User Profile{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">
        <i class="bi bi-person me-2"></i>
        User Profile
    </h1>
    <div>
        {% if user.has_user_management_permission or user.is_superuser %}
            <a href="{% url 'users:user_edit' user.pk %}" class="btn btn-secondary me-2">
                <i class="bi bi-pencil-square me-2"></i>
                Edit User
            </a>
        {% endif %}
        <a href="{% url 'users:profile_edit' %}" class="btn btn-primary">
            <i class="bi bi-pencil me-2"></i>
            Edit Profile
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body text-center">
                {% if user.profile_picture %}
                    <img src="{{ user.profile_picture.url }}" alt="Profile Picture" class="rounded-circle mb-3" style="width: 150px; height: 150px; object-fit: cover;">
                {% else %}
                    <div class="bg-secondary rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 150px; height: 150px;">
                        <span class="text-white display-4">{{ user.first_name|first|upper }}{{ user.last_name|first|upper }}</span>
                    </div>
                {% endif %}
                <h4>{{ user.get_full_name }}</h4>
                <p class="text-muted">
                    {% if user.group %}
                        {{ user.group.name }}
                    {% else %}
                        No Group
                    {% endif %}
                </p>
                <span class="badge bg-{% if user.is_active %}success{% else %}danger{% endif %}">
                    {{ user.is_active|yesno:"Active,Inactive" }}
                </span>
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Personal Information</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Username:</strong> {{ user.username }}</p>
                        <p><strong>First Name:</strong> {{ user.first_name|default:"Not set" }}</p>
                        <p><strong>Last Name:</strong> {{ user.last_name|default:"Not set" }}</p>
                        <p><strong>Email:</strong> {{ user.email|default:"Not set" }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Phone:</strong> {{ user.phone|default:"Not set" }}</p>
                        <p><strong>Department:</strong> {{ user.department|default:"Not set" }}</p>
                        <p><strong>Employee ID:</strong> {{ user.employee_id|default:"Not set" }}</p>
                        <p><strong>Date Joined:</strong> {{ user.date_joined|date:"d/m/Y" }}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">Permissions</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong>Manufacturing:</strong> 
                            <span class="badge bg-{% if user.has_manufacturing_permission %}success{% else %}secondary{% endif %}">
                                {{ user.has_manufacturing_permission|yesno:"Yes,No" }}
                            </span>
                        </p>
                        <p><strong>Inventory:</strong> 
                            <span class="badge bg-{% if user.has_inventory_permission %}success{% else %}secondary{% endif %}">
                                {{ user.has_inventory_permission|yesno:"Yes,No" }}
                            </span>
                        </p>
                        <p><strong>Purchase:</strong> 
                            <span class="badge bg-{% if user.has_purchase_permission %}success{% else %}secondary{% endif %}">
                                {{ user.has_purchase_permission|yesno:"Yes,No" }}
                            </span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Sales:</strong> 
                            <span class="badge bg-{% if user.has_sales_permission %}success{% else %}secondary{% endif %}">
                                {{ user.has_sales_permission|yesno:"Yes,No" }}
                            </span>
                        </p>
                        <p><strong>User Management:</strong> 
                            <span class="badge bg-{% if user.has_user_management_permission %}success{% else %}secondary{% endif %}">
                                {{ user.has_user_management_permission|yesno:"Yes,No" }}
                            </span>
                        </p>
                        <p><strong>Superuser:</strong> 
                            <span class="badge bg-{% if user.is_superuser %}danger{% else %}secondary{% endif %}">
                                {{ user.is_superuser|yesno:"Yes,No" }}
                            </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">Account Information</h5>
            </div>
            <div class="card-body">
                <p><strong>Last Login:</strong> {{ user.last_login|date:"d/m/Y H:i"|default:"Never" }}</p>
                <p><strong>Account Status:</strong> 
                    <span class="badge bg-{% if user.is_active %}success{% else %}danger{% endif %}">
                        {{ user.is_active|yesno:"Active,Inactive" }}
                    </span>
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}