<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>
      {{ grouped_order.name }} - Liste des commandes
    </title>
    <style type="text/css">
      @page {
      {% if items|length > 6 %}
        size: letter landscape;
      {% else %}
        size: A4;
      {% endif %}
        margin: 2cm 1.5cm;
        @bottom-right{
          font-size: 10pt;
          font-family: sans-serif;
          content: "Liste générée par la Chariotte - chariotte.fr | Page " counter(page)"/" counter(pages);
        }
      }
      {% if items|length > 10 %} 
        .item_name {
          -webkit-transform: rotate(-90deg);
          -moz-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
          -o-transform: rotate(-90deg);
          transform: rotate(-90deg);
          font-size: 8pt;
          height:220px;
        }

        .item_name div {
          width:200px;
          -webkit-transform: translateX(-40%);
          -moz-transform: translateX(-40%);
          -ms-transform: translateX(-40%);
          -o-transform: translateX(-40%);
          transform: translateX(-40%);
        }
      {% endif %}

      body {
        font-family: sans-serif;
        font-size: 11pt;
      }

      table {
        border: 1px black solid;
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed
      }

      th, td {
        padding: 3px 2px 2px 2px;
        border: 1px black solid;
        font-weight: normal;
        text-align: center;
        word-wrap: break-word;
      }

      th {
        page-break-inside: avoid;
        font-weight: bold;
      }

      h2 {
        margin-top: -1em;
        margin-bottom: 2em;
      }
    </style>
  </head>
  <body>
    <h2 style="text-align: center">
			{{ grouped_order.name }} - {{ grouped_order.delivery_date }}
    </h2>
    {% if items %}
    <table>
      <thead>
        <tr> 
          <th style="font-size: 0.5em; width: 2em">OK</th>
          <th style="text-align: center; width: 20%">Nom</th>
          {% for item in items %}
          <th class="item_name" style="font-weight: normal;">
            <div>{{ item.name }}</div>
          </th>
          {% endfor %}
          <th style="width: 2cm">Prix</th>
        </tr>
      </thead>
      <tbody>
        <tr style="background-color: #bababa">
          <td></td>
          <td style="text-align: left">Prix unitaire</td>
          {% for item in items %}
          <td>
            {{ item.price }} €
          </td>
          {% endfor %}
          <td></td>
        </tr>
        <tr style="background-color: #bababa">
          <th></th>
          <th style="text-align: left">TOTAL</th>
          {% for item in items %}
          <th>
            {{ item.ordered_nb }}
          </th>
          {% endfor %}
          <th>{{ grouped_order.total_price }} €</th>
        </tr>
				{% for order, ordered_items in orders_dict.items %}
				<tr>
          <td></td>
          <td>
            {{ order.author.last_name|upper }} {{ order.author.first_name }}
					</td>
          {% for ordered_item in ordered_items %}
          <td>
            {% if ordered_item > 0 %}
            {{ ordered_item }}
            {% endif %}
          </td>
          {% endfor %}
          <td>
            {{ order.price }} €
          </td>
				</tr>
				{% endfor %}
      </tbody>
    </table>
    {% else %}
      Aucun produit n'a été commandé
    {% endif %}

  </body>
</html>
