<!DOCTYPE html>
<html>

<head>
  <title>Hello, World!</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
    }

    body {
      background-color: #ecf0f1;
    }
  </style>
</head>

<body>
  <div style="padding: 2rem">
    <div
      style="background-color: white; padding: 1rem 3em 5rem 3em; border-radius: 0.5rem"
    >
      <div style="padding: 1rem">
        <div
          style="display: flex; flex-direction: row; justify-content: center; margin-top: 1rem; margin-bottom: 1rem"
        >
          <h1 style="font-weight: 100">Password Reset</h1>
        </div>

        <div style="margin-top: 3rem">
          <p>
            Seems like you forgot your password for School-management-system. If
            this is true, click below
            to reset
            your password.
          </p>
        </div>

        <div
          style="margin-top: 3rem; display: flex; flex-direction: row; justify-content: center"
        >
          <a
            href="{{ '$url' }}"
            style="font-size: 1.5rem; font-weight: 700; color: white; text-decoration: none"
          >
            <div
              style="background-color: #2980b9; padding: 2rem; border-radius: 1rem"
            >
              Reset My Password
            </div>
          </a>
        </div>

        <div style="margin-top: 3rem">
          <p>If you did not forgot your password you can safely ignore this
            email.</p>
        </div>
      </div>
    </div>

    <div
      style="margin-top: 2rem; display: flex; flex-direction: row; justify-content: center"
    >
      <div style="text-align: center; color: #95a5a6">if you have any problem,
        please <a href="mailto:feedback@school.com">feedback</a></div>
    </div>

    <div
      style="margin-top: 2rem; display: flex; flex-direction: row; justify-content: center"
    >
      <div style="text-align: center; color: #95a5a6">Powered by School
        management system</div>
    </div>
  </div>
</body>

</html>
