<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Sign In</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    />
  </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>
    <!--End of Navigation Bar-->

    <div class="ui container">
      <div class="center">
        <h1>Sign In</h1>
        <hr />
        <form id="myForm" action="/empty_my_fridge/to_home/" method="get" class="ui form">
          {% csrf_token %}

          <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>

          <input
              name="activity"
              style="display: none;"
              value="{{data.activity}}"
            />

            <input
              name="category"
              style="display: none;"
              value="{{data.category}}"
            />

            <input
              name="id"
              style="display: none;"
              value="{{data.id}}"
            />

          <div>
            <button
              style="margin-right: 5px; width: 48%;"
              type="submit"
              class="ui button blue"
            >
              Login
            </button>
            <a href="{% url 'register'%}">
              <button
              style="margin-left: 5px; width: 48%;"
              type="button"
              class="ui button blue right floated"
              
            >
              Register
            </button>
            </a>
            
          </div>

          <div>
            <div style="margin-top: 10px;">
              <a href="{% url 'reset_password'%}">
                <button type="button" class="ui button fluid yellow">
                  Forgot Password?
                </button>
              </a>
              
            </div>
          </div>
        </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>
