HH/templates/appreciation/badge_list.html
Marwan Alwali 5bb2abf8bb update
2026-01-06 18:39:09 +03:00

138 lines
7.0 KiB
HTML

{% extends "layouts/base.html" %}
{% load i18n static %}
{% block title %}{% trans "Appreciation Badges" %} - {% endblock %}
{% block content %}
<div class="container-fluid py-4">
<!-- Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-4">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'appreciation:appreciation_list' %}">{% trans "Appreciation" %}</a></li>
<li class="breadcrumb-item active" aria-current="page">{% trans "Badges" %}</li>
</ol>
</nav>
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>
<i class="bi-award text-warning me-2"></i>
{% trans "Appreciation Badges" %}
</h2>
<a href="{% url 'appreciation:badge_create' %}" class="btn btn-primary">
<i class="bi-plus me-2"></i>
{% trans "Add Badge" %}
</a>
</div>
<!-- Badges List -->
<div class="card shadow-sm">
<div class="card-body">
{% if badges %}
<div class="row">
{% for badge in badges %}
<div class="col-md-6 col-lg-4 mb-4">
<div class="card h-100 border-2 border-warning">
<div class="card-body">
<div class="text-center mb-3">
<i class="{{ badge.icon }} fa-4x text-warning"></i>
</div>
<h5 class="card-title text-center">{{ badge.name_en }}</h5>
<p class="card-text small text-muted text-center">
{{ badge.description_en|truncatewords:10 }}
</p>
<hr>
<ul class="list-unstyled small mb-3">
<li class="mb-2">
<strong>{% trans "Type:" %}</strong>
{{ badge.get_criteria_type_display }}
</li>
<li class="mb-2">
<strong>{% trans "Value:" %}</strong>
{{ badge.criteria_value }}
</li>
<li class="mb-2">
<strong>{% trans "Earned:" %}</strong>
{{ badge.earned_count }} {% trans "times" %}
</li>
<li>
<strong>{% trans "Status:" %}</strong>
{% if badge.is_active %}
<span class="badge bg-success">{% trans "Active" %}</span>
{% else %}
<span class="badge bg-secondary">{% trans "Inactive" %}</span>
{% endif %}
</li>
</ul>
<div class="d-grid gap-2">
<a href="{% url 'appreciation:badge_edit' badge.id %}" class="btn btn-sm btn-outline-primary">
<i class="bi-pencil me-2"></i>{% trans "Edit" %}
</a>
<a href="{% url 'appreciation:badge_delete' badge.id %}" class="btn btn-sm btn-outline-danger">
<i class="bi-trash me-2"></i>{% trans "Delete" %}
</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<!-- Pagination -->
{% if page_obj.has_other_pages %}
<nav aria-label="Page navigation" class="mt-4">
<ul class="pagination justify-content-center">
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">
{% trans "Previous" %}
</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">{% trans "Previous" %}</span>
</li>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<li class="page-item active">
<span class="page-link">{{ num }}</span>
</li>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<li class="page-item">
<a class="page-link" href="?page={{ num }}">{{ num }}</a>
</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}">
{% trans "Next" %}
</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">{% trans "Next" %}</span>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
{% else %}
<div class="text-center py-5">
<i class="bi-award fa-4x text-muted mb-3"></i>
<h4 class="text-muted">{% trans "No badges found" %}</h4>
<p class="text-muted mb-3">{% trans "Create badges to motivate and recognize achievements" %}</p>
<a href="{% url 'appreciation:badge_create' %}" class="btn btn-primary">
<i class="bi-plus me-2"></i>
{% trans "Add Badge" %}
</a>
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}