{% extends 'base.html' %}

{% block title %}User - {{ user_obj.username }}{% 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 Details
    </h1>
    <div>
        <a href="{% url 'users:user_list' %}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-2"></i>
            Back to List
        </a>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body text-center">
                {% if user_obj.profile_picture %}
                    <img src="{{ user_obj.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_obj.first_name|first|upper }}{{ user_obj.last_name|first|upper }}</span>
                    </div>
                {% endif %}
                <h4>{{ user_obj.get_full_name|default:user_obj.username }}</h4>
                <p class="text-muted">
                    {% if user_obj.group %}
                        {{ user_obj.group.name }}
                    {% else %}
                        No Group
                    {% endif %}
                </p>
                <span class="badge bg-{% if user_obj.is_active %}success{% else %}danger{% endif %}">
                    {{ user_obj.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_obj.username }}</p>
                        <p><strong>First Name:</strong> {{ user_obj.first_name|default:"Not set" }}</p>
                        <p><strong>Last Name:</strong> {{ user_obj.last_name|default:"Not set" }}</p>
                        <p><strong>Email:</strong> {{ user_obj.email|default:"Not set" }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Phone:</strong> {{ user_obj.phone|default:"Not set" }}</p>
                        <p><strong>Department:</strong> {{ user_obj.department|default:"Not set" }}</p>
                        <p><strong>Employee ID:</strong> {{ user_obj.employee_id|default:"Not set" }}</p>
                        <p><strong>Date Joined:</strong> {{ user_obj.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_obj.has_manufacturing_permission %}success{% else %}secondary{% endif %}">
                                {{ user_obj.has_manufacturing_permission|yesno:"Yes,No" }}
                            </span>
                        </p>
                        <p><strong>Inventory:</strong> 
                            <span class="badge bg-{% if user_obj.has_inventory_permission %}success{% else %}secondary{% endif %}">
                                {{ user_obj.has_inventory_permission|yesno:"Yes,No" }}
                            </span>
                        </p>
                        <p><strong>Purchase:</strong> 
                            <span class="badge bg-{% if user_obj.has_purchase_permission %}success{% else %}secondary{% endif %}">
                                {{ user_obj.has_purchase_permission|yesno:"Yes,No" }}
                            </span>
                        </p>
                    </div>
                    <div class="col-md-6">
                        <p><strong>Sales:</strong> 
                            <span class="badge bg-{% if user_obj.has_sales_permission %}success{% else %}secondary{% endif %}">
                                {{ user_obj.has_sales_permission|yesno:"Yes,No" }}
                            </span>
                        </p>
                        <p><strong>User Management:</strong> 
                            <span class="badge bg-{% if user_obj.has_user_management_permission %}success{% else %}secondary{% endif %}">
                                {{ user_obj.has_user_management_permission|yesno:"Yes,No" }}
                            </span>
                        </p>
                        <p><strong>Superuser:</strong> 
                            <span class="badge bg-{% if user_obj.is_superuser %}danger{% else %}secondary{% endif %}">
                                {{ user_obj.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_obj.last_login|date:"d/m/Y H:i"|default:"Never" }}</p>
                <p><strong>Account Status:</strong> 
                    <span class="badge bg-{% if user_obj.is_active %}success{% else %}danger{% endif %}">
                        {{ user_obj.is_active|yesno:"Active,Inactive" }}
                    </span>
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}