haikal/templates/users/user_detail.html
2025-08-20 20:23:03 +03:00

123 lines
6.4 KiB
HTML

{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% block title %}
{{ user_.name }}
{% endblock title %}
{% block content %}
<div class="container py-4">
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
<div class="d-flex align-items-center mb-3 mb-md-0">
<a href="{% url 'user_list' request.dealer.slug %}" class="btn btn-phoenix-secondary btn-sm me-3">
<i class="fa-regular fa-circle-left me-2"></i>{% trans "Back to Staffs" %}
</a>
<h1 class="h4 fw-bold mb-0">{% trans "Staff Profile" %}</h1>
</div>
<div class="d-flex flex-wrap gap-2">
<a href="{% url 'user_update' request.dealer.slug user_.slug %}" class="btn btn-phoenix-primary btn-sm">
<i class="fa-solid fa-pen-to-square me-2"></i>{% trans "Edit Profile" %}
</a>
<button class="btn btn-phoenix-danger btn-sm delete-btn" data-url="{% url 'user_delete' request.dealer.slug user_.slug %}"
data-message='{% trans "Are you sure you want to delete this user?" %}'
data-bs-toggle="modal" data-bs-target="#deleteModal">
<i class="fas fa-trash-alt me-2"></i>{% trans "Delete" %}
</button>
<a href="{% url 'staff_password_reset' request.dealer.slug user_.pk %}"
class="btn btn-phoenix-danger">
<i class="fas fa-key me-2"></i>{{ _("Change Password") }}
</a>
</div>
</div>
<div class="row g-4">
<div class="col-lg-4">
<div class="card h-100 border-0 shadow-sm rounded-4 hover-lift">
<div class="card-body d-flex flex-column align-items-center justify-content-center p-4">
<div class="position-relative d-inline-block mb-3">
{% if user_.logo %}
<img class="rounded-circle border border-4 border-body-tertiary"
src="{{ user_.logo.url }}" alt="{{ user_.fullname }}"
style="object-fit: cover; width: 120px; height: 120px;">
{% else %}
<div class="rounded-circle d-inline-flex align-items-center justify-content-center bg-primary text-white border border-4 border-body-tertiary"
style="width: 120px; height: 120px; font-size: 3rem;">
{{ user_.fullname|first|upper }}
</div>
{% endif %}
</div>
<h2 class="h5 fw-bold mb-1 text-center">{{ user_.name }}</h2>
<p class="small text-secondary mb-2">
<span class="badge rounded-pill bg-light text-dark fw-bold">{{ user_.groups.first.name|default:"No Role" }}</span>
</p>
<p class="small text-muted mb-3 text-center">
<a href="mailto:{{ user_.email }}" >{{ user_.email }}</a>
</p>
<div class="d-grid w-40">
<a href="tel:{{ user_.phone_number }}" class="btn btn-sm rounded-pill d-flex align-items-center justify-content-center gap-2">
<i class="fas fa-phone-alt"></i><span>{{ user_.phone_number|default:"N/A" }}</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card h-100 border-0 shadow-sm rounded-4">
<div class="card-body p-4">
<h5 class="mb-4 text-primary fw-bold">{% trans "Personal Information" %}</h5>
<dl class="row g-3 small">
<dt class="col-sm-3 text-muted">{% trans "Name (Arabic)" %}</dt>
<dd class="col-sm-9 fw-bold">{{ user_.arabic_name|default:"N/A" }}</dd>
<dt class="col-sm-3 text-muted">{% trans "Last Login" %}</dt>
<dd class="col-sm-9 fw-bold">
{{user_.user.last_login|date:"D, M d, Y H:i"|default:"N/A" }}
</dd>
<dt class="col-sm-3 text-muted">{% trans "Status" %}</dt>
<dd class="col-sm-9">
{% if user_.user.is_active %}
<span class="badge rounded-pill bg-success">{% trans "Active" %}</span>
{% else %}
<span class="badge rounded-pill bg-danger">{% trans "Inactive" %}</span>
{% endif %}
</dd>
</dl>
<hr class="my-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="mb-0 text-primary fw-bold">{% trans "Assigned Groups" %}</h5>
<a class="btn btn-sm btn-phoenix-primary rounded-pill" href="{% url 'user_groups' request.dealer.slug user_.slug %}">
<i class="fa-solid fa-users me-2"></i>{% trans "Manage Groups" %}
</a>
</div>
<div class="table-responsive">
<table class="table table-hover table-borderless fs--1 mb-0">
<thead class="bg-body-tertiary">
<tr>
<th scope="col">{% trans 'Group Name'|capfirst %}</th>
</tr>
</thead>
<tbody>
{% for group in user_.groups.all %}
<tr class="align-middle">
<td class="small text-dark">{{ group.name }}</td>
</tr>
{% empty %}
<tr>
<td class="text-secondary small">{% trans "This user is not assigned to any groups." %}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
{% include 'modal/delete_modal.html' %}
{% endblock %}