{% load i18n %}

<!-- Hidden field with all group emails -->
<input type="hidden" id="group_emails" value="{% for u in iam_users %}{% if u.email %}{{ u.email }};{% endif %}{% endfor %}">

<hr>
<div class="small">

<div id="iam-subgroups" class="cv-scroll-anchor"></div>
<table class="table table-hover table-bordered table-sm">
    <colgroup><col style="width:30%"><col style="width:30%"><col></colgroup>
    <tr class="table-success">
        <th><strong>{% translate 'Subgroups' %}</strong></th>
        <th><strong>{% translate 'Display name' %}</strong></th>
        <th><strong>{% translate 'Description' %}</strong></th>
    </tr>
    {% for g in iam_subgroups %}
    <tr>
        <td><a href="{% url 'app_data:instance_detail' g.id %}">{{ g.keyname }}</a></td>
        <td>{{ g.displayname }}</td>
        <td>{{ g.description }}</td>
    </tr>
    {% empty %}
    <tr><td colspan="3" class="text-muted">{% translate 'No subgroups' %}</td></tr>
    {% endfor %}
</table>

<div id="iam-users" class="cv-scroll-anchor"></div>
<table class="table table-hover table-bordered table-sm">
    <colgroup><col style="width:18%"><col style="width:10%"><col style="width:20%"><col style="width:22%"><col style="width:15%"><col></colgroup>
    <tr class="table-warning">
        <th><strong>{% translate 'Users' %}</strong></th>
        <th><strong>{% translate 'Type' %}</strong></th>
        <th><strong>{% translate 'Display name' %}</strong></th>
        <th><div class="d-flex justify-content-between align-items-center"><strong>{% translate 'Email' %}</strong><a href="#" onclick="copyEmailsToClipboard(event)" title="{% translate 'Copy all emails' %}"><i class="fa fa-copy cv-copy-icon"></i></a></div></th>
        <th><strong>{% translate 'Mobile' %}</strong></th>
        <th><strong>{% translate 'Last login' %}</strong></th>
    </tr>
    {% for u in iam_users %}
    <tr>
        <td><a href="{% url 'app_data:instance_detail' u.id %}">{{ u.keyname }}</a></td>
        <td>{{ u.kind }}</td>
        <td>{{ u.displayname }}</td>
        <td>{{ u.email }}</td>
        <td>{{ u.mobile }}</td>
        <td>{{ u.last_login }}</td>
    </tr>
    {% empty %}
    <tr><td colspan="6" class="text-muted">{% translate 'No users' %}</td></tr>
    {% endfor %}
</table>

</div>

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

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

    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 {
        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>
