<html>
  <head>
    <title>Event Response</title>
    <style>
      h2 {
      margin: 3ex 0 1ex;
      }
      th {
      background-color: grey;
      }
      td {
      vertical-align: top;
      overflow: auto;
      }
      tr.details td {
      padding: 0 3ex;
      }
      td pre {
      margin: 3ex 3em;
      width: 500px;
      }
    </style>
    <script>
      function toggleDisplay(id) {
      el = document.getElementById(id);
      if (el.style.display == "none") {
      el.style.display = "block"
      } else {
      el.style.display = "none"
      }
      }
    </script>
  </head>
  <body>
    <h1>Events</h1>
    <table border="1" cellspacing="0">
    {% for item in items %}
      <tr> 
        <th>Event Date</th>
        {% if item.modifyDate %}<th>Modify Date</th> {% endif %}
        {% if item.advertiserId %}<th>Advertiser Id</th>{% endif %}
        {% if item.advertiserName %}<th>Advertiser Name</th>{% endif %}
        {% if item.publisherId %}<th>Publisher Id</th>{% endif %}
        {% if item.publisherName %}<th>Publisher Name</th>{% endif %}
        <th>Order Id</th>
        <th>Member Id</th>
        <th>Event Status</th>
        <th>Event Type</th>
        <th>Commissionable Sales</th>
        {% if item.earnings %}<th>Earnings (Publisher Only)</th>{% endif %}
        {% if item.publisherFee %}<th>Publisher Fee (Advertiser Only)</th>{% endif %}
        {% if item.networkFee %}<th>Network Fee (Advertiser Only)</th>{% endif %}
      <tr class="eventinfo">
        <td>{{ item.eventDate }}</td>
        {% if item.modifyDate %}<td>{{ item.modifyDate }}</td>{% endif %}
        <td>{{ item.advertiserId }}{{ item.publisherId }}</td>
        <td>{{ item.advertiserName }}{{ item.publisherName }}</td>
        <td>{{ item.orderId }}</td>
        <td>{{ item.memberId }}</td>
        <td>{{ item.status }}</td>
        <td>{{ item.type }}</td>
        <td>{{ item.commissionableSales }}</td>
        {% if item.earnings %}<td>{{ item.earnings }}</td> {% endif %}
        {% if item.publisherFee %}<td>{{ item.publisherFee }}</td>{% endif %}
        {% if item.networkFee %}<td>{{ item.networkFee }}</td>{% endif %}
      </tr>
      <tr style="border:1px solid #444">
        <td class="products">Products:</td>
        <td colspan="11">
         <table border="1" cellspacing="0">
          <tr>
           <th>Sku</th>
           <th>Sku Name</th>
           <th>Unit Price</th>
           <th>Category ID</th>
           <th>Category Name</th>
           <th>Quantity</th>
           <th>Publisher Fee</th>
           <th>Earnings</th>
           <th>Network Fee</th>
         </tr>
         {% for product in item.products %}
          <tr>
           <td>{{ product.sku }}</td>
           <td>{{ product.skuName }}</td>
           <td>{{ product.unitPrice }}</td>
           <td>{{ product.categoryId }}</td>
           <td>{{ product.categoryName }}</td>
           <td>{{ product.quantity }}</td>
           <td>{{ product.publisherFee }}</td>
           <td>{{ product.earnings }}</td>
           <td>{{ product.networkFee }}</td>
         </tr>
      {% endfor %}
        </table>
      </tr>
      {% empty %}
      <tr>
        <td>
          <p style="padding:10px">No events fit that criteria. Try searching for different timeframe.</p>
        </td>
      </tr>
      {% endfor %}
    </table>
  </body>
</html>
