{% macro icon(name) %}
  {% set icons = {
    dashboard: '<path d="M3 11.5 12 4l9 7.5"/><path d="M5 10.5V20h5v-6h4v6h5v-9.5"/>',
    quotation: '<path d="M6 3h9l4 4v14H6z"/><path d="M15 3v5h5"/><path d="M9 12h6"/><path d="M9 16h8"/>',
    invoice: '<path d="M7 3h10v18l-2-1-2 1-2-1-2 1-2-1z"/><path d="M10 8h4"/><path d="M10 12h5"/><path d="M10 16h3"/>',
    receipt: '<path d="M5 4h14v16l-2-1-2 1-2-1-2 1-2-1-2 1z"/><path d="M8 9h8"/><path d="M8 13h8"/><path d="M8 17h5"/>',
    delivery: '<path d="M3 7h11v10H3z"/><path d="M14 10h4l3 3v4h-7z"/><circle cx="7" cy="18" r="2"/><circle cx="18" cy="18" r="2"/>',
    voucher: '<path d="M4 6h16v12H4z"/><path d="M7 10h6"/><path d="M7 14h10"/><circle cx="17" cy="10" r="1.5"/>',
    customer: '<circle cx="9" cy="8" r="4"/><path d="M3 20c1-4 3-6 6-6s5 2 6 6"/><path d="M16 11c2 .5 3.5 2.5 4 5"/>',
    product: '<path d="M12 3 4 7v10l8 4 8-4V7z"/><path d="m4 7 8 4 8-4"/><path d="M12 11v10"/>',
    report: '<path d="M5 4h14v16H5z"/><path d="M9 16V9"/><path d="M12 16v-5"/><path d="M15 16v-8"/>',
    settings: '<circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1l2-1.5-2-3.5-2.4 1a7 7 0 0 0-1.7-1L14.5 3h-5l-.3 3a7 7 0 0 0-1.7 1L5.1 6l-2 3.5L5 11a7 7 0 0 0 0 2l-2 1.5 2 3.5 2.4-1a7 7 0 0 0 1.7 1l.3 3h5l.3-3a7 7 0 0 0 1.7-1l2.4 1 2-3.5-2-1.5c.1-.3.2-.7.2-1z"/>',
    users: '<circle cx="8" cy="8" r="3"/><circle cx="16" cy="9" r="3"/><path d="M3 20c.8-4 2.5-6 5-6s4.2 2 5 6"/><path d="M12 20c.6-3 2-4.5 4-4.5 1.8 0 3.2 1.5 4 4.5"/>'
  } %}
  <svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">
    {{ attribute(icons, name)|raw }}
  </svg>
{% endmacro %}

{% import _self as nav %}

<aside class="sidebar" id="sidebar">
  <div class="brand">
    <img class="brand-logo" src="{{ base_url }}/assets/images/sync-solutionz-logo.png" alt="SYNC Computer Solutionz">
  </div>

  <nav class="sidebar-nav" aria-label="Primary navigation">
    <div class="nav-section nav-section-primary">
      <a href="{{ base_url }}/" class="nav-link {{ title == 'Dashboard' ? 'active' : '' }}">
        {{ nav.icon('dashboard') }}
        <span>Dashboard</span>
      </a>
    </div>

    <div class="nav-section">
      <div class="nav-title">Common Forms</div>
      <a href="{{ base_url }}/quotations" class="nav-link {{ title starts with 'Quotation' or title == 'Create Quotation' ? 'active' : '' }}">
        {{ nav.icon('quotation') }}
        <span>Quotations</span>
      </a>
      <a href="{{ base_url }}/invoices" class="nav-link {{ title starts with 'Invoice' or title == 'Create Invoice' ? 'active' : '' }}">
        {{ nav.icon('invoice') }}
        <span>Invoices</span>
      </a>
      <a href="{{ base_url }}/receipts" class="nav-link {{ title starts with 'Receipt' or title == 'Record Payment' ? 'active' : '' }}">
        {{ nav.icon('receipt') }}
        <span>Receipts</span>
      </a>
      <a href="{{ base_url }}/delivery-notes" class="nav-link {{ title starts with 'Delivery Note' ? 'active' : '' }}">
        {{ nav.icon('delivery') }}
        <span>Delivery Notes</span>
      </a>
      <a href="{{ base_url }}/vouchers" class="nav-link {{ title starts with 'Voucher' or title == 'Create Voucher' ? 'active' : '' }}">
        {{ nav.icon('voucher') }}
        <span>Vouchers</span>
      </a>
    </div>

    <div class="nav-section">
      <div class="nav-title">Records</div>
      <a href="{{ base_url }}/customers" class="nav-link {{ title starts with 'Customers' or title == 'Create Customer' or title == 'Edit Customer' ? 'active' : '' }}">
        {{ nav.icon('customer') }}
        <span>Customers</span>
      </a>
      <a href="{{ base_url }}/products" class="nav-link {{ title starts with 'Products' or title == 'Create Product / Service' ? 'active' : '' }}">
        {{ nav.icon('product') }}
        <span>Products / Services</span>
      </a>
    </div>

    <div class="nav-section">
      <div class="nav-title">Reports</div>
      <a href="{{ base_url }}/reports/sales" class="nav-link {{ title == 'Sales Report' ? 'active' : '' }}">
        {{ nav.icon('report') }}
        <span>Sales Report</span>
      </a>
      <a href="{{ base_url }}/reports/outstanding" class="nav-link {{ title == 'Outstanding Invoices' ? 'active' : '' }}">
        {{ nav.icon('report') }}
        <span>Outstanding Invoices</span>
      </a>
      <a href="{{ base_url }}/reports/tax" class="nav-link {{ title == 'Tax Report' ? 'active' : '' }}">
        {{ nav.icon('report') }}
        <span>Tax Report</span>
      </a>
      <a href="{{ base_url }}/reports/customer-statement" class="nav-link {{ title == 'Customer Statement' ? 'active' : '' }}">
        {{ nav.icon('report') }}
        <span>Customer Statement</span>
      </a>
    </div>

    <div class="nav-section">
      <div class="nav-title">Administration</div>
      <a href="{{ base_url }}/settings/company" class="nav-link {{ title == 'Company Settings' ? 'active' : '' }}">
        {{ nav.icon('settings') }}
        <span>Company Settings</span>
      </a>
      {% if current_user and 'administrator' in current_user.roles %}
        <a href="{{ base_url }}/users" class="nav-link {{ title == 'Users' or title == 'Create User' or title == 'Reset Password' ? 'active' : '' }}">
          {{ nav.icon('users') }}
          <span>Users</span>
        </a>
      {% endif %}
    </div>
  </nav>
</aside>