<!DOCTYPE html>
<html lang="en">
<head>
    <%- include ('../partials/head') -%>
    <link rel="stylesheet" type="text/css" href="/src/css/generalStyle.css">
    <script type="text/javascript" src="/src/js/otherUserProfielutilities.js"></script>
</head>
<body>

<header>
  <%if(user=='Usuari'){%>
      <%- include ('../partials/header') -%>
  <%} else {%>
      <%- include ('../partials/loggedUserHeader') -%>
  <%}%>
</header>

<main>
  <div class="container mb-5">
    <div class="card shadow mb-3">
      <div class="row no-gutters mx-1">
        <div class="col-md-4">
          <svg class="my-1" id="profilePicSVGCard"></svg>
          <!--<img class="card-img my-1" src="/src/imgs/test_profile.jpg" alt="Card image cap">-->
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h3 id="usernameInfo" class="card-title mb-0"><%= profileInfo.username %></h3>
            <p class="card-text mt-0"><small class="text-muted"><%= strings['perfil']['membre_desde'][lang] %>: <span id="memberDate"><%= profileInfo.date.getDate() %>/<%= profileInfo.date.getMonth()+1 %>/<%= profileInfo.date.getFullYear() %></span></small></p>
            <p class="card-text"><%- profileInfo.desc %></p>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-4 order-md-first">
        <div class="card shadow">
          <div class="card-header"><%= strings['general']['awards&points'][lang] %></div>
          <div class="card-body">
            <div class="row">
              <div class="col"><%= strings['general']['punts_m'][lang] %>: <span id="points">13123</span></div>
              <div class="col"><%= strings['general']['gastat'][lang] %>: <%= profileInfo.spentPoints %></div>
            </div>
            <hr>
            <!--<h6><%= strings['general']['awards_r'][lang] %></h6>
            <hr>-->
            <h6><%= strings['general']['awards_g'][lang] %></h6>
            <div class="d-flex flex-row" id="givenAwards">
              <% for(var i=0; i<givenAwards.length; ++i) {%>
                <%if(givenAwards[i].award == "silver"){%>
                    <svg version="0.1" height="50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 172 172"><defs><linearGradient x1="86.00538" y1="18.8125" x2="86.00538" y2="154.92094" gradientUnits="userSpaceOnUse" id="color-1"><stop offset="0" stop-color="#e6e6e6"></stop><stop offset="1" stop-color="#808080"></stop></linearGradient><linearGradient x1="86" y1="53.07813" x2="86" y2="120.27906" gradientUnits="userSpaceOnUse" id="color-2"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#b8b8b8"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M123.89375,153.1875c-1.376,0 -2.75737,-0.33594 -4.03663,-1.0105l-32.60475,-17.22956c-0.79012,-0.41388 -1.72269,-0.41388 -2.50206,0l-32.61013,17.22956c-2.92131,1.54263 -6.39894,1.29806 -9.07837,-0.63694c-2.67675,-1.93769 -3.99363,-5.16806 -3.43731,-8.428l6.18931,-36.28394c0.17469,-1.04006 -0.16931,-2.09894 -0.91913,-2.83531l-26.17356,-25.64413c-2.34887,-2.3005 -3.17663,-5.676 -2.15806,-8.80425c1.02125,-3.12825 3.6765,-5.36694 6.93375,-5.84263l36.11731,-5.27556c1.0535,-0.15588 1.96187,-0.817 2.43219,-1.77375l16.21369,-33.02131c1.46469,-2.97237 4.429,-4.81869 7.74,-4.81869c0,0 0,0 0.00269,0c3.30831,0 6.27263,1.84631 7.73194,4.81869l16.211,33.01594c0.473,0.95944 1.38675,1.62325 2.44294,1.77913l36.12806,5.27825c3.25188,0.473 5.90444,2.709 6.92569,5.83456c1.01856,3.12556 0.1935,6.49837 -2.15538,8.79619l-26.187,25.65756c-0.7525,0.73637 -1.09381,1.79525 -0.91912,2.83263l6.192,36.28663c0.559,3.25725 -0.75787,6.48762 -3.43462,8.428c-1.50769,1.09113 -3.27069,1.64744 -5.04444,1.64744zM86,129.26069c1.29,0 2.58538,0.31175 3.7625,0.93794l32.60744,17.22956c1.11262,0.58587 2.39187,0.50256 3.41581,-0.24188c1.02394,-0.73906 1.50769,-1.92425 1.29269,-3.16856l-6.192,-36.28931c-0.47569,-2.7735 0.44344,-5.60612 2.45369,-7.57337l26.18431,-25.65487c0.89225,-0.87613 1.19325,-2.107 0.80894,-3.29488c-0.38969,-1.18519 -1.35719,-2.00219 -2.59344,-2.18494l-36.12538,-5.27825c-2.80844,-0.40581 -5.23794,-2.17419 -6.493,-4.72731l-16.211,-33.01594c-0.559,-1.13412 -1.64475,-1.81137 -2.91056,-1.81137v0c-1.26581,0 -2.35425,0.67994 -2.91325,1.81675l-16.21369,33.02131c-1.25238,2.54775 -3.67381,4.31344 -6.47956,4.72194l-36.12,5.27287c-1.23894,0.18006 -2.21181,0.99975 -2.6015,2.19031c-0.38431,1.19056 -0.08331,2.42681 0.81162,3.30294l26.17088,25.64144c2.01025,1.96725 2.92938,4.79988 2.45369,7.57606l-6.18931,36.28394c-0.21231,1.247 0.27412,2.4295 1.29269,3.17394c1.02663,0.73906 2.30319,0.82506 3.41581,0.23919l32.61012,-17.22956c1.17713,-0.62619 2.46981,-0.93794 3.7625,-0.93794z" fill="url(#color-1)"></path><path d="M88.44294,112.56594l15.75144,8.02756c2.23331,1.13681 4.85094,-0.68263 4.42631,-3.07719l-3.21156,-18.15944c-0.16931,-0.95944 0.15319,-1.93769 0.86269,-2.60688l13.75463,-12.99944c1.79525,-1.69581 0.7955,-4.63325 -1.69313,-4.98262l-18.95225,-2.67137c-0.99438,-0.13975 -1.85169,-0.74175 -2.29244,-1.60981l-8.35006,-16.40719c-1.13681,-2.236 -4.33225,-2.236 -5.46906,0l-8.35275,16.40719c-0.44075,0.86806 -1.30075,1.47006 -2.29244,1.60981l-18.95225,2.66869c-2.48862,0.34938 -3.48569,3.28681 -1.69313,4.98262l13.77613,13.01825c0.69337,0.65575 1.01319,1.61787 0.84656,2.5585l-3.21694,18.189c-0.42463,2.39456 2.19569,4.214 4.42631,3.07719l15.75144,-8.02756c1.52919,-0.77937 3.34594,-0.77937 4.8805,0.00269z" fill="url(#color-2)"></path></g></g>
                    </svg>
                <% } else  if(givenAwards[i] == "golden"){%>
                  <svg version="0.1" height="50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 172 172"><defs><linearGradient x1="86.00538" y1="18.8125" x2="86.00538" y2="154.92094" gradientUnits="userSpaceOnUse" id="color-1"><stop offset="0" stop-color="#e6e6e6"></stop><stop offset="1" stop-color="#808080"></stop></linearGradient><linearGradient x1="86" y1="53.07813" x2="86" y2="120.27906" gradientUnits="userSpaceOnUse" id="color-2"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#b8b8b8"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M123.89375,153.1875c-1.376,0 -2.75737,-0.33594 -4.03663,-1.0105l-32.60475,-17.22956c-0.79012,-0.41388 -1.72269,-0.41388 -2.50206,0l-32.61013,17.22956c-2.92131,1.54263 -6.39894,1.29806 -9.07837,-0.63694c-2.67675,-1.93769 -3.99363,-5.16806 -3.43731,-8.428l6.18931,-36.28394c0.17469,-1.04006 -0.16931,-2.09894 -0.91913,-2.83531l-26.17356,-25.64413c-2.34887,-2.3005 -3.17663,-5.676 -2.15806,-8.80425c1.02125,-3.12825 3.6765,-5.36694 6.93375,-5.84263l36.11731,-5.27556c1.0535,-0.15588 1.96187,-0.817 2.43219,-1.77375l16.21369,-33.02131c1.46469,-2.97237 4.429,-4.81869 7.74,-4.81869c0,0 0,0 0.00269,0c3.30831,0 6.27263,1.84631 7.73194,4.81869l16.211,33.01594c0.473,0.95944 1.38675,1.62325 2.44294,1.77913l36.12806,5.27825c3.25188,0.473 5.90444,2.709 6.92569,5.83456c1.01856,3.12556 0.1935,6.49837 -2.15538,8.79619l-26.187,25.65756c-0.7525,0.73637 -1.09381,1.79525 -0.91912,2.83263l6.192,36.28663c0.559,3.25725 -0.75787,6.48762 -3.43462,8.428c-1.50769,1.09113 -3.27069,1.64744 -5.04444,1.64744zM86,129.26069c1.29,0 2.58538,0.31175 3.7625,0.93794l32.60744,17.22956c1.11262,0.58587 2.39187,0.50256 3.41581,-0.24188c1.02394,-0.73906 1.50769,-1.92425 1.29269,-3.16856l-6.192,-36.28931c-0.47569,-2.7735 0.44344,-5.60612 2.45369,-7.57337l26.18431,-25.65487c0.89225,-0.87613 1.19325,-2.107 0.80894,-3.29488c-0.38969,-1.18519 -1.35719,-2.00219 -2.59344,-2.18494l-36.12538,-5.27825c-2.80844,-0.40581 -5.23794,-2.17419 -6.493,-4.72731l-16.211,-33.01594c-0.559,-1.13412 -1.64475,-1.81137 -2.91056,-1.81137v0c-1.26581,0 -2.35425,0.67994 -2.91325,1.81675l-16.21369,33.02131c-1.25238,2.54775 -3.67381,4.31344 -6.47956,4.72194l-36.12,5.27287c-1.23894,0.18006 -2.21181,0.99975 -2.6015,2.19031c-0.38431,1.19056 -0.08331,2.42681 0.81162,3.30294l26.17088,25.64144c2.01025,1.96725 2.92938,4.79988 2.45369,7.57606l-6.18931,36.28394c-0.21231,1.247 0.27412,2.4295 1.29269,3.17394c1.02663,0.73906 2.30319,0.82506 3.41581,0.23919l32.61012,-17.22956c1.17713,-0.62619 2.46981,-0.93794 3.7625,-0.93794z" fill="url(#color-1)"></path><path d="M88.44294,112.56594l15.75144,8.02756c2.23331,1.13681 4.85094,-0.68263 4.42631,-3.07719l-3.21156,-18.15944c-0.16931,-0.95944 0.15319,-1.93769 0.86269,-2.60688l13.75463,-12.99944c1.79525,-1.69581 0.7955,-4.63325 -1.69313,-4.98262l-18.95225,-2.67137c-0.99438,-0.13975 -1.85169,-0.74175 -2.29244,-1.60981l-8.35006,-16.40719c-1.13681,-2.236 -4.33225,-2.236 -5.46906,0l-8.35275,16.40719c-0.44075,0.86806 -1.30075,1.47006 -2.29244,1.60981l-18.95225,2.66869c-2.48862,0.34938 -3.48569,3.28681 -1.69313,4.98262l13.77613,13.01825c0.69337,0.65575 1.01319,1.61787 0.84656,2.5585l-3.21694,18.189c-0.42463,2.39456 2.19569,4.214 4.42631,3.07719l15.75144,-8.02756c1.52919,-0.77937 3.34594,-0.77937 4.8805,0.00269z" fill="url(#color-2)"></path></g></g>
                  </svg>
                <% } else  if(givenAwards[i] == "diamond"){%>
                  <svg version="0.1" height="50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 172 172"><defs><linearGradient x1="86.00538" y1="18.8125" x2="86.00538" y2="154.92094" gradientUnits="userSpaceOnUse" id="color-1"><stop offset="0" stop-color="#e6e6e6"></stop><stop offset="1" stop-color="#808080"></stop></linearGradient><linearGradient x1="86" y1="53.07813" x2="86" y2="120.27906" gradientUnits="userSpaceOnUse" id="color-2"><stop offset="0" stop-color="#ffffff"></stop><stop offset="1" stop-color="#b8b8b8"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M123.89375,153.1875c-1.376,0 -2.75737,-0.33594 -4.03663,-1.0105l-32.60475,-17.22956c-0.79012,-0.41388 -1.72269,-0.41388 -2.50206,0l-32.61013,17.22956c-2.92131,1.54263 -6.39894,1.29806 -9.07837,-0.63694c-2.67675,-1.93769 -3.99363,-5.16806 -3.43731,-8.428l6.18931,-36.28394c0.17469,-1.04006 -0.16931,-2.09894 -0.91913,-2.83531l-26.17356,-25.64413c-2.34887,-2.3005 -3.17663,-5.676 -2.15806,-8.80425c1.02125,-3.12825 3.6765,-5.36694 6.93375,-5.84263l36.11731,-5.27556c1.0535,-0.15588 1.96187,-0.817 2.43219,-1.77375l16.21369,-33.02131c1.46469,-2.97237 4.429,-4.81869 7.74,-4.81869c0,0 0,0 0.00269,0c3.30831,0 6.27263,1.84631 7.73194,4.81869l16.211,33.01594c0.473,0.95944 1.38675,1.62325 2.44294,1.77913l36.12806,5.27825c3.25188,0.473 5.90444,2.709 6.92569,5.83456c1.01856,3.12556 0.1935,6.49837 -2.15538,8.79619l-26.187,25.65756c-0.7525,0.73637 -1.09381,1.79525 -0.91912,2.83263l6.192,36.28663c0.559,3.25725 -0.75787,6.48762 -3.43462,8.428c-1.50769,1.09113 -3.27069,1.64744 -5.04444,1.64744zM86,129.26069c1.29,0 2.58538,0.31175 3.7625,0.93794l32.60744,17.22956c1.11262,0.58587 2.39187,0.50256 3.41581,-0.24188c1.02394,-0.73906 1.50769,-1.92425 1.29269,-3.16856l-6.192,-36.28931c-0.47569,-2.7735 0.44344,-5.60612 2.45369,-7.57337l26.18431,-25.65487c0.89225,-0.87613 1.19325,-2.107 0.80894,-3.29488c-0.38969,-1.18519 -1.35719,-2.00219 -2.59344,-2.18494l-36.12538,-5.27825c-2.80844,-0.40581 -5.23794,-2.17419 -6.493,-4.72731l-16.211,-33.01594c-0.559,-1.13412 -1.64475,-1.81137 -2.91056,-1.81137v0c-1.26581,0 -2.35425,0.67994 -2.91325,1.81675l-16.21369,33.02131c-1.25238,2.54775 -3.67381,4.31344 -6.47956,4.72194l-36.12,5.27287c-1.23894,0.18006 -2.21181,0.99975 -2.6015,2.19031c-0.38431,1.19056 -0.08331,2.42681 0.81162,3.30294l26.17088,25.64144c2.01025,1.96725 2.92938,4.79988 2.45369,7.57606l-6.18931,36.28394c-0.21231,1.247 0.27412,2.4295 1.29269,3.17394c1.02663,0.73906 2.30319,0.82506 3.41581,0.23919l32.61012,-17.22956c1.17713,-0.62619 2.46981,-0.93794 3.7625,-0.93794z" fill="url(#color-1)"></path><path d="M88.44294,112.56594l15.75144,8.02756c2.23331,1.13681 4.85094,-0.68263 4.42631,-3.07719l-3.21156,-18.15944c-0.16931,-0.95944 0.15319,-1.93769 0.86269,-2.60688l13.75463,-12.99944c1.79525,-1.69581 0.7955,-4.63325 -1.69313,-4.98262l-18.95225,-2.67137c-0.99438,-0.13975 -1.85169,-0.74175 -2.29244,-1.60981l-8.35006,-16.40719c-1.13681,-2.236 -4.33225,-2.236 -5.46906,0l-8.35275,16.40719c-0.44075,0.86806 -1.30075,1.47006 -2.29244,1.60981l-18.95225,2.66869c-2.48862,0.34938 -3.48569,3.28681 -1.69313,4.98262l13.77613,13.01825c0.69337,0.65575 1.01319,1.61787 0.84656,2.5585l-3.21694,18.189c-0.42463,2.39456 2.19569,4.214 4.42631,3.07719l15.75144,-8.02756c1.52919,-0.77937 3.34594,-0.77937 4.8805,0.00269z" fill="url(#color-2)"></path></g></g>
                  </svg>
                <% } %>
              <% } %>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-8 order-first mb-3">
        <div class="card shadow">
          <div class="card-header"><%= strings['perfil']['projectes_compartits'][lang] %></div>
            <%if(addedProjects.length != 0){%>
            <ul class="list-group list-group-flush" id="list-projectes">
              <% for(var i=0; i<addedProjects.length; i++) {%>
                <li class="list-group-item">
                  <div class="d-flex">
                    <h6 class="mb-1"><a href="/projects/<%= addedProjects[i].id%>"><%- addedProjects[i].title%></a></h6>
                  </div>
                  <p class="mb-1"><%- addedProjects[i].descSmall%></p>
                </li>
              <% } %>
            </ul>
            <% } else {%>
              <div class="card-body text-center">
                <small><%= strings['perfil']['no_projectes_afegit_2'][lang] %></small>
              </div>
            <% } %>
        </div>
      </div>
    </div>

  </div>
</main>
<%- include ('../partials/footer') -%>
</body>
</html>
