{% set user = userData.email %}
 <!-- Sidebar -->
<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <li class="sidebar-brand">
            <div class="sidebar-brand-user text-center" style="width:100%;">
               {# <img src="{{ app.asset_path }}/assets/img/users/{{ user|replace(' ','-') }}.png" alt="" class="img-circle" width="60"> #}
               <div class="sidebar-brand-user-name">{{ user|title }}</div>
            
            </div>
            <img src="{{ asset('/images/background-sider-brand.jpg')}}" width="100%"> 
        </li>
        <li {% if option == 'homepage' %} class="active" {% endif %}>
            <a href="{{ path('us_homepage') }}"><i class="fa-solid fa-house"></i>Home</a>
        </li>
        {# <li>
            <a href="{{ path('us_new_record')}}"><span class="glyphicon glyphicon-edit"></span>New Record</a>
        </li>
        <li>
            <a href="{{ path('us_reports')}}"><span class="glyphicon glyphicon-list-alt"></span>Reports</a>
        </li>
        <li>
            <a href="{{ path('flibs_event') }}"><span class="glyphicon glyphicon-calendar"></span>FLIBS Event</a>
        </li> #}
        <li>
            <a href="{{ path('mx_homepage') }}"> <i class="fa-solid fa-circle-chevron-left"></i> NIS MX</a>
        </li>
        <li>
            <a href="{{ path('logout')}}">
               <i class="fa fa-sign-out" aria-hidden="true"></i>Logout
            </a>
        </li> 
    </ul>
</div>
      
<!-- /#sidebar-wrapper -->
<div style="width:100%">
    <div class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-hearder">
              <!-- @TODO: Add sidenav (though no mobile support yet) -->
              <!--a href="#menu-toggle" class="btn btn-default hidden-lg hidden-md" id="menu-toggle"><span class="fa fa-bars"></span></a-->
              <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#" data-toggle="modal" data-target="#searchModal"><span class="glyphicon glyphicon-search"></span> Search</a>
                        </li>          
                    </ul>
              </div>
        </div>
      </div>
    </div>
</div>

<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchLabel">
    <div class="modal-dialog" role="document"> 
        <div class="modal-content">
            <div id="search-header" class="modal-header">
                <a class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-4 form-group">
                        <label for="">Search options:</label>
                        <select name="search_options" id="search-options" class="form-control">
                            <option value="default">Last Name or Company Name</option>
                            <option value="quote">Quote #</option>
                            <option value="application">Application #</option>
                            <option value="certificate">Certificate #</option>
                            <option value="endorsement">Endorsement #</option>
                        </select>
                    </div>
                    <div class="col-lg-8 form-group">
                        <label for="">Search:</label>
                        <input type="text" id="search" name="search" class="form-control" placeholder="Write your Search">
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-lg-12">
                        <div id="search-result"></div>     
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>