{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}

{% block title %}
<h3><i class="fa fa-user-secret" aria-hidden="true"></i> &nbsp; {{ role.displayname|default:role.keyname }}</h3>
<small class="text-muted">{% translate "Role details" %}</small>
<hr>{% endblock %}

{% block content %}

<!-- UI action selector -->
<div class="dropdown">       
  <button class="btn btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown">
      <i class="fa fa-lg fa-plus me-2"></i>{% translate 'Action' %}
  </button>

  <ul class="dropdown-menu">

      {% if 'p_role_update' in aaa.perms %}
      <li>
          <a class="dropdown-item" 
          href="{% url 'app_user:role_edit' role.id %}">
          {% translate 'Edit' %}
          </a>
      </li>
      {% endif %}
    

      {% if 'p_role_delete' in aaa.perms %}{% if not role.is_builtin %}
      <li>
          <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#DeleteModal">
              {% translate "Delete" %}
          </a>
      </li>
      {% endif %}{% endif %}


      {% if ui_texteditor %}
      <li><hr class="dropdown-divider"></li>
      <li>
        <a class="dropdown-item" href="{% url 'app_data:texteditor' '_role' role.id %}">
          {% translate "Code" %}</a>
      </li>
      {% endif %}


  </ul>
</div>



<hr>

<table class="table table-hover table-bordered table-sm">

    <tr class="table-primary">
        <td colspan="2">
            <div class="d-flex">
                <div class="flex me-2">
                      <strong>{{ role.displayname|default:role.keyname }}</strong>
                </div>
                <div class="flex ms-auto me-2"><!-- REVISIONS -->
                    <div class="dropdown">
                        <button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button"
                            data-bs-toggle="dropdown">
                            {% translate 'Revisions' %}
                        </button>
                        <ul class="dropdown-menu">
                            {% for rev in revisions %}
                            <li>
                                <pre>  {{ rev.date}} - {{ rev.action }} - {{  rev.username }}  </pre>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        </td>
      </tr>

  <tr><td class="table-light" width="20%">{% translate 'Keyname(*)' %}</td>
  <td>{{ role.keyname }}</td></tr>

  <tr><td class="table-light" width="20%">{% translate 'Display Name' %}</td>
  <td>{{ role.displayname|default:'' }}</td></tr>


  <tr><td class="table-light" width="20%">{% translate 'Description' %}</td>
  <td>{{ role.description|default:'' }}</td></tr>

  <tr><td class="table-light" width="20%">{% translate 'Is Enabled' %}</td>
  <td>{% if role.is_enabled %}<input type="checkbox" checked disabled/>
      {% else %}<input type="checkbox" disabled/>{% endif %}
  </td></tr>

  <tr><td class="table-light" width="20%">{% translate 'Built-in' %}</td>
  <td>{% if role.is_builtin %}<input type="checkbox" checked disabled/>
      {% else %}<input type="checkbox" disabled/>{% endif %}
  </td></tr>

</table>

<hr>    

<!-- USERS -->
<table class="table table-hover table-bordered table-sm small">
<tr class="table-primary"><td colspan="4"><strong>{% translate 'Users' %}</strong></td></tr>
<tr>
<td class="table-light">
    <div class="d-flex flex-wrap"> 
    {% for z in role.users.all %}
    <a class="btn btn-primary btn-sm mx-1 my-1" href="{% url 'app_user:user_detail' z.id %}" role="button">
    {{ z.login }}</a>{% endfor %}     
    {% for z in users_indirect %}
    <a class="btn btn-outline-primary btn-sm mx-1 my-1" href="{% url 'app_user:user_detail' z.id %}" role="button">
    {{ z.login }}</a>{% endfor %}     
    </div>  
</td></tr>
</table>

<!-- SUBGROUPS -->
<table class="table table-hover table-bordered table-sm small">
<tr class="table-success"><td colspan="4"><strong>{% translate 'Groups' %}</strong></td></tr>
<tr>
<td class="table-light">
    <div class="d-flex flex-wrap"> 
    {% for z in role.subgroups.all %}
    <a class="btn btn-success btn-sm mx-1 my-1" href="{% url 'app_user:group_detail' z.id %}" role="button">
    {{ z.keyname }}</a>{% endfor %}   
    {% for z in subgroups_indirect %}
    <a class="btn btn-outline-success btn-sm mx-1 my-1" href="{% url 'app_user:group_detail' z.id %}" role="button">
    {{ z.keyname }}</a>{% endfor %}   
    </div>   
</td></tr>
</table>


<!-- PERMISSIONS -->
<table class="table table-hover table-bordered table-sm small">
<tr class="table-warning"><td colspan="4"><strong>{% translate 'Permissions' %}</strong></td></tr>
<tr>
{% for perm in role.permissions.all %}
<td class="table-light" width="20%">{{ perm.keyname }}</td>
<td>{{ perm.appname|default:'' }}</td>
<td>{{ perm.displayname|default:'' }}</td>
<td>{{ perm.description|default:'' }}</td>
</tr>{%  endfor %}
</table>




<!-- DELETE CONFIRM Modal -->
    {% if role %}

    <div class="modal fade" id="DeleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">

    <div class="modal-header">
    <h1 class="modal-title fs-5" id="staticBackdropLabel">{% translate "Confirm delete ?" %}</h1>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
        
    <div class="modal-body">
    <p>Role: {{ role.keyname|default:'n/a' }}</p>
    </div>

    <div class="modal-footer">
    <form action="{% url 'app_user:role_delete' role.id %}" method="post">{% csrf_token %}
    <button role="button" class="btn btn-danger">{% translate "Delete" %}</button>
    <a role="button" class="btn btn-outline-dark" data-dismiss="modal">{% translate "Cancel" %}</a>
    </form>
    </div>

    </div>
    </div>
    </div>
    {% endif %}


{% endblock %}



