<form class="form-inline" action=""> <input type="hidden" name="p" value="user_shifts"> <div class="row"> <div class="col-md-6"> <h1>%title%</h1> <div class="form-group">%start_select%</div> <div class="form-group"> <div class="input-group time"> <input type="time" class="form-control" id="start_time" name="start_time" size="5" pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%start_time%"> <div class="input-group-btn"> <button class="btn btn-default" title="Now" type="button"> <span class="glyphicon glyphicon-time"></span> </button> </div> </div> </div> – <div class="form-group">%end_select%</div> <div class="form-group"> <div class="input-group time"> <input type="time" class="form-control" id="end_time" name="end_time" size="5" pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%end_time%"> <div class="input-group-btn"> <button class="btn btn-default" title="Now" type="button"> <span class="glyphicon glyphicon-time"></span> </button> </div> </div> </div> <div class="form-group" style="margin-top: .5em"> <div class="btn-group"> <a href="javascript:setDay(-1)" class="btn btn-default ">%set_yesterday%</a> <a href="javascript:setDay()" class="btn btn-default ">%set_today%</a> <a href="javascript:setDay(1)" class="btn btn-default ">%set_tomorrow%</a> </div> <div class="btn-group"> <a href="javascript:setHours(-8)" class="btn btn-default ">%set_last_8h%</a> <a href="javascript:setHours(-4)" class="btn btn-default ">%set_last_4h%</a> <a href="javascript:setHours(4)" class="btn btn-default ">%set_next_4h%</a> <a href="javascript:setHours(8)" class="btn btn-default ">%set_next_8h%</a> </div> </div> <div class="form-group" style="margin-top: .5em"> <div class="btn-group"> %buttons% </div> </div> <div class="row"> <div class="col-md-12"> <input class="btn btn-primary" type="submit" style="width:100%; margin: 1em 0" value="%filter%"> </div> </div> </div> <div class="col-md-6"> <button class="btn btn-info btn-sm" style="margin-top: 20px; margin-bottom:10px" type="button" data-toggle="collapse" data-target="#collapseRoomSelect" aria-expanded="false" aria-controls="collapseRoomSelect" > collapse/show filters </button> <div class="collapse in" id="collapseRoomSelect"> <div class="row"> <div class="col-xs-4 col-xxs-12">%room_select%</div> <div class="col-xs-4 col-xxs-12">%type_select%</div> <div class="col-xs-4 col-xxs-12">%filled_select%</div> </div> <div class="row"> <div class="col-md-12" style="margin: 1em 0"> <p>%task_notice%</p> </div> </div> </div> </div> </div> </form> %shifts_table% %ical_text%