<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />

    <style>


      body{
        font-family: trebuchet ms,helvetica,sans-serif;
        margin:0;
        padding:0;
      }

      h1, h2, h3, h4, p{
        color: #1a1a1a;
      }

      table{
        margin: auto;
        margin-top: 50px;
      }

      .box{
        width: 30em;
        height: auto;
        padding: 50px 70px 50px 70px;
        margin: auto;

        border: 1px solid #688CD9;
        border-radius: 5px;
        text-align: center;
      }

      .logo{
        width: 15em;
        padding: 2em;
      }

      h1{
        padding: .5em;
      }

      .password{
        font-weight: 600;
        background-color: #1a1a1a;
        border-radius: 5px;
        color: #eee;
        padding: 10px;
      }

      .button{
        color: #eee;
        text-decoration: none;
        background-color: #688CD9;
        width: auto;
        padding: 15px;
        border-radius: 5px;
        transition: .03s;
      }

      .button:hover{
        color: #eee;
        background-color: #1a1a1a;
      }


    </style>
  </head>

  <body>


    <table cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td class="box">
          <img class="logo" src="{{routes.root}}/img/logo-cineshare-noBG.png" alt="Logo CineShare">

          <h1>Hi {{user.profile.firstname}} {{user.profile.lastname}}!</h1>
          <h2>Welcome to CineShare</h2>


          <p style="color: #1a1a1a;">You were invited to join the CineShare family! Here is your initial password:</p>
          <p class="password"><span>{{user.password}}</span></p>
            <p>The <strong>username</strong> is the same as this mail address ({{user.username}})</p>
          <p style="color: #1a1a1a;">Please change your password in your account settings</p>

          <p style="margin: 50px">
            <a style="color: #eee" class="button" href="{{routes.root}}/login">Go to login</a>
          </p>

          <small><a style="color: #1a1a1a; text-decoration: none;" href="{{routes.root}}">www.cineshare.ch</a> </small>

        </td>
      </tr>
    </table>



  </body>

</html>
