{% extends "base.html" %}
{% load django_bootstrap5 %}
{% load humanize %}
{% load i18n %}
{% load static %}
{% block title %}
    {% if secret %}
        {% blocktrans with secret.name as name %}Edit '{{ name }}'{% endblocktrans %}
    {% else %}
        {% blocktrans %}Add {{ pretty_content_type }}{% endblocktrans %}
    {% endif %}
{% endblock %}
{% block content %}
    <div class="container-xxl">
        <h2 class="mb-3">
            {% if secret %}
                {% blocktrans with secret.name as name %}Edit {{ pretty_content_type }} '{{ name }}'
                {% endblocktrans %}
            {% else %}
                {% blocktrans %}Add {{ pretty_content_type }}{% endblocktrans %}
            {% endif %}
        </h2>
        <div class="card">
            <div class="card-body mx-5 mt-4 mb-3">
                {% if form.non_field_errors %}
                    <div class="row">
                        <div class="col-12 alert alert-danger" role="alert">
                            {% translate "There was a problem with your request:" %}
                            <ul>
                                {% for error in form.non_field_errors %}
                                    <li>{{ error }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                {% endif %}

                <form role="form" method="POST" {% block form_attributes %}{% endblock %}>
                    {% csrf_token %}
                    <div class="row mb-3">
                        <div class="col-12 d-grid gap-4">
                            <h3 class="mb-3">{% translate "Basic information" %}</h3>
                            <div class="row gap-xl-3 mb-5">
                                {% bootstrap_field form.name layout="horizontal" label_class="searchable" placeholder="My secret..." %}
                                {% bootstrap_field form.description layout="horizontal" label_class="searchable" placeholder="(optional)" %}
                            </div>

                            <h3 class="mb-3">{% translate "Secret information" %}</h3>
                            <div class="row gap-xl-3 mb-5">
                                {% block content_type_fields %}{% endblock %}
                            </div>

                            <h3 class="mb-3">{% translate "Access control" %}</h3>
                            <div class="row gap-xl-3 mb-5 justify-content-between">
                                <div class="col-md-2 text-nowrap">
                                    <label class="col-form-label py-0">{{ form.access_policy.label }}</label>
                                </div>
                                <div class="col-md-2 text-nowrap">
                                    {{ form.access_policy }}
                                </div>
                                <div class="col-md-6 me-md-3 me-xl-auto">
                                    <p class="form-control-plaintext py-0 pe-xl-5">
                                        {% blocktranslate %}
                                            <b><em>Discoverable</em></b> means the secret will show up in search results
                                            for all users, but they will not have access unless someone shared this
                                            secret with them.
                                            <br><br>
                                            <b><em>Everyone</em></b> will let all users access the secret without the
                                            need to grant access.
                                            <br><br>
                                            <b><em>Hidden</em></b> will reveal the existence of the secret and its
                                            contents only to users who have been granted access.
                                        {% endblocktranslate %}
                                    </p>
                                </div>
                            </div>
                            <div class="row gap-xl-3 mb-5 justify-content-between">
                                <div class="col-md-2">
                                    <label class="col-form-label py-0">{{ form.needs_changing_on_leave.label }}</label>
                                </div>
                                <div class="col-md-2 text-nowrap form-check form-switch">
                                    {{ form.needs_changing_on_leave }}
                                </div>
                                <div class="col-md-6 me-md-3 me-xl-auto">
                                    <p class="form-control-plaintext py-0 pe-xl-5">
                                        {{ form.needs_changing_on_leave.help_text }}
                                    </p>
                                </div>
                            </div>

                            {% if not secret %}
                                <div id="initialShareFields">
                                    <h3 class="mb-5">{% translate "Grant initial access" %}</h3>
                                    <div class="row gap-xl-3">
                                        {% bootstrap_field form.shared_groups_on_create layout="horizontal" %}
                                        <div class="row g-0" id="reasonFieldContainer"
                                             {% if not form.shared_groups_on_create.initial and not form.is_bound %}hidden{% endif %}>
                                            {% bootstrap_field form.grant_description layout="horizontal" %}
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <button type="submit" class="btn btn-outline-accent px-3 mt-3">
                        {% if secret %}
                            {% translate "Save" %}
                        {% else %}
                            {% translate "Create" %}
                        {% endif %}
                    </button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block additionalJS %}
    {% if not secret %}
        <script>
            const sharedGroupsField = $('#{{ form.shared_groups_on_create.auto_id }}').select2();
            const accessPolicyAnyValue = '2';  // TODO: Make this value dynamic somehow
            const accessPolicyField = document.getElementById('{{ form.access_policy.auto_id }}')
            const reasonFieldContainer = document.getElementById('reasonFieldContainer')
            const shareFieldsContainer = document.getElementById('initialShareFields')

            accessPolicyField.addEventListener('change', (e) => {
                if (e.target["value"] === accessPolicyAnyValue) {
                    shareFieldsContainer.setAttribute('hidden', '')
                } else {
                    shareFieldsContainer.removeAttribute('hidden')
                    shareFieldsContainer.scrollIntoView()
                }
            })
            sharedGroupsField.on('change', function () {
                if (sharedGroupsField.val().length) {
                    reasonFieldContainer.removeAttribute('hidden')
                    reasonFieldContainer.scrollIntoView()
                } else {
                    reasonFieldContainer.setAttribute('hidden', '')
                }
            })
        </script>
    {% endif %}
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            let searchableLabels = document.getElementsByClassName('searchable');
            [...searchableLabels].map(el => {
                el.insertAdjacentHTML('beforeend', '<i class="fa fa-search fa-xs secret-extra-icon lh-1 align-middle"></i>')
                new bootstrap.Tooltip(el.querySelector('i'), {
                    placement: 'top',
                    title: '{% translate "This field will also be considered when searching." %}'
                })
            });
            let securelySavedLabels = document.getElementsByClassName('securely-saved');
            [...securelySavedLabels].map(el => {
                el.insertAdjacentHTML('beforeend', '<i class="fa fa-lock fa-xs secret-extra-icon lh-1 align-middle"></i>')
                new bootstrap.Tooltip(el.querySelector('i'), {
                    placement: 'top',
                    title: '{% translate "This field will be securely stored." %}'
                })
            });
        })
    </script>
{% endblock %}
