<html>
  <head>
    <style>
      @page {
        @bottom-center {
          content: element(footer);
        }
      }
      footer {
        position: running(footer);
      }
      @page {
        background-image: url("report-bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
      }
      @font-face {
        font-family: "InterVariable";
        src: url("font/Inter/Inter-VariableFont_slnt,wght.ttf")
          format("truetype");
        font-weight: normal;
        font-style: normal;
      }

      body,
      h1,
      h2,
      h3,
      footer,
      p {
        /* Apply the custom font to all text elements */
        font-family: "InterVariable", sans-serif;
      }
    </style>
  </head>
  <body>
    <section>
      <h1>
        Request to change group membership for Entra ID user:
        {{request.selected_entra_displayName}}
      </h1>
    </section>
    <section>
      <h3>Groups to be added</h3>
      {{#request.entra_pending_add}}
      <p><b>Name: </b>{{value.displayName}}</p>
      {{/request.entra_pending_add}}
    </section>
    <section>
      <h3>Groups to be removed</h3>
      {{#request.entra_pending_remove}}
      <p><b>Name: </b>{{value.displayName}}</p>
      {{/request.entra_pending_remove}}
    </section>
    <footer>
      <p>Request created by {{session.display_name}} at {{utils.now}}</p>
    </footer>
  </body>
</html>
