{% load django_bootstrap5 %}
{% load humanize %}
{% load i18n %}

<div class="modal-body" hx-target="this" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-swap="outerHTML">
    <form id="secret-add-form">
        <div class="row mb-5 p-3">
            <div class="col-11">
                {% if shareable %}
                    <h3>{% translate "Share this secret" %}</h3>
                    <span class="text-muted">{% translate "Grant other users access to this secret" %}</span>
                {% else %}
                    <h3>{% translate "Users and groups with access" %}</h3>
                    <span class="text-muted">{% translate "You don't have permissions to share this secret." %}</span>
                {% endif %}
            </div>
            <div class="col-1">
                <button type="button" class="btn-close fa-pull-right" data-bs-dismiss="modal"
                        aria-label="Close"></button>
            </div>
        </div>
        {% if shareable %}
            <div class="row mb-2 justify-content-center text-center">
                <h5>{% translate "Share this secret with" %}</h5>
            </div>
            <div class="row mb-5 justify-content-center align-items-center">
                <div class="col-8 col-lg-4 text-center">
                    <div class="row g-0">
                        {{ form.group }}
                    </div>
                    <div class="row g-0" id="group_data">
                        <!-- TODO: Load some group data? -->
                    </div>
                </div>
                <div class="col-lg-1 my-2 my-lg-0 text-center">
                    <span class="text-muted">{% translate "or" %}</span>
                </div>
                <div class="col-8 col-lg-4 text-center">
                    <div class="row g-0">
                        {{ form.user }}
                    </div>
                    <div class="row g-0" id="user_data">
                        <!-- TODO: Load some user data? -->
                    </div>
                </div>
            </div>
            <div class="row mb-5 justify-content-center" id="create-share-form-container"
                 {% if not form.is_bound %}style="display: none"{% endif %}>
                <div class="col-7 col-lg-5 col-xl-4">
                    <div class="row justify-content-center">
                        <div class="card">
                            <div class="card-body">
                                <div class="mb-3 required">
                                    <label class="form-label"
                                           for="{{ form.granted_until.id_for_label }}">{% translate "Expires on" %}</label>
                                    <div class="input-group" id="{{ form.granted_until.id_for_label }}_picker"
                                         data-td-target-input="nearest"
                                         data-td-target-toggle="nearest">
                                        <input type="text" name="{{ form.granted_until.name }}" class="form-control"
                                               required
                                               placeholder="{% translate "(never)" %}"
                                               id="{{ form.granted_until.id_for_label }}"
                                               data-td-target="#id_granted_until_picker"
                                               {% if form.granted_until.value %}value="{{ form.granted_until.value }}"{% endif %}
                                        />
                                        <button class="btn btn-light border"
                                                data-td-target="#{{ form.granted_until.id_for_label }}_picker"
                                                data-td-toggle="datetimepicker" type="button">
                                            <i class="fa fa-calendar"></i>
                                        </button>
                                    </div>
                                    <div class="form-text">{% translate "Leave blank to share the secret permanently" %}</div>
                                </div>
                                {% bootstrap_field form.grant_description %}
                                <div class="d-flex justify-content-between">
                                    <button class="btn btn-outline-secondary" id="cancel-share-form-button">
                                        <i class="fa fa-times-circle fa-fw"></i> {% translate "Cancel" %}
                                    </button>
                                    <button class="btn btn-outline-accent"
                                            hx-post="{% url "secrets.secret-share" hashid=secret.hashid %}">
                                        <i class="fa fa-share fa-fw"></i> {% translate "Share" %}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="row">
            <div class="accordion">
                {% if shares.users %}
                    <div class="col-12 mb-2">
                        <div class="accordion-item mb-2">
                            <h1 class="accordion-header" id="secret-share-modal-users-header">
                                <a class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                   href="#secret-share-modal-users" aria-expanded="false"
                                   aria-controls="body-{{ transponder.cn }}">
                                    {{ shares.users|length }} {% translate "users with access" %}
                                </a>
                            </h1>

                            <div id="secret-share-modal-users" class="accordion-collapse collapse"
                                 aria-labelledby="secret-share-modal-users-header">
                                <div class="accordion-body">
                                    {% for share in shares.users %}
                                        {% include 'secrets/share_content/_share_list_entry.html' with shareable=shareable type="user" %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
                {% if shares.groups %}
                    <div class="col-12">
                        <div class="accordion-item mb-2">
                            <h1 class="accordion-header" id="secret-share-modal-groups-header">
                                <a class="accordion-button collapsed align-items-center" type="button"
                                   data-bs-toggle="collapse"
                                   href="#secret-share-modal-groups" aria-expanded="false"
                                   aria-controls="body-{{ transponder.cn }}">
                                    {{ shares.groups|length }} {% translate "groups with access" %}
                                </a>
                            </h1>
                            <div id="secret-share-modal-groups" class="accordion-collapse collapse"
                                 aria-labelledby="secret-share-modal-groups-header">
                                <div class="accordion-body">
                                    {% for share in shares.groups %}
                                        {% include 'secrets/share_content/_share_list_entry.html' with type="group" %}
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </form>
</div>

{% if shareable %}
    <script>
        var formContainer = document.getElementById('create-share-form-container')
        var groupElJQ = $('#id_group')
        var userElJQ = $('#id_user')

        groupElJQ.select2({
            dropdownParent: document.getElementById('share-secret-modal'),
            placeholder: '{% translate "Choose a group" %}',
        })
        groupElJQ.on('change', function () {
            userElJQ.val(null).trigger('change.select2')
            if (groupElJQ.val()) {
                formContainer.style.removeProperty('display')
            } else {
                formContainer.style.display = 'none'
            }
        })
        userElJQ.select2({
            dropdownParent: document.getElementById('share-secret-modal'),
            placeholder: '{% translate "Choose a user" %}',
        })

        userElJQ.on('change', function () {
            groupElJQ.val(null).trigger('change.select2')
            if (userElJQ.val()) {
                formContainer.style.removeProperty('display')
            } else {
                formContainer.style.display = 'none'
            }
        })

        var cancelShareFormButton = document.getElementById('cancel-share-form-button')
        cancelShareFormButton.addEventListener('click', () => {
            formContainer.style.display = 'none'
            groupElJQ.val(null).trigger('change.select2')
            userElJQ.val(null).trigger('change.select2')
        })
    </script>
    <script>
        var tdOptions = {
            display: {
                buttons: {
                    clear: true,
                    close: true,
                },
                icons: {
                    time: 'fa fa-clock',
                    date: 'fa fa-calendar',
                    up: 'fa fa-arrow-up',
                    down: 'fa fa-arrow-down',
                    previous: 'fa fa-chevron-left',
                    next: 'fa fa-chevron-right',
                    today: 'fa fa-calendar-check',
                    clear: 'fa fa-trash',
                    close: 'fa fa-times-circle'
                }
            },
            localization: {
                format: 'yyyy-MM-dd HH:mm'
            }
        }
        var td_picker = new window.TempusDominus(document.getElementById('{{ form.granted_until.id_for_label }}_picker'), tdOptions)
    </script>

    {% if show_object %}
        <script>
            var showObj = document.querySelector('div [data-obj-fade="true"]')
            {% if show_object.type == 'group' %}
                new bootstrap.Collapse('#secret-share-modal-groups').show()
            {% else %}
                new bootstrap.Collapse('#secret-share-modal-users').show()
            {% endif %}
            setTimeout(() => {
                showObj.scrollIntoView({behavior: 'smooth', block: 'start'})
            }, 500)
            showObj.animate([{}, {backgroundColor: 'var(--bs-success-bg-subtle)'}], {duration: 500, fill: "forwards"})
        </script>
    {% endif %}
{% endif %}
