{% load i18n fontawesome_5 %}

<div class="input-group w-100" title="{{ widget.value|stringformat:'s' }}">
    <input id="gen-data-input" aria-describedby="gen-data-btn" type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}>
    <div class="input-group-append" onclick="fetchNewIdentifier()">
        <span id="gen-data-btn" class="btn btn-default" value="{% trans 'Generate new' %}" title="{% trans 'Generate new' %}">{% fa5_icon 'dice' %}</span>
    </div>
</div>
<script>
    function fetchNewIdentifier() {
        fetch("{{ widget.attrs.url }}")
            .then(function(response){
                return response.json();
            })
            .then(function(data){
                document.getElementById("gen-data-input").value = data["gen_data"];
            })
            .catch(function(error){
                console.log(error);
            });
    }
</script>