{% extends "secrets/secret_addedit.html" %}
{% load i18n %}
{% load django_bootstrap5 %}
{% block content_type_fields %}
    <div class="row mb-3 {% if not form.password.errors and form.is_bound %}is-valid{% endif %}">
        <div class="col-xl-2">
            <label class="col-form-label securely-saved" for="{{ form.password.id_for_label }}">
                {% translate "Password" %}
            </label>
        </div>
        <div class="col-xl-8">
            <div class="input-group">
                <input class="form-control {% if not form.password.errors and form.is_bound %}is-valid{% endif %}"
                       id="{{ form.password.id_for_label }}" name="{{ form.password.name }}"
                       placeholder="{% if secret %}{% trans "(unchanged)" %}{% else %}**************{% endif %}"
                       {% if not secret %}required="required"{% endif %} type="password" autocomplete="off"
                       {% if form.is_bound and not secret %}value="{{ form.password.value }}"{% endif %}>
                <span class="input-group-text" title="{% trans "Password strength" %}" id="id_password_strength">
                    {% for i in '12345'|make_list %}
                        <i class="far fa-star text-muted"></i>
                    {% endfor %}
                </span>
                <button class="btn btn-outline-dark" id="id_pwgen" type="button"
                        title="{% trans "Generate random password" %}">
                    <i class="fa fa-refresh fa-fw align-middle"></i>
                </button>
            </div>
        </div>
    </div>

    {% bootstrap_field form.username placeholder="(optional)" layout="horizontal" label_class="searchable" %}
    {% bootstrap_field form.url placeholder="(optional)" layout="horizontal" label_class="searchable" %}
{% endblock %}

{% block additionalJS %}
    {{ block.super }}
    <script>
        const passwordField = document.getElementById('id_password')
        const passwordGeneratorField = document.getElementById('id_pwgen')
        const passwordStrengthField = document.getElementById('id_password_strength')
        passwordField.generated = false

        function ratePassword() {
            let score = zxcvbn(passwordField.value.toString()).score + 1;
            let color = "text-warning-bright";
            if (!passwordField.value) {
                color = "text-muted";
                score = 0;
            } else if (score <= 2) {
                color = "text-danger-bright";
            } else if (score === 5) {
                color = "text-success-bright";
            }
            var filled_star = `<i class='fas fa-star ${color}'></i>`;
            var hollow_star = `<i class='far fa-star ${color}'></i>`;
            passwordStrengthField.innerHTML = filled_star.repeat(score) + hollow_star.repeat(5 - score)
        }

        async function generatePassword() {
            const source = await fetch('{% url 'api.generate-password' %}');
            return source.json();
        }

        document.addEventListener('DOMContentLoaded', () => {
            ratePassword();
        })

        passwordField.addEventListener('keyup', () => {
            ratePassword();
            passwordField.generated = false;
            setTimeout(function () {
                    if (!passwordField.generated) {
                        passwordField.type = 'password'
                    }
                },
                2000
            );
        })
        passwordGeneratorField.addEventListener('focusout', () => {
            setTimeout(
                function () {
                    if (document.activeElement !== passwordField) {
                        passwordField.type = 'password'
                    }
                },
                1000
            )
        })
        passwordGeneratorField.addEventListener('click', async () => {
            passwordField.value = await generatePassword()
            ratePassword();
            passwordField.type = 'text'
            passwordField.generated = true
        })
    </script>
{% endblock %}
