<%- include("../layout/header",{ title: 'servicelist'}) %>
<div class="servicelist propertylist">
    <div class="row">
        <div class="col-sm-6"><h1>Service Requests</h1></div>
        <div class="col-sm-6" style="text-align: right;">
            <a href="/admin/service/add">
                <button type="button" class="greenbutton"> + Create Service Request</button>
            </a>
        </div>
    </div>
    <%if(flash && flash != ''){%>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
             <%=flash%>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    <%}%>
    <div class="bookingtabs">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
              <a class="nav-link active" id="simple-tab-0" data-bs-toggle="tab" href="#simple-tabpanel-0" role="tab" aria-controls="simple-tabpanel-0" aria-selected="true">All Tasks</a>
            </li>
            <li class="nav-item" role="presentation">
              <a class="nav-link" id="simple-tab-1" data-bs-toggle="tab" href="#simple-tabpanel-1" role="tab" aria-controls="simple-tabpanel-1" aria-selected="false">Approved</a>
            </li>
            <li class="nav-item" role="presentation">
              <a class="nav-link" id="simple-tab-2" data-bs-toggle="tab" href="#simple-tabpanel-2" role="tab" aria-controls="simple-tabpanel-2" aria-selected="false">Complete</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" id="simple-tab-3" data-bs-toggle="tab" href="#simple-tabpanel-3" role="tab" aria-controls="simple-tabpanel-2" aria-selected="false">Ongoing</a>
              </li>
          </ul>
        <div class="tab-content pt-5" id="tab-content">
            <div class="tab-pane active" id="simple-tabpanel-0" role="tabpanel" aria-labelledby="simple-tab-0">
                <%- include("listPartial",{ tasks: serviceRequests}) %>
            </div>
            <div class="tab-pane" id="simple-tabpanel-1" role="tabpanel" aria-labelledby="simple-tab-1">
                <%- include("listPartial",{ tasks: approved}) %>
            </div>
            <div class="tab-pane" id="simple-tabpanel-2" role="tabpanel" aria-labelledby="simple-tab-2">
                <%- include("listPartial",{ tasks: completed}) %>
            </div>
            <div class="tab-pane" id="simple-tabpanel-3" role="tabpanel" aria-labelledby="simple-tab-3">
                <%- include("listPartial",{ tasks: pending}) %>
            </div>
        </div>
    </div>
</div>
<%- include("../layout/footer") %>		