{% 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 %}
                    {% if share_with_self %}
                        <h3>{% translate "Share this secret with yourself" %}</h3>
                        <span class="text-muted">
                            {% blocktrans %}Grant yourself access so you can edit or delete this
                                secret.{% endblocktrans %}
                        </span>
                    {% else %}
                        <h3>{% translate "Share this secret" %}</h3>
                        <span class="text-muted">{% translate "Grant other users access to this secret" %}</span>
                    {% endif %}
                {% 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 %}
            {% if share_with_self %}
                <div class="row mb-3 justify-content-center text-center">
                    <div class="col-10">
                        <p class="text-muted">
                            {% blocktrans with username=request.user.username %}
                                This will share the secret with you ({{ username }}) only.
                            {% endblocktrans %}
                        </p>
                    </div>
                </div>
            {% else %}
                <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>
            {% endif %}

            <div class="row mb-5 justify-content-center" id="create-share-form-container"
                 {% if not form.is_bound and not share_with_self %}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">
                                {% if share_with_self %}
                                    <input type="hidden" name="{{ form.user.name }}" value="{{ request.user.pk }}">
                                    <input type="hidden" name="{{ form.group.name }}" value="">
                                {% endif %}

                                <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-picker
                                         data-td-target-input="nearest"
                                         data-td-target-toggle="nearest">
                                        <input type="text" name="{{ form.granted_until.name }}" class="form-control"
                                               placeholder="{% translate "(never)" %}"
                                               id="{{ form.granted_until.id_for_label }}"
                                               data-td-target="#{{ form.granted_until.id_for_label }}_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"
                                            type="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 %}{% if share_with_self %}?share_with_self=1{% endif %}">
                                        <i class="fa fa-share fa-fw"></i>
                                        {% if share_with_self %}
                                            {% translate "Share with me" %}
                                        {% else %}
                                            {% translate "Share" %}
                                        {% endif %}
                                    </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="secret-share-modal-users">
                                    {{ 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="secret-share-modal-groups">
                                    {{ 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 %}
    {% if not share_with_self %}
        <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>
    {% else %}
        <script>
            // In self-share mode, Cancel just closes the modal
            var cancelShareFormButton = document.getElementById('cancel-share-form-button')
            cancelShareFormButton.addEventListener('click', () => {
                var modalEl = document.getElementById('share-secret-modal')
                if (modalEl && window.bootstrap && bootstrap.Modal) {
                    var modal = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl)
                    modal.hide()
                }
            })
        </script>
    {% endif %}

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