<% if(user.account_type === "client") {%>

<div class="user-account">
  <div class="top">

    <div class="image">
      <img src="<%= user.profile_image ?? '/assets/images/user.jpg' %>" alt="Avatar Image">
    </div>
    <div class="meta">
      <div>
        <div class="silver" style="margin-bottom: 0.5rem">
          <small>
            <%= user._name %>
          </small>
        </div>
        <div class="name">
          <% if (user.verified ) { %>
          <span class="material-symbols-outlined">
            verified
          </span>
          <% } %>
          <%= user.details.company_name %>
        </div>
        <div class="email">
          <%= user.email %>
        </div>
        <div class="summary">
          <q><%= user?.summary ?? "Feeling Awesome" %></q>
        </div>
      </div>
    </div>
    <div class="spacer"></div>
    <div>
      <a href="/app/my-account/edit" class="btn iconbtn">
        <span class="material-symbols-outlined">
          edit
        </span>
      </a>
    </div>
  </div>
  <div class="bio split">
    <h3>About me</h3>
    <p>
      <%= user?.bio ?? "N/A" %>
    </p>
  </div>

  <div class="location split">
    <h3>
      <span class="material-symbols-outlined">
        pin_drop
      </span>
      <span>
        Location
      </span>
    </h3>
    <p>
      <%= user?.location ?? "Unknown"%>
    </p>
  </div>
  <div class="location split">
    <h3>
      <span class="material-symbols-outlined">
        language
      </span>
      <span>
        Company Website
      </span>
    </h3>
    <p>
      <%= user?.details?.company_website ?? "Unknown"%>

    </p>
  </div>
  <div class="location split">
    <h3>
      <span class="material-symbols-outlined">
        group
      </span>
      <span>
        Company Size
      </span>
    </h3>
    <p>
      <%= user?.details?.company_size ?? "Unknown"%>
    </p>
  </div>
  <div class="location split">
    <h3>
      <span class="material-symbols-outlined">
        apartment
      </span>
      <span>
        Industry
      </span>
    </h3>
    <p>
      <%= user?.details?.company_industry ?? "Unknown"%>
    </p>
  </div>
</div>
<% } else { %>

<div class="user-account">
  <div class="top">

    <div class="image">
      <img src="<%= user.profile_image ?? '/assets/images/user.jpg' %>" alt="Avatar Image">
    </div>
    <div class="meta">
      <div>
        <div class="name">
          <% if (user.verified ) { %>
          <span class="material-symbols-outlined">
            verified
          </span>
          <% } %>
          <%= user._name %>
        </div>
        <div class="email">
          <%= user.email %>
        </div>
        <div class="summary">
          <q><%= user?.summary ?? "Feeling Lucky" %></q>
        </div>
      </div>
    </div>
    <div class="spacer"></div>
    <div>
      <a href="/app/my-account/edit" class="btn iconbtn">
        <span class="material-symbols-outlined">
          edit
        </span>
      </a>
    </div>
  </div>
  <div class="bio split">
    <h3>About me</h3>
    <p>
      <%= user?.bio ?? "N/A" %>
    </p>
  </div>
  <div class="education split">
    <h3>
      <span class="material-symbols-outlined">
        school
      </span>
      <span>
        Education
      </span>
    </h3>
    <p>
      <%= user?.details?.education ?? "N/A" %>
    </p>
  </div>
  <div class="location split">
    <h3>
      <span class="material-symbols-outlined">
        pin_drop
      </span>
      <span>
        Location
      </span>
    </h3>
    <p>
      <%= user?.location ?? "Unknown"%>
    </p>
  </div>

  <div class="skillset split">
    <h3>
      <span class="material-symbols-outlined">
        list_alt
      </span>
      <span>
        Skills
      </span>
    </h3>

    <div class="skills">

      <% if (user.details?.skills != null) { %>
      <% for( const skillset of user.details.skills) { %>
      <div class="skill">
        <%= skillset %>
      </div>
      <% } %>
      <% } else { %>
      <div>N/A</div>
      <% } %>
    </div>
  </div>
  <div class="skillset split">
    <h3>
      <span class="material-symbols-outlined">
        code
      </span>
      <span>
        Programming Languages
      </span>
    </h3>
    <div class="skills">

      <% if (user.details?.programming_languages != null) { %>
      <% for( const skillset of user.details.programming_languages) { %>
      <div class="skill">
        <%= skillset %>
      </div>
      <% } %>
      <% } else { %>
      <div>N/A</div>
      <% } %>
    </div>

  </div>


  <div class="skillset split">
    <h3>
      <span class="material-symbols-outlined">
        database
      </span>
      <span>
        Databases
      </span>
    </h3>

    <div class="skills">

      <% if (user.details?.languages != null) { %>
      <% for( const skillset of user.details.databases) { %>
      <div class="skill">
        <%= skillset %>
      </div>
      <% } %>
      <% } else { %>
      <div>N/A</div>
      <% } %>
    </div>

  </div>
  <div class="skillset split">
    <h3>
      <span class="material-symbols-outlined">
        dynamic_feed
      </span>
      <span>
        Other Skills
      </span>
    </h3>

    <div class="skills">


      <% if (user.details?.other_skills != null) { %>
      <% for( const skillset of user.details.other_skills) { %>
      <div class="skill">
        <%= skillset.replaceAll("\"" , "") %>
      </div>
      <% } %>
      <% } else { %>
      <div>N/A</div>
      <% } %>
    </div>

  </div>
  <div class="skillset split">
    <h3>
      <span class="material-symbols-outlined">
        abc
      </span>
      <span>
        Languages
      </span>
    </h3>
    <div class="skills">

      <% if (user.details?.languages != null) { %>
      <% for( const skillset of user.details.languages) { %>
      <div class="skill">
        <%= skillset.toUpperCase() %>
      </div>
      <% } %>
      <% } else { %>
      <div>N/A</div>
      <% } %>
    </div>

  </div>

</div>
<% } %>