<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Invoice <%= invoice.number %></title>
    <link rel="stylesheet" href="/styles/invoice.css" />
  </head>
  <body>
    <header class="invoice-header">
      <img src="/images/logo.svg" alt="Acme" />
      <div>
        <span>Invoice</span>
        <h1><%= invoice.number %></h1>
      </div>
    </header>

    <section class="invoice-meta">
      <div><span>Issued</span><strong><%= invoice.issuedAt %></strong></div>
      <div><span>Bill to</span><strong><%= invoice.customer.name %></strong></div>
      <div><span>Email</span><strong><%= invoice.customer.email %></strong></div>
    </section>

    <table>
      <thead>
        <tr><th>Description</th><th>Quantity</th><th>Unit price</th><th>Total</th></tr>
      </thead>
      <tbody>
        <% invoice.lines.forEach((line) => { %>
          <tr>
            <td><%= line.description %></td>
            <td><%= line.quantity %></td>
            <td>$<%= line.unitPrice.toFixed(2) %></td>
            <td>$<%= (line.quantity * line.unitPrice).toFixed(2) %></td>
          </tr>
        <% }) %>
      </tbody>
    </table>

    <div class="invoice-total"><span>Total</span><strong>$<%= total.toFixed(2) %></strong></div>
  </body>
</html>
