{% set id = id ~ '-time' -%}
{% set name = name is defined ? name -%}
{% set value = value is defined ? value -%}

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

<div class="timewrapper">
    {%- include "_includes/forms/text" with {
        name: (name ? name~'[time]'),
        autocomplete: false,
        size: 10,
        value: (value ? value|time('short') : '')
    } -%}
    {% 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({
        timeFormat: '{{ craft.app.locale.getTimeFormat('short', 'php') }}',
        closeOnWindowScroll: false,
        orientation: '{{ localeData.getOrientation() == 'ltr' ? 'l' : 'r' }}',
        {% if minuteIncrement is defined %}step: '{{ minuteIncrement }}',{% endif %}
        lang: {
            am: '{{ localeData.getAMName()|lower }}',
            AM: '{{ localeData.getAMName() }}',
            pm: '{{ localeData.getPMName()|lower }}',
            PM: '{{ localeData.getPMName() }}'
        }
    });

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