{% if form is defined and is_granted('ROLE_CLIENT') == false %}
    {{ form_start(form, {
        'attr' : {
            'method':  'post',
            'action': action_url | default(url('workorder_search')),
            'class': 'row form-horizontal'
        }
    }) }}
    <div class="input-group">
        {{ form_widget(form.number, { 'attr': { 'class' : 'form-control', 'placeholder' : 'Search Work Order #' | trans } }) }}
        <div class="input-group-append">
            <button class="btn btn-outline-primary" type="button">
                <i class="fa fa-search"></i>
            </button>
            <a class="btn btn-outline-primary notification-toggle bg-white" data-toggle="popover" data-trigger="click"
                    type="button" id='show-notifications'>
                <i class="far fa-bell" aria-hidden="true"></i>
            </a>
            <a class="btn btn-outline-primary" href="{{ url('workorder_search') }}"
               title="{{ 'Advanced search' | trans }}">... </a>
        </div>
        {{ form_rest(form) }}
    </div>
    {{ form_end(form) }}
{% endif %}
<div id='popover-content-notification' class="d-none col-12 col-md-3">
    {{ render(controller('Chloe\\Controller\\User\\NotificationController:indexAction')) }}
</div>

{#<script type="text/javascript">#}

{#    $(document).ready(function(){#}

{#        var toggleNotification = $('.notification-toggle');#}
{#        toggleNotification.click(function() {#}
{#            toggleNotification.popover({#}
{#                html: true,#}
{#                title: 'Notifications',#}
{#                content: function() {#}

{#                    // Load notifications with ajax only when there have RT response available.#}
{#                    if(rtAvailable == true){#}
{#                        $.ajax({#}
{#                            url: '{{ url('index_notification') }}',#}
{#                            type: "GET",#}
{#                            success: function(response) {#}
{#                                $('#popover-content-notification').html(response);#}
{#                            }#}
{#                        });#}
{#                    }#}

{#                    return $('#popover-content-notification').html();#}
{#                  },#}
{#                placement : 'bottom'#}
{#            });#}
{#            if(toggleNotification.hasClass('bell-icon-inactive')) {#}
{#                toggleNotification.removeClass('bell-icon-inactive').addClass('bell-icon-active');#}
{#            } else {#}
{#                toggleNotification.removeClass('bell-icon-active').addClass('bell-icon-inactive');#}
{#            }#}
{#        })#}

{#    });#}
{#</script>#}
{#{% endblock %}#}