<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Rechnung vom {{ .Date | date }}</title>
    <!-- <link href="css/style.css" rel="stylesheet" /> -->
    <style>
      {{ .Style }}
    </style>
    <style>

      {{.Invoice.CSS}}
    </style>
  </head>
  <body>
    <header class="first-page" style="margin-top: 2cm">
      <div class="company">
        <h2>{{ .Company.Name }}</h2>
        <p>
          {{ .Company.Address.Street}} {{.Company.Address.Number}} <br />
          {{ .Company.Address.ZIPCode }} {{ .Company.Address.Place }} <br />
          {{ .Company.Contact }}
        </p>

        <p></p>
      </div>
      <div class="invoice-info">
        <p>
          <strong>Rechnung:</strong> {{ .Invoice.Reference }} <br />
          <strong>Datum:</strong> {{ .Date | date }} <br />
        </p>
      </div>
    </header>
    <section class="client first-page">
      <h2>Rechnung an:</h2>
      <p>
        {{ .Client.Name }} <br />
        {{ .Client.Address.Street}} {{.Client.Address.Number}} <br />
        {{ .Client.Address.ZIPCode }} {{ .Client.Address.Place }} <br />
        {{ .Client.Contact }}
      </p>
    </section>

    <section class="page p1 first-page">
      <article>
        <table>
          <thead>
            <tr>
              <th style="min-width: 3.5em">FID</th>
              <th>Name</th>
              <th>Aufwand</th>
              <th style="min-width: 5.5em">Preis</th>
            </tr>
          </thead>
          <tbody>
            {{ range .Issues }}
            <tr>
              <td style="font-family: monospace">{{ .Shorthand }}</td>
              <td>{{ .Title }}</td>
              <td>{{ .Duration | duration }}</td>
              <td>{{ .Duration | price }} CHF</td>
            </tr>
            {{ end }}
          </tbody>
          <tfoot>
            <tr>
              <th colspan="2" style="text-align: right">Summe:</th>

              <td>{{ .Total | duration }}</td>
              <td>{{ .Total | price}}</td>
            </tr>
          </tfoot>
        </table>
      </article>
      {{ .Invoice.HTML }}
    </section>
    <section>
      <h2 style="margin-top: 0">Details zu den Features</h2>

      {{ range .Issues }}
      <article>
        <div class="issue-title">
          <h3>
            <span style="font-family: monospace">{{ .Shorthand }}</span>: {{
            .Title }}
          </h3>
          <p>Fertiggestellt: {{ .Closed | time }}</p>
        </div>
        {{ .CleanBody | md | oh 3 }}
      </article>
      {{ end }}
    </section>
  </body>
</html>
