{% 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-group" aria-hidden="true"></i> &nbsp; {{ group.displayname|default:group.keyname }}</h3>
<small class="text-muted">{% translate "Group details" %}</small>
<hr>{% endblock %}

{% block content %}

<!-- Hidden field with all group emails -->
<input type="hidden" id="group_emails" value="{% for z in users_direct %}{{ z.email|default:'' }};{% endfor %}{% for z in users_computed %}{{ z.email|default:'' }};{% endfor %}{% for z in users_indirect %}{{ z.email|default:'' }};{% endfor %}">

<!-- 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_group_update' in aaa.perms %}
        <li>
            <a class="dropdown-item"
            href="{% url 'app_user:group_edit' group.id %}">
            {% translate 'Edit' %}
            </a>
        </li>
        {% endif %}


        <li>
            <a class="dropdown-item" href="#" onclick="copyEmailsToClipboard(event)">
            {% translate 'Copy emails' %}
            </a>
        </li>


        {% if 'p_group_delete' in aaa.perms %}{% if not group.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' '_group' group.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>{{ group.displayname|default:group.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>{{ group.keyname }}</td></tr>

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

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

  <tr><td class="table-light" width="20%">{% translate 'Is Enabled' %}</td>
  <td>{% if group.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 group.is_builtin %}<input type="checkbox" checked disabled/>
      {% else %}<input type="checkbox" disabled/>{% endif %}
  </td></tr>

  <tr><td class="table-light" width="20%">{% translate 'Autogroup' %}</td>
    <td>{{ group.autogroup|default:'' }}</td></tr>


  <tr><td class="table-light" width="20%">{% translate 'ID' %}</td>
      <td>{{ group.id }}</td></tr>
        
</table>

<hr>

<!-- SUBGROUPS -->
<table class="table table-hover table-bordered table-sm small">
    <tr class="table-success"><td colspan="4"><strong>{% translate 'Subgroups' %}</strong></td></tr>
    <tr>
    <td class="table-light">
        <div class="d-flex flex-wrap"> 
        {% for z in group.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>



<table class="table table-hover table-bordered table-sm small">
    
    <!-- DIRECT USER DETAILS -->
    <tr class="table-warning">
        <td width="20%"><b>{% translate 'Users' %}</b></td>
        <td><b>{% translate 'Source' %}</b></td>
        <td>{% translate 'Display name' %}</td>
        <td><div class="d-flex justify-content-between align-items-center"><b>{% translate 'Email' %}</b><a href="#" onclick="copyEmailsToClipboard(event)" title="{% translate 'Copy all emails' %}"><i class="fa fa-copy cv-icon-lg"></i></a></div></td>
        <td>{% translate 'Mobile' %}</td>
        <td>{% translate 'Last Login' %}</td>
    </tr>
    
    {% for z in users_direct %}
    <tr>
        <td>
            <a href="{% url 'app_user:user_detail' z.id %}">{{ z.login}}</a>
        </td>
        <td>{% trans 'DIRECT' %}</td>
        <td>{{ z.displayname }}</td>
        <td>{{ z.email|default:'' }}</td>
        <td>{{ z.mobile|default:'' }}</td>
        <td>{{ z.last_login|date:'Y-m-d H:i:s' }} {% if z.last_login %} ({{ z.last_login|timesince }}){% endif %}</td>
    </tr>
    {% endfor %}    

    <!-- COMPUTED USER DETAILS -->
    {% for z in users_computed %}
    <tr>
        <td>
            <a href="{% url 'app_user:user_detail' z.id %}">{{ z.login}}</a>
        </td>
        <td>{% trans 'AUTO' %}</td>
        <td>{{ z.displayname }}</td>
        <td>{{ z.email|default:'' }}</td>
        <td>{{ z.mobile|default:'' }}</td>
        <td>{{ z.last_login|date:'Y-m-d H:i:s' }} {% if z.last_login %} ({{ z.last_login|timesince }}){% endif %}</td>
    </tr>
    {% endfor %}    

    <!-- INDIRECT USER DETAILS -->
    {% for z in users_indirect %}
    <tr>
        <td>
            <a href="{% url 'app_user:user_detail' z.id %}">{{ z.login}}</a>
        </td>
        <td>{% trans 'GROUP' %}</td>
        <td>{{ z.displayname }}</td>
        <td>{{ z.email|default:'' }}</td>
        <td>{{ z.mobile|default:'' }}</td>
        <td>{{ z.last_login|date:'Y-m-d H:i:s' }} {% if z.last_login %} ({{ z.last_login|timesince }}){% endif %}</td>
    </tr>
    {% endfor %}    
</table>




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

<div class="modal fade" id="DeleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<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>Group: {{ group.keyname|default:'n/a' }}</p>
</div>

<div class="modal-footer">
<form action="{% url 'app_user:group_delete' group.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 %}

<script>
function copyEmailsToClipboard(event) {
    event.preventDefault();
    const emailsField = document.getElementById('group_emails');
    const emails = emailsField.value.replace(/;+$/, ''); // Remove trailing semicolons

    if (!emails) {
        alert('{% translate "No emails to copy" %}');
        return;
    }

    // Try modern Clipboard API first
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(emails).then(() => {
            alert('{% translate "Emails copied to clipboard" %}');
        }).catch(err => {
            console.error('Failed to copy emails:', err);
            fallbackCopyToClipboard(emails);
        });
    } else {
        // Fallback for non-secure contexts (HTTP)
        fallbackCopyToClipboard(emails);
    }
}

function fallbackCopyToClipboard(emails) {
    const textArea = document.createElement('textarea');
    textArea.value = emails;
    textArea.style.position = 'fixed';
    textArea.style.left = '-999999px';
    document.body.appendChild(textArea);

    try {
        textArea.select();
        document.execCommand('copy');
        alert('{% translate "Emails copied to clipboard" %}');
    } catch (err) {
        console.error('Fallback copy failed:', err);
        alert('{% translate "Failed to copy emails" %}');
    }

    document.body.removeChild(textArea);
}
</script>

{% endblock %}



