{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Groups" %}{% endblock %}
{% block content %}
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="row d-flex justify-content-between">
                <div class="col">
                    <h1 class="h1">
                        {% trans "Groups" %}
                    </h1>
                </div>
                <div class="col text-end align-self-center ps-3">
                    <div class="groupsearch d-flex align-items-center border border-2 rounded-3 ps-3" role="search" id="groupsearch-div">
                        <label for="group-list-search">
                            <i class="fa fa-search search-icon" aria-hidden="true"></i>
                        </label>
                        <select id="group-list-search" type="text" class="form-control"
                                placeholder="Search group...">
                        </select>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body table-responsive">
                    <table class="table table-hover">
                        <tr>
                            <th>{% trans "Groupname" %}</th>
                            <th>{% trans "Membercount" %}</th>
                            <th>{% trans "Secrets shared" %}</th>
                        </tr>
                        {% for group in groups %}
                            <tr>
                                <td>
                                    <a href="{% url 'accounts.group-detail' groupname=group.name %}">{{ group.name }}</a>
                                </td>
                                <td>
                                    <span>{{ group.member_count }}</span>
                                </td>
                                <td>
                                    <span>{{ group.secret_count }}</span>
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
            {% include "_pagination.html" %}
        </div>
    </div>
{% endblock %}
{% block additionalJS %}
    <script>
        const groupUrl = '{% url "accounts.search-group" %}'
        const ts = new TomSelect('#group-list-search', {
            closeAfterSelect: true,
            create: false,
            dropdownParent: '#groupsearch-div',
            labelField: 'name',
            maxItems: 1,
            openOnFocus: false,
            searchField: ['name'],
            valueField: 'name',
            load: function (query, callback) {
                if (!query) return callback();
                const params = new URLSearchParams({
                    q: query,
                });
                fetch(`${groupUrl}?${params.toString()}`)
                    .then(res => res.json())
                    .then(json => callback(json.results))
                    .catch(() => callback());
            },

            render: {
                option(data, escape) {
                    return `<div class="row g-0 align-items-center">
                                <div class="col-auto ts-option-name-field">${escape(data.name)}</div>
                            </div>`;
                },
            }
        });

        ts.on('item_add', (value) => {
            ts.clear();
            window.location.href = ts.options[value].url;
        });

        const groupSearchBar = document.getElementById('groupsearch-div');
        const inputEl = groupSearchBar.querySelector('input');
        groupSearchBar.addEventListener('click', _ => {
            if (document.activeElement === inputEl) return;
            inputEl.focus();
        })
    </script>

{% endblock %}