{% load i18n %}

<input id="{{ widget.attrs.id }}" type="hidden" value="{{ widget.value|add:'0' }}" name="{{ widget.name }}">
<script>
$(function () {
    $("#{{ widget.attrs.id }}").durationPicker({
      translations: {
        day: '{% trans "day" %}',
        days: '{% trans "days" %}',

        hour: '{% trans "hour" %}',
        hours: '{% trans "hours" %}',

        minute: '{% trans "minute" %}',
        minutes: '{% trans "minutes" %}',

        second: '{% trans "second" %}',
        seconds: '{% trans "seconds" %}',
      },

      showDays: true,
      showHours: true,
      showMinutes: true,
      showSeconds: true,

      onChanged: function (value, isInitializing) {
        if (!isInitializing) {
            $("#{{ widget.id }}").val(value);
        }
      }
    });
});
</script>
