<!DOCTYPE html>
<html lang="en">
<%- include('./partials/head.ejs'  , { title }) %>

<body>
  <%- include('./partials/loader.ejs') %>
  <div class="app">
    <div class="nav-panel">
      <a href="/" class="block">
        <div class="logo">
          <img src="/assets/images/logo.svg" alt="LOGO" width="30" height="30">
          <span class="text">Dropin</span>
        </div>
      </a>
      <a href="/app" class="nav-item <%- view === 'index' ? 'active' : '' %>">
        <span class="material-symbols-outlined">
          dashboard
        </span>
        <span class="text">Dashboard</span>
      </a>
      <a href="/app/my-account" class="nav-item <%- view === 'my-account' || view === "edit-user-details"? 'active' : '' %>">
        <span class="material-symbols-outlined">
          manage_accounts
        </span>
        <span class="text">My Account</span>
      </a>

      <% if (user.account_type  === "client") { %>
      <a href="/app/posted-jobs" class="nav-item <%- view === 'jobs' || view === "job-details"? 'active' : '' %>">
        <span class="material-symbols-outlined">
          work
        </span>
        <span class="text">Posted Jobs</span>
      </a>
      <% } else { %>
      <a href="/app/jobs" class="nav-item <%- view === 'jobs' || view === "job-details"? 'active' : '' %>">
        <span class="material-symbols-outlined">
          work
        </span>
        <span class="text">Jobs</span>
      </a>
      <% } %>
      <a href="/app/contracts" class="nav-item <%- view === 'contracts' || view === "contract-details"? 'active' : '' %>">
        <span class="material-symbols-outlined">
          description
        </span>
        <span class="text">Contracts</span>
      </a>
      <a href="/app/proposals" class="nav-item <%- view === 'proposals' ? 'active' : '' %>">
        <span class="material-symbols-outlined">
          receipt_long
        </span>
        <span class="text">Proposals</span>
      </a>
      <a href="<%= user.account_type === "client"? '/app/payments' : '/app/balance' %>" class="nav-item <%= view === 'balance'? 'active' : '' %>">
        <span class="material-symbols-outlined">
          attach_money
        </span>
        <% if (user.account_type === "client") { %>
        <span class="text">Payments</span>
        <% } else { %>
        <span class="text">Balance</span>
        <% } %>
      </a>
    </div>
    <div class="body-panel">
      <div class="body-head">
        <div class="heading">
          <%= heading %>
        </div>
        <%- include('./partials/avatar.ejs' , { user }) %>
      </div>
      <div class="body">
        <%- include(`./app-pages/${view}.ejs`) %>
      </div>
    </div>
  </div>
  <script src="/assets/main.js"></script>
</body>

</html>