{% load permission_tags %}

{% if role == 'admin' %}
    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-{% if size == 'lg' %}sm{% else %}xs{% endif %} font-medium bg-red-100 text-red-800">
        <i class="fas fa-crown mr-1"></i>Administrator
    </span>
{% elif role == 'team_leader' %}
    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-{% if size == 'lg' %}sm{% else %}xs{% endif %} font-medium bg-blue-100 text-blue-800">
        <span>👔</span>Team Leader
    </span>
{% elif role == 'loan_officer' %}
    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-{% if size == 'lg' %}sm{% else %}xs{% endif %} font-medium bg-green-100 text-green-800">
        <i class="fas fa-handshake mr-1"></i>Loan Officer
    </span>
{% elif role == 'secretary' %}
    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-{% if size == 'lg' %}sm{% else %}xs{% endif %} font-medium bg-purple-100 text-purple-800">
        <i class="fas fa-user-secret mr-1"></i>Secretary
    </span>
{% elif role == 'borrower' %}
    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-{% if size == 'lg' %}sm{% else %}xs{% endif %} font-medium bg-gray-100 text-gray-800">
        <span>👤</span>Borrower
    </span>
{% else %}
    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-{% if size == 'lg' %}sm{% else %}xs{% endif %} font-medium bg-gray-100 text-gray-800">
        {{ role|title_case }}
    </span>
{% endif %}