<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Sign Up</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    />
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>-->
  </head>

  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    * {
      box-sizing: border-box;
    }

    hr {
      border: 1px solid #f1f1f1;
      margin-bottom: 25px;
    }
    .center {
      margin: auto;
      width: 50%;
      padding: 170px 0;
    }
  </style>

  <body>
    <div class="ui container">
      <div class="center">
        <h1>Create an account</h1>
        <hr />
        <form id="myForm" action="/empty_my_fridge/to_signIn/" method="post" class="ui form">
          {% csrf_token %}

          <div class="field">
            <label>Full Name</label>
            <input type="text" placeholder="Full Name" name="name" required />
          </div>

          <div class="field">
            <label>Email</label>
            <input type="email" placeholder="Email" name="email" required />
          </div>

          <div class="field">
            <label>Password</label>
            <input
              type="password"
              placeholder="Password"
              name="pass"
              required
            />
          </div>

          <button
            style="margin: 10;"
            type="submit"
            class="ui button fluid red inverted"
          >
            Create Account
          </button>
        </form>
        <div style="display: none;" id="message" class="ui error message">
          <div class="header">
            Error
          </div>
          <p>{{data.message}}</p>
        </div>
      </div>
    </div>

    {% if data.message %}
    <script>
      document.getElementById('message').style.display = "block"
    </script>
    {% endif %}
  </body>
</html>
