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

  <style>
    .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>
    {% csrf_token %}
    <!--Navigation Bar-->
    <div class="ui top inverted secondary fixed menu">
      <div class="item">
        <h3>Empty My Fridge</h3>
      </div>

      <a class="item active" 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>

      <!--search and filter-->
      <div class="item">
        <form action="/empty_my_fridge/search_and_filter/" method="get" class="ui form">
          <div class="ui icon input">
            <input
              type="text"
              name="recipe_to_filter"
              placeholder="Search for recipes..."
            />
            <i class="search icon"></i>
          </div>
          <button class="ui button white">Go</button>
        </form>
      </div>
      <!--End of search and filter ui-->
      <div class="right menu">
        <a
        id="fridge_btn"
        style="display: flex;"
        href="{% url 'fridge'%}"
        class="item">
        My Fridge
      </a>
        <a href="{% url 'profile'%}" class="item">
          {% if data.user %}
          <img
            id="image_profile"
            class="ui avatar image mini"
            style="height: 35px; width: 35px;"
            src="{{data.user.image}}"
          />
          {% else %}
          <img
            id="image_profile"
            class="ui avatar image mini"
            style="height: 35px; width: 35px;"
            src="https://react.semantic-ui.com/images/wireframe/square-image.png"
          />
          {% endif %}
          <p>{{data.user.name}}</p>
        </a>
        <a
          id="login_btn"
          style="display: flex;"
          href="{% url 'login'%}?activity=home"
          class="item"
        >
          Login
        </a>
        <a
          id="logout_btn"
          style="display: none;"
          href="{% url 'logout'%}"
          class="item"
        >
          Logout
        </a>
      </div>
    </div>
    <!--End of Navigation Bar-->

    <!--Main Search Bar-->
    <div class="center aligned container" style="margin: 200px;">
      <form action="/empty_my_fridge/search/" method="GET" class="ui form">
        <div class="ui fluid icon input focus">
          <input
            type="text"
            name="category"
            placeholder="Search recipe types..."
            style="font-size: x-large;"
          />
          <button class="ui huge button">Search</button>
          </div>
        </form>
    </div>
    <!--End of Main Search-->

    <!--Category Cards-->
    <div class="ui center aligned container">
      <div class="ui four stackable centered cards" style="position:relative; top: -160px">
        <form class="ui form">
          <div
            class="ui centered link card"
            style="width: 200px; height: 200px; margin: 20px; background-color:rgba(176, 224, 230, 0.76);"
          >
            <a class="ui centered medium image" style="width: 200px; height: 150px;" href="{% url 'category' %}?category=breakfast">
              <img src="https://firebasestorage.googleapis.com/v0/b/empty-my-fridge-6197d.appspot.com/o/waffle.png?alt=media&token=e9c3f241-7542-4ca0-af72-401648f79b21" />
            </a>
            <div class="content" style="text-align: center; font-size: large;">
              <a class="header" href="{% url 'category' %}?category=breakfast">Breakfast</a>
            </div>
          </div>
        </form>
      <form class="ui form">
        <div
          class="ui centered link card"
          style="width: 200px; height: 200px; margin: 20px; background-color:rgba(255, 153, 106, 0.48);"
        >
          <a class="ui centered medium image" style="width: 200px; height: 150px;" href="{% url 'category' %}?category=lunch">
            <img src="https://firebasestorage.googleapis.com/v0/b/empty-my-fridge-6197d.appspot.com/o/taco.png?alt=media&token=8cbea5fc-fb8a-43c0-a4c0-2f88e42c7d6b" />
          </a>
          <div class="content" style="text-align: center; font-size: large;">
            <a class="header" href="{% url 'category' %}?category=lunch">Lunch</a>
          </div>
        </div>
      </form>
      <form class="ui form">
        <div
          class="ui centered link card"
          style="width: 200px; height: 200px; margin: 20px; background-color: rgba(102, 231, 158, 0.48);"
        >
          <a class="ui centered medium image" style="width: 200px; height: 150px;" href="{% url 'category' %}?category=dinner">
            <img src="https://firebasestorage.googleapis.com/v0/b/empty-my-fridge-6197d.appspot.com/o/pasta.png?alt=media&token=7a26bc16-dc99-40d7-8a23-862a58973127" />
          </a>
          <div class="content" style="text-align: center; font-size: large;">
            <a class="header" href="{% url 'category' %}?category=dinner">Dinner</a>
          </div>
        </div>
      </form>
        <form class="ui form">
        <div
          class="ui centered link card"
          style="width: 200px; height: 200px; margin: 20px; background-color: rgba(255, 239, 169, 0.76);"
        >
          <a class="ui centered medium image" style="width: 200px; height: 150px" href="{% url 'category' %}?category=dessert">
            <img src="https://firebasestorage.googleapis.com/v0/b/empty-my-fridge-6197d.appspot.com/o/dessert.png?alt=media&token=4196fd3a-688f-4a4b-adc7-bbdea88e1828" />
          </a>
          <div class="content" style="text-align: center; font-size: large;">
            <a class="header" href="{% url 'category' %}?category=dessert">Dessert
            </a>
          </div>
        </div>
      </form>
      <form class="ui form">
        <div
            class="ui centered link card"
            style="width: 200px; height: 200px; margin: 20px; background-color:rgba(226, 255, 145, 0.76);"
          >
            <a class="ui centered medium image" style="width: 200px; height: 150px;" href="{% url 'category' %}?category=appetizer">
              <img src="https://firebasestorage.googleapis.com/v0/b/empty-my-fridge-6197d.appspot.com/o/salad.png?alt=media&token=316448ed-d64d-41f3-9bdf-a35f795b0f8a" />
            </a>
            <div class="content" style="text-align: center; font-size: large;">
              <a class="header" href="{% url 'category' %}?category=appetizer">Appetizers</a>
            </div>
          </div>
        </form>
        <form class="ui form">
          <div
            class="ui centered link card"
            style="width: 200px; height: 200px; margin: 20px; background-color:rgba(164, 108, 255, 0.50);"
          >
            <a class="ui centered medium image" style="width: 200px; height: 150px;" href="{% url 'category' %}?category=maindish">
              <img src="https://firebasestorage.googleapis.com/v0/b/empty-my-fridge-6197d.appspot.com/o/sushi.png?alt=media&token=f881a6f2-38d9-42af-9482-a64271f1cc8e" />
            </a>
            <div class="content" style="text-align: center; font-size: large;">
              <a class="header" href="{% url 'category' %}?category=maindish">Main Dishes</a>
            </div>
          </div>
        </form>
          <form class="ui form">
          <div
            class="ui centered link card"
            style="width: 200px; height: 200px; margin: 20px; background-color: rgba(255, 155, 185, 0.64);"
          >
            <a class="ui centered medium image" style="width: 200px; height: 150px;" href="{% url 'category' %}?category=side">
              <img src="https://firebasestorage.googleapis.com/v0/b/empty-my-fridge-6197d.appspot.com/o/garlic%20bread.png?alt=media&token=b6dddedb-be54-4479-9d66-18fec380e8a4" />
            </a>
            <div class="content" style="text-align: center; font-size: large;">
              <a class="header" href="{% url 'category' %}?category=side">Side Dishes</a>
            </div>
          </div>
        </form>
      </div>
    </div>

    
    {% if data.user %}
    <script>
      document.getElementById("logout_btn").style.display = "flex";
      document.getElementById("login_btn").style.display = "none";
    </script>
    {% endif %}
  </body>
</html>
