<!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>
    /* pagination position styling */
    .pagination {
      position: relative;
      margin-bottom: 50px;
      margin-top: -25px;
      text-align: center;
    }
    /* pagination styling */
    .pagination a {
      color: #031f3b;
      padding: 10px 18px;
      border: 2px solid #031f3b;
      font-size: medium;
      text-decoration: none;
    }
    /* pagination hover effect on non-active */
    .pagination a:hover:not(.active) {
      background-color: #031f3b;
      color: white;
    }
    /* pagination hover effect on active*/
    .pagination a:hover {
      background-color: #031f3b;
      color: white;
      text-decoration: underline;
    }

    .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+ */
    }
    .center {
    margin: auto;
    width: 50%;
  }
  </style>

  <body>
    {% csrf_token %}
    <!--Navigation Bar-->
    <div class="ui top inverted secondary fixed menu">
      <div class="item">
        <h3>Empty My Fridge</h3>
      </div>

      <a href="{% url 'home' %}" class="item active">
        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">
          <a class="item" href="{% url 'category' %}?category=pastry">Pastries</a>
          <a class="item" href="{% url 'category' %}?category=main dish">Meals</a>
          <a class="item" href="{% url 'category' %}?category=appetizer">Appetizers</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">
          <img
            id="image_profile"
            class="ui avatar image mini"
            src="https://react.semantic-ui.com/images/wireframe/square-image.png"
          />
          <p id="hi_name">{{data.user.name}}</p>
        </a>
        <a
          id="login_btn"
          style="display: flex;"
          href="{% url 'login'%}"
          class="item"
        >
          Login
        </a>
        <a
          id="logout_btn"
          style="display: none;"
          href="{% url 'logout'%}"
          class="item"
        >
          Logout
        </a>
      </div>
    </div>
    <!--End of Navigation Bar-->

    <!--Container-->
    <div class="ui container center aligned">
      <!--Recipe Cards-->
      {% if data.recipe_lst %}
      <div
        class="ui grid"
        style="margin-top: 75px; margin-bottom: 75px;"
      >
      <!--column-->
        {% for recipe in data.recipe_lst %}
        <div class="four wide column">
          <div
            class="ui link card"
            style="margin: 10px; width: 300px; height: 360px;"
          >
            <a class="ui medium image">
              <img src="{{recipe.recipe_image}}" />
            </a>
            <div class="content" style="text-align: center;">
              <a class="header" href="{{recipe.recipe_link}}"
                >{{recipe.recipe_name}}</a
              >
            </div>
            <div class="extra content" bis_skin_checked="1">
              <span class="left floated">
                <div class="ui labeled button">
                  <div class="ui blue button">
                    <i class="heart icon"></i> Favorites
                  </div>
                  <a class="ui basic blue left pointing label">
                    {{recipe.likes}}
                  </a>
                </div>
              </span>
              <form action="/empty_my_fridge/fav_recipe_onclick/" method="post" class="ui form">
                <span class="right floated star">
                  <input
                    style="display: none;"
                    name="recipe_id"
                    value="{{recipe.recipe_id}}"
                  />
                  <input
                    style="display: none;"
                    name="navigate"
                    value="/empty_my_fridge/recipe_list/"
                  />
                  <input
                    id="scrollY"
                    style="display: none;"
                    value=""
                    name="scroll_y"
                  />
                  <input
                    style="display: none;"
                    value="{{isSearch}}"
                    name="isSearch"
                  />
                  {% if recipe.user_saved %}
                  <button
                    id="like"
                    class="ui icon button disabled"
                    data-tooltip="Remove this from your Favorite Recipes"
                  >
                    <i class="star icon yellow"></i>
                  </button>

                  {% else %}
                  <button
                    id="like"
                    class="ui icon button disabled"
                    data-tooltip="Add this to your Favorite Recipes"
                  >
                    <i class="star icon"></i>
                  </button>
                  {% endif %}
                </span>
              </form>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      {% endif %}
      <!--End of Recipe Cards-->
    </div>
    <!--Pagination-->
      <div class="pagination">
        <span class="step-links">
            {% if data.recipe_lst.has_previous %}
                <a href="?category={{ data.category }}&page=1" title="First" style="border: none; background-color: white; color:#031f3b"><<</a>
                <a href="?category={{ data.category }}&page={{ data.recipe_lst.previous_page_number }}" style="border: none; background-color: white; color: #031f3b;">Previous</a>
            {% endif %}
    
            <span class="current">
                {% for num in data.recipe_lst.paginator.page_range %}
                  {% if data.recipe_lst.number == num %}
                    <a href="?category={{ data.category }}&page={{ num }}" style="background-color: #031f3b; color: white;">{{ num }}</a>
                  {% else %}
                    <a href="?category={{ data.category }}&page={{ num }}">{{ num }}</a>
                  {% endif %}
                {% endfor %}
            </span>
            {% if data.recipe_lst.has_next %}
                <a href="?category={{ data.category }}&page={{ data.recipe_lst.next_page_number }}" style="border: none; background-color: white; color:#031f3b">Next</a>
                <a href="?category={{ data.category }}&page={{ data.recipe_lst.paginator.num_pages }}" title="Last" style="border: none; background-color: white; color:#031f3b">>></a>
            {% endif %}
        </span>
    </div>
    <!--End of Pagination-->
    
    {% if data.user %}
    <script>
      document.getElementById("image_profile").src =
        "https://react.semantic-ui.com/images/avatar/large/matthew.png";
      document.getElementById("logout_btn").style.display = "flex";
      document.getElementById("login_btn").style.display = "none";
    </script>
    {% endif %}
  </body>
</html>
