{% extends "base/base.html" %}
{% comment %}
    SPDX-License-Identifier: AGPL-3.0-or-later
    Copyright (C) 2022-2023 Brennen Chiu
    Copyright (C) 2023-2026 Colin B. Macdonald
    Copyright (C) 2024 Aden Chan
    Copyright (C) 2024, 2026 Aidan Murphy
{% endcomment %}
{% block title %}
    Create users
{% endblock title %}
{% block page_heading %}
    Create users
{% endblock page_heading %}
{% block main_content %}
    <style>
        table {
        counter-reset: tableCount;
        }
        .counterCell:before {
        content: counter(tableCount);
        counter-increment: tableCount;
        }
        th,
        td {
        vertical-align: middle;
        }
    </style>
    <div class="card">
        <div class="card-header">
            <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                    <a class="nav-link{% if current_page == "single" %} active{% endif %}"
                       href="{% url 'signup_single' %}">Create single user</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link{% if current_page == "multiple" %} active{% endif %}"
                       href="{% url 'signup_multiple' %}">Create multiple users</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link{% if current_page == "import" %} active{% endif %}"
                       href="{% url 'signup_import' %}">Import users from file</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            {% block card_content %}
            {% endblock card_content %}
            <p>
                <strong>Please note:</strong> user links will <em>expire</em>
                in {{ link_expiry_period }}.
            </p>
            {% include "../base/alert_messages.html" with messages=messages %}
        </div>
    </div>
    {% if links %}
        <div class="mt-3" style="width: 100%; text-align: center">
            <table class="table table-sm">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Usernames</th>
                        <th scope="col">Groups</th>
                        <th scope="col">Links</th>
                        <th scope="col">
                            {% if tsv %}
                                <button type="button"
                                        class="btn btn-primary"
                                        onclick="copyToClipboard(this)"
                                        id="copy-all"
                                        data-copyText="{{ tsv|safe }}">Copy all</button>
                            {% endif %}
                            {% if csv %}
                                <button type="button"
                                        class="btn btn-primary"
                                        onclick="downloadCSV(this)"
                                        id="download-all"
                                        data-downloadText="{{ csv|safe }}"
                                        data-filename="new_users.csv">Download csv</button>
                            {% endif %}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in links %}
                        <tr>
                            <td class="counterCell"></td>
                            <td>{{ user.username }}</td>
                            <td>{{ user.groups }}</td>
                            <td id="link">{{ user.link }}</td>
                            <td>
                                <button type="button"
                                        class="btn btn-primary"
                                        style="margin-left: 4px"
                                        onclick="copyToClipboard(this)"
                                        data-copyText="{{ user.link }}"
                                        id="copy-button-{{ forloop.counter0 }}">Copy</button>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
    <script>
	    // TODO: refactor into frontend_utils
            async function downloadCSV(buttonObj) {
	      const csvContent = buttonObj.dataset.downloadtext;
              const blob = new Blob([csvContent], { type: 'text/csv' });

              // download via 'a' element
              const link = document.createElement("a");
              link.href = URL.createObjectURL(blob);
              link.download = buttonObj.dataset.filename;

              link.click();
              URL.revokeObjectURL(link.href);
            }

    </script>
    <div class="card my-2">
        <div class="card-body">
            <a class="btn btn-success my-2" href="{% url 'users' %}">return to user management</a>
        </div>
    </div>
{% endblock main_content %}