{% load i18n fontawesome_5 %}

<div class="input-group" title="{{ widget.value|stringformat:'s' }}">
    <input aria-describedby="copy-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="copyClipboard()">
        <span id="copy-btn" class="btn btn-default" value="{% trans 'Copy to clipboard' %}" title="{% trans 'Copy to clipboard' %}">{% fa5_icon 'clipboard' 'far' %}</span>
    </div>
</div>

<script>
    function copyClipboard() {
      var copyText = document.getElementById("id_{{ widget.name }}");
      copyText.select();
      copyText.setSelectionRange(0, 99999); /* For mobile devices */
      document.execCommand("copy");
      alert("{% trans 'Copied to clipboard' %}");
    }
</script>