<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Monthly Report</title>
    <style type="text/css">
      @page {
        size: A4 portrait;
      }
      .HEADFOOT {
        min-height: 2%;
      }
      @page: right {
        @bottom-right {
          content: "Monthly Progress Report";
          color: black;
          font-size: x-small;
        }
      }
      @page: left {
        @bottom-left {
          content: "BlogLite Application";
          color: black;
          font-size: x-small;
        }
      }
      table {
        page-break-inside: avoid;
      }
      h1 {
        page-break-before: always;
        margin: 0.5cm 0.2cm 0.2cm;
        width: 100%;
      }
      h1 {
        page-break-after: avoid;
      }
      .tables {
        display: block;
        margin-left: auto;
        margin-right: auto;
      }
      @page: right {
        @top-right-corner {
          content: "Page " counter(page) " of " counter(pages);
          font-size: x-small;
        }
      }
      html {
        color: darkgreen;
        font-family: "Verdana", sans-serif;
        font-size: 12pt;
        font-weight: 300;
        line-height: 1.5;
      }
      #tr td {
        border-top: 0.25pt solid #f5b1b1;
        margin: 0.25cm 0;
        padding-top: 0.25cm;
        color: inherit;
        text-decoration-line: inherit;
      }
    </style>
  </head>
  <body>
    <header
      style="
        background-color: rgb(0, 81, 128);
        color: rgb(0, 81, 128);
        position: fixed;
        top: 0;
        width: 100%;
      "
      class="HEADFOOT"
    >
      Header
    </header>
    <h1 style="text-align: center; color: black">Monthly Report</h1>
    <div style="text-align: justify; color: black">
      <h4>Dear {{ user }},</h4>
      <p>Thank you for being a valued user of our BlogLite Application.</p>
      {% if (blgs) %}
      <br />
      <p>Here is the current status of your Blogs:</p>
      <div style="text-align: center; color: black" class="tables">
        <table style="border: 2px solid black; border-collapse: collapse">
          <tr>
            <th style="border: 2px solid black; border-collapse: collapse">
              Blog Title
            </th>
            <th style="border: 2px solid black; border-collapse: collapse">
              Blog Preview
            </th>
            <th style="border: 2px solid black; border-collapse: collapse">
              Blog Content
            </th>
            <th style="border: 2px solid black; border-collapse: collapse">
              Last modified
            </th>
            <!-- <th style="border: 2px solid black; border-collapse: collapse">
              Likes
            </th>
            <th style="border: 2px solid black; border-collapse: collapse">
              Dislikes -->
            </th>
          </tr>
          {% for blg in blgs %}
          <tr>
            <td style="border: 2px solid black; border-collapse: collapse">
              {{ blg.blog_title }}
            </td>
            <td style="border: 2px solid black; border-collapse: collapse">
              {{ blg.blog_preview}}
            </td>
            <td style="border: 2px solid black; border-collapse: collapse">
              {{ blg.blog_content }}
            </td>
            <td style="border: 2px solid black; border-collapse: collapse">
              {{ blg.last_modified }}
            </td>
          </tr>
          {% endfor %}
        </table>
        <br />
      </div>
       {% else %}
      <p>
        Unfortunately you haven't posted any blog with our application. Let's
        Start today. Post a blog today.
      </p>
      <br />
      {% endif %}
    </div>
    <footer
      style="
        background-color: yellow;
        color: yellow;
        position: fixed;
        bottom: 0;
        width: 100%;
      "
      class="HEADFOOT"
    >
      Footer
    </footer>
  </body>
</html>
