<!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;
    }
    .ui.inverted.menu {
      background: #642b73; /* fallback for old browsers */
      background: -webkit-linear-gradient(
        to right,
        #c6426e,
        #642b73
      ); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(
        to right,
        #c6426e,
        #642b73
      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
  </style>

  <body>
    <!--Navigation Bar-->
    <div style="height: 59px;" class="ui top inverted secondary fixed menu">
      <div class="item">
        <h3>Empty My Fridge</h3>
      </div>

      <a class="item" href="{% url 'home' %}">
        Home
      </a>
      <a href="{% url 'recipe_page'%}" class="item">
        Recipes
      </a>

      <div class="ui link simple dropdown item">
        <span class="text">Browse</span>
        <i class="dropdown icon"></i>
        <div class="menu inverted" style="margin-top: -1px;">
          <a class="item" href="{% url 'category' %}?category=breakfast">Breakfast</a>
          <a class="item" href="{% url 'category' %}?category=lunch">Lunch</a>
          <a class="item" href="{% url 'category' %}?category=dinner">Dinner</a>
          <a class="item" href="{% url 'category' %}?category=dessert">Dessert</a>
        </div>
      </div>
      <div class="right menu">
        <a
          id="login_btn"
          style="display: flex;"
          href="{% url 'login'%}"
          class="item"
        >
          Login
        </a>
      </div>
    </div>
    <!--End of Navigation Bar-->
    <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-top: 10px;"
            type="submit"
            class="ui button fluid red inverted"
          >
            Create Account
          </button>
        </form>
        {% if data.msg_type == 'success' %}
        <a href="{% url 'login'%}">
          <button
          style="margin-top: 10px;"
          class="ui button fluid green inverted"
        >
          Login
        </button>
        </a>
        {% endif %}
        <div
          style="display: none;"
          id="message"
          class="ui {{data.msg_type}} message"
        >
          <div class="header">
            {{data.msg_type}}
          </div>
          <p>{{data.message}}</p>
        </div>
      </div>
    </div>

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