{% embed "@bazar/layouts/input.twig" %}
    {% block input %}
        {{ include_css('tools/bazar/presentation/styles/inputs/date.css') }}
        {{ include_javascript('tools/bazar/libs/vendor/bootstrap-datepicker.js') }}

        <div class="input-prepend input-group">
            <span class="add-on input-group-addon">
                <i class="icon-calendar fa fa-calendar"></i>
            </span>
            <input
                type="text"
                value="{{ day }}"
                id="{{ field.name }}"
                name="{{ field.name }}"
                class="form-control bazar-date"
                {% if field.required %}required{% endif %}
            />
            <select class="form-control select-allday" name="{{ field.name }}_allday">
                <option value="1" {% if not hasTime %} selected {% endif %}>{{  _t('BAZ_ALL_DAY') }}</option>
                <option value="0" {% if hasTime %} selected {% endif %}>{{ _t('BAZ_ENTER_HOUR') }}</option>
            </select>
        </div>
        <div class="select-time {% if not hasTime %}hide{% endif %} input-prepend input-group">
            <span class="add-on input-group-addon">
                <i class="icon-time fa fa-clock"></i>
            </span>
            <select class="form-control select-hour" name="{{ field.name }}_hour">
                {% for i in range(low=0, high=23, step=1) %}
                    <option value="{{ '%02d'|format(i) }}" {% if( i == hour ) %} selected {% endif %}>{{ '%02d'|format(i) }}</option>
                {% endfor %}
            </select>
            <select class="form-control select-minutes" name="{{ field.name }}_minutes">
                {% for i in range(low=0, high=55, step=5) %}
                    <option value="{{ '%02d'|format(i) }}" {% if( i == minute ) %} selected {% endif %}>{{ '%02d'|format(i) }}</option>
                {% endfor %}
            </select>
        </div>
    {% endblock input %}
{% endembed %}

{{ include("@bazar/inputs/_date_recurrent_part.twig") }}