<div class="row">
  <div class="col-auto mr-auto">
    <%if(data.length==0){%>
      <h5><%= strings['cerca']['trobats'][lang] %>: 0</h5>
    <%} else {%>
    <h5><%= strings['cerca']['trobats'][lang] %>: <%= data.length %></h5>
    <%}%>
  </div>
  <p id="term" hidden><%= term %></p>
  <div class="col-auto mb-2">
    <button class="btn btn-secondary dropdown-toggle py-0" type="button" id="sortButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <%= strings['cerca']['ordenat'][lang] %>: <%= strings['cerca'][sortBy][lang] %>
    </button>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="sortButton">
      <a class="dropdown-item <%= (sortBy == 'millor_res') ? 'active':'' %>" id="bestResult"><%= strings['cerca']['millor_res'][lang] %></a>
      <a class="dropdown-item <%= (sortBy == 'millor_val') ? 'active':'' %>" id="mostRated"><%= strings['cerca']['millor_val'][lang] %></a>
      <a class="dropdown-item <%= (sortBy == 'menys_val') ? 'active':'' %>" id="leastRated"><%= strings['cerca']['menys_val'][lang] %></a>
      <a class="dropdown-item <%= (sortBy == 'recent_act') ? 'active':'' %>" id="recentlyUpdated"><%= strings['cerca']['recent_act'][lang] %></a>
      <a class="dropdown-item <%= (sortBy == 'menys_act') ? 'active':'' %>" id="leastRecentlyUpdated"><%= strings['cerca']['menys_act'][lang] %></a>
    </div>
  </div>
</div>
<div id="results">
  <%if(data.length==0){%>
    <div class="card mb-4 shadow-sm">
      <div class="card-body text-center">
        <%= strings['cerca']['cerca_no_trobat'][lang] %>
      </div>
    </div>
  <%} else {%>
    <% for(var i=0; i<data.length; i++) {%>
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <div class="row">
            <div class="col-7 col-sm-9 col-md-10 col-lg-9 d-flex">
              <h5><a href="/projects/<%= data[i].id%>"><%- data[i].title%></a></h5>
              <%if(data[i].label){%>
                <svg class="pb-3 pl-1" width="25" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124.00446 87.51195"><title><%= strings['general']['project_tecno_label'][lang] %></title><defs></defs><path class="cls-1-label" d="M168.24886,115.38015,147.511,129.99878l27.75,40.25907c.63388-.158,1.26428-.33561,1.89336-.51926l-2.26445-53.32331Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-2-label" d="M230.63456,125.10371l10.4596,1.63026a28.56294,28.56294,0,0,0-7.86007-16.11085L228.635,120.77606A20.14,20.14,0,0,1,230.63456,125.10371Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-3-label" d="M241.09416,126.734l-10.4596-1.63026c2.07067,6.48473.42661,13.39587-4.84875,18.88729-1.61318,1.68731-3.22636,4.05156-1.72423,7.56884-3.09363-1.29425-6.23594-.98421-9.26209-.24143l-5.02309,11.08878a49.60011,49.60011,0,0,0,8.44057-2.2578,4.67628,4.67628,0,0,1,3.03075.21157c2.95661,1.29056,5.83387,2.76089,8.89632,4.32121l8.27225,4.152-2.40126-8.46788c-.9203-3.18944-1.77188-6.13542-2.45945-9.11852a2.79181,2.79181,0,0,1,.29092-1.78241C239.67311,142.31084,242.03255,134.33165,241.09416,126.734Z" transform="translate(-117.28948 -91.91114)"/><polygon class="cls-4-label" points="50.959 23.469 57.6 24.504 57.365 18.954 50.959 23.469"/><polygon class="cls-4-label" points="30.221 38.088 50.959 23.469 16.436 18.088 30.221 38.088"/><path class="cls-2-label" d="M168.24886,115.38015l6.40527-4.51519-.75628-17.81064a49.00546,49.00546,0,0,0-17.60091-.62979c-10.94214,1.59263-19.78774,5.58774-26.47586,11.91009l3.90452,5.66475Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-1-label" d="M147.511,129.99878,133.7256,109.99937l-7.94933-1.239a45.18891,45.18891,0,0,0-5.95331,10.16009A42.28712,42.28712,0,0,0,118.05118,124.4c-.21688.78819-.42845,1.57617-.6664,2.35371l-.0953,9.59984.15338.7933c.53429,1.35407,1.01029,2.73983,1.4916,4.12559.482,1.387.9837,2.79137,1.52964,4.18286l3.04424,1.46338Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-4-label" d="M120.4641,145.45529c.36648.93441.76242,1.85768,1.19629,2.766l1.84795-1.30263Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-2-label" d="M121.66039,148.2213a27.3339,27.3339,0,0,0,1.59528,2.93657c1.85645,2.89843,2.18438,4.97176,1.21653,7.65341a27.55812,27.55812,0,0,0-.88328,3.221l-4.152,17.39078,9.25064-4.24718c4.83433-2.232,9.42529-4.34769,14.05858-6.34177a4.18146,4.18146,0,0,1,2.634-.08467,54.13873,54.13873,0,0,0,27.686,1.99132l-49.55777-23.82213Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-1-label" d="M192.81152,98.06555c-.8884.13334-1.78323.28-2.69044.45207a3.86857,3.86857,0,0,1-2.16332-.156,52.1156,52.1156,0,0,0-14.05991-5.30726l.75628,17.81064Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-4-label" d="M129.82108,104.33462a40.29463,40.29463,0,0,0-4.04481,4.42572l7.94933,1.239Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-3-label" d="M174.88983,116.41528l32.09,5.00161a45.137,45.137,0,0,0-8.05231-14.19069,37.06911,37.06911,0,0,1,10.07052.7616c7.96549,1.69253,13.89988,5.16226,18.14706,10.6048a22.468,22.468,0,0,1,1.48986,2.18346l4.59914-10.15294a36.07739,36.07739,0,0,0-3.06889-2.93677c-10.319-8.67739-22.54271-11.84312-37.35368-9.6208L174.65413,110.865Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-3-label" d="M147.511,129.99878l-24.00261,16.91989,49.55777,23.82213c.73409-.14766,1.46685-.30145,2.19481-.483Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-4-label" d="M206.97982,121.41689l-32.09-5.00161.92531,21.78919,29.29668,9.04418Q211.15526,134.1051,206.97982,121.41689Z" transform="translate(-117.28948 -91.91114)"/><path class="cls-2-label" d="M210.93393,152.43248l-.7617.23806a32.90723,32.90723,0,0,1-8.69539,1.14771,51.8557,51.8557,0,0,0,3.635-6.5696l-29.29668-9.04418,1.33914,31.53412a53.69444,53.69444,0,0,0,14.12515-6.52675,4.19766,4.19766,0,0,1,2.38541-.5078,53.64941,53.64941,0,0,0,16.11156-.29685l5.02309-11.08878C213.48479,151.641,212.18983,152.03686,210.93393,152.43248Z" transform="translate(-117.28948 -91.91114)"/>
                </svg>
              <%}%>
            </div>
            <div class="col-5 col-sm-3 col-md-2 col-lg-3">
                <div class="col-auto">
                  <%if(rated.includes(data[i]._id)){%>
                  <form method="POST" class="rateForm" id="rateForm_<%= data[i]._id%>" action="/unrateProj/<%= data[i]._id%>">
                    <div class="input-group input-group-sm">
                      <div id="rateSVG_<%= data[i]._id%>" class="input-group-prepend">
                        <button class="btn btn-outline-secondary greybutton" type="submit">
                          <svg class="bi bi-star-fill" width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="#ffe44d" xmlns="http://www.w3.org/2000/svg">
                            <path stroke="black" d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                          </svg>
                        </button>
                      </div>
                      <input type="text" class="form-control text-center" id="pointField_<%= data[i]._id%>" value="<%= data[i].numRates%>" readonly>
                    </div>
                  </form>
                  <%} else {%>
                    <form method="POST" class="rateForm" id="rateForm_<%= data[i]._id%>" action="/rateProj/<%= data[i]._id%>">
                      <div class="input-group input-group-sm">
                        <div id="rateSVG_<%= data[i]._id%>" class="input-group-prepend">
                          <button class="btn btn-outline-secondary greybutton" type="submit">
                            <svg class="bi bi-star-fill" width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="#000000" xmlns="http://www.w3.org/2000/svg">
                              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                            </svg>
                          </button>
                        </div>
                        <input type="text" class="form-control text-center" id="pointField_<%= data[i]._id%>" value="<%= data[i].numRates%>" readonly>
                      </div>
                    </form>
                  <%}%>
                </div>
            </div>
          </div>
        </div>
        <div class="card-body">
          <div class="row mb-3">
            <div class="col cos">
              <p class="more"><%- data[i].descBig %></p>
            </div>
          </div>
          <div class="row">
            <div class="col text-center">
              <a href="/projects/<%= data[i].id%>"><small><%= strings['explora']['saber_mes'][lang] %></small></a>
            </div>
          </div>
          <div class="row mt-3 mb-n2">
            <div class="btn-group d-flex align-content-start flex-wrap" role="group" aria-label="First group">
              <% for(var j=0; j<data[i].tags.length; j++) {%>
                <button type="button" class="btn-sm btn-info mr-2 mb-1 py-0 tag-style"><%- data[i].tags[j]%></button>
              <% } %>
            </div>
          </div>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">
            <div class="text-right">
              <h6><small class="text-muted"> <%= data[i].date.getDate() %>/<%= data[i].date.getMonth()+1 %>/<%= data[i].date.getFullYear() %> </small></h6>
            </div>
          </li>
        </ul>
      </div>
    <% } %>
  <%}%>
</div>
<nav aria-label="Page navigation example">
  <ul id="pagUl" class="pagination justify-content-center">
    <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=<%= page.prev %>"><%= strings['general']['anterior'][lang] %></a></li>
    <%if(page.total<=10){%>
      <% for(var j=1; j<=page.total; j++) {%>
        <%if(j == page.actual){%>
          <li class="page-item active" aria-current="page"><a class="page-link" href="/search?search=<%= term %>&p=<%= j %>"><%= j %></a></li>
        <% } else {%>
          <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=<%= j %>"><%= j %></a></li>
        <% } %>
      <% } %>
    <% } else {%>
      <%if(page.actual<=5){%>
        <% for(var j=1; j<=5; j++) {%>
          <%if(j == page.actual){%>
            <li class="page-item active" aria-current="page"><a class="page-link" href="/search?search=<%= term %>&p=<%= j %>"><%= j %></a></li>
          <% } else {%>
            <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=<%= j %>"><%= j %></a></li>
          <% } %>
        <% } %>
        <%if(page.actual==5){%>
          <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=6"><%= 6 %></a></li>
          <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=7"><%= 7 %></a></li>
        <% } %>
      <% } else if(page.actual>=7 && (page.total-page.actual)>5){%>
        <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=1">1</a></li>
        <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=2">2</a></li>
        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">...</a></li>
        <% for(var j=page.actual-2; j<=page.actual+2; j++) {%>
          <%if(j == page.actual){%>
            <li class="page-item active" aria-current="page"><a class="page-link" href="/search?search=<%= term %>&p=<%= j %>"><%= j %></a></li>
          <% } else {%>
            <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=<%= j %>"><%= j %></a></li>
          <% } %>
        <% } %>
        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">...</a></li>
        <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=<%= page.total-1 %>"><%= page.total-1 %></a></li>
        <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=<%= page.total %>"><%= page.total %></a></li>
      <% } else if((page.total-page.actual)<=5){%>
        <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=1">1</a></li>
        <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=2">2</a></li>
        <li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">...</a></li>
        <%if(page.total-(page.actual-1)==6){%>
          <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=<%= page.actual-1 %>"><%= page.actual-1 %></a></li>
        <% } %>
        <% for(var j=page.total-5; j<=page.total; j++) {%>
          <%if(j == page.actual){%>
            <li class="page-item active" aria-current="page"><a class="page-link" href="/search?search=<%= term %>&p=<%= j %>"><%= j %></a></li>
          <% } else {%>
            <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=<%= j %>"><%= j %></a></li>
          <% } %>
        <% } %>
      <% } %>
    <% } %>
    <li class="page-item"><a class="page-link" href="/search?search=<%= term %>&p=<%= page.next %>"><%= strings['general']['next'][lang] %></a></li>
  </ul>
</nav>
