{% set id = (id ?? 'time'~random())~'-time' -%}
{% set name = name ?? null -%}
{% set value = value ?? null -%}

{% do view.registerAssetBundle('craft\\web\\assets\\timepicker\\TimepickerAsset') -%}

<div class="timewrapper"
        {%- if block('attr') is defined %} {{ block('attr') }}{% endif %}>
    {%- include "_includes/forms/text" with {
        name: (name ? name~'[time]'),
        autocomplete: false,
        size: 10,
        placeholder: ' ',
        value: (value ? value|time('short') : '')
    } -%}
    <div data-icon="time"></div>
    {% if name -%}
        <input type="hidden" name="{{ name }}[timezone]" value="{{ craft.app.getTimeZone() }}">
    {%- endif -%}
</div>

{%- set localeData = craft.app.locale %}

{%- js %}
    var $timePicker = $('#{{ id|namespaceInputId|e('js') }}');
    $timePicker.timepicker($.extend({
        {% if minuteIncrement is defined %}step: '{{ minuteIncrement }}'{% endif %}
    }, Craft.timepickerOptions));

    {% if value and value.format is defined %}
        $timePicker.timepicker('setTime', {{ value|date('G') }}*3600 + {{ value|date('i') }}*60 + {{ value|date('s') }});
    {% endif %}
{%- endjs %}
