<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %> | Kadiyam Billing</title>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <link rel="stylesheet" href="/css/main.css">
  <script src="/js/main.js" defer></script>
</head>
<body>
<div class="app">
  <aside class="sidebar" id="sidebar">
    <div class="sb-brand">
      <div class="sb-logo">KC</div>
      <div>
        <span class="sb-name">Kadiyam</span>
        <span class="sb-sub">Billing System</span>
      </div>
    </div>
    <nav class="sb-nav">
      <span class="nav-lbl">OVERVIEW</span>
      <a href="/dashboard" class="nav-item <%= title.includes('Dashboard') ? 'active' : '' %>"><i class="fa fa-gauge-high"></i><span>Dashboard</span></a>
      <span class="nav-lbl">TRANSACTIONS</span>
      <a href="/sales-bills" class="nav-item <%= title.includes('Sales') || title.includes('Invoice') ? 'active' : '' %>"><i class="fa fa-file-invoice"></i><span>Sales Invoices</span></a>
      <a href="/purchase-bills" class="nav-item <%= title.includes('Purchase') ? 'active' : '' %>"><i class="fa fa-cart-arrow-down"></i><span>Purchase Bills</span></a>
      <span class="nav-lbl">MASTERS</span>
      <a href="/clients" class="nav-item <%= title.includes('Client') ? 'active' : '' %>"><i class="fa fa-building-user"></i><span>Clients</span></a>
      <a href="/vendors" class="nav-item <%= title.includes('Vendor') ? 'active' : '' %>"><i class="fa fa-truck"></i><span>Vendors</span></a>
      <a href="/products" class="nav-item <%= title.includes('Product') ? 'active' : '' %>"><i class="fa fa-boxes-stacked"></i><span>Products / Items</span></a>
      <span class="nav-lbl">COMPLIANCE</span>
      <a href="/reports/gstr1" class="nav-item"><i class="fa fa-file-shield"></i><span>GSTR-1</span></a>
      <a href="/reports/gstr2" class="nav-item"><i class="fa fa-file-import"></i><span>GSTR-2</span></a>
      <a href="/reports/outstanding" class="nav-item"><i class="fa fa-clock-rotate-left"></i><span>Outstanding</span></a>
      <span class="nav-lbl">REPORTS</span>
      <a href="/reports/sales-register" class="nav-item"><i class="fa fa-chart-line"></i><span>Sales Register</span></a>
      <a href="/reports/purchase-register" class="nav-item"><i class="fa fa-chart-bar"></i><span>Purchase Register</span></a>
      <span class="nav-lbl">SYSTEM</span>
      <a href="/settings" class="nav-item <%= title.includes('Settings') ? 'active' : '' %>"><i class="fa fa-gear"></i><span>Settings</span></a>
    </nav>
    <div class="sb-foot">
      <div class="u-av"><%= currentUser ? currentUser.name.charAt(0).toUpperCase() : 'U' %></div>
      <div class="u-det">
        <span class="u-name"><%= currentUser?.name %></span>
        <span class="u-role"><%= currentUser?.role %></span>
      </div>
      <a href="/logout" class="logout" title="Logout"><i class="fa fa-right-from-bracket"></i></a>
    </div>
  </aside>

  <main class="main">
    <header class="topbar">
      <button class="sb-toggle" id="sbToggle"><i class="fa fa-bars"></i></button>
      <div class="tb-title"><%= title %></div>
      <div class="tb-actions">
        <a href="/sales-bills/new" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> New Invoice</a>
        <a href="/purchase-bills/new" class="btn btn-outline btn-sm"><i class="fa fa-plus"></i> Purchase</a>
      </div>
    </header>
    <div class="content">
      <% if (success && success.length > 0) { %>
        <div class="alert alert-success"><i class="fa fa-circle-check"></i> <%= success[0] %><button class="alert-close" onclick="this.parentElement.remove()">×</button></div>
      <% } %>
      <% if (error && error.length > 0) { %>
        <div class="alert alert-error"><i class="fa fa-triangle-exclamation"></i> <%= error[0] %><button class="alert-close" onclick="this.parentElement.remove()">×</button></div>
      <% } %>
