<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>My Fridge Recipes</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />

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

    .recipe_name {
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: large;
      color: black;
      font-weight: bolder;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .recipe_name:hover {
      color: #3460e2;
      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>
</head>

<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">
      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 active">
        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 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" style="margin-top: 75px;">
    {% if data.isSearch and data.found_results %}
      <h2><i>Found Results ({{data.items}} Item(s))</i></h2>
    {% else %}
      <h2><i>No Results Found! (0 Items)</i></h2>
    {% endif %}
      <p>Not enough recipes? Click here to find recipes that you only
      missing a few ingredients for.
    </p>
    <!-- Toggle fridge recipes button-->
    <form method="post">
      {%if data.partial%}
      <div class="ui toggle checkbox" style="margin-top: -60px;">
        <input type="checkbox" name="part" type="submit" checked="checked" value=False name="part"
          onchange="form.submit()">
        <label>Displaying recipes that are missing 1-3 ingredients in your fridge</label>
      </div>
      {%else%}
      <div class="ui toggle checkbox" style="margin-top: 2px;">
        <input type="checkbox" name="part" type="submit" value=True name="part" onchange="form.submit()">
        <label>Activate to display partial matches</label>
      </div>
      {%endif%}
    </form>
      <!-- Sorting dropdown-->
      <form method="post">
      <div class="inline field" style="text-align: right;">
        <select name="sorting">
          {%if data.sorting_type == "name_A"%}
          <option value="name_A">Name ascending</option>
          <option value="name_D">Name descending</option>
          <option value="fav_A">Least Popular</option>
          <option value="fav_D">Most Popular</option>
          {%elif data.sorting_type == "name_D"%}
          <option value="name_D">Name descending</option>
          <option value="name_A">Name ascending</option>
          <option value="fav_A">Least Popular</option>
          <option value="fav_D">Most Popular</option>
          {%elif data.sorting_type == "fav_A"%}
          <option value="fav_A">Least Popular</option>
          <option value="name_D">Name descending</option>
          <option value="name_A">Name ascending</option>
          <option value="fav_D">Most Popular</option>
          {%elif data.sorting_type == "fav_D"%}
          <option value="fav_D">Most Popular</option>
          <option value="name_D">Name descending</option>
          <option value="name_A">Name ascending</option>
          <option value="fav_A">Least Popular</option>
          {%endif%}
          {% if data.partial %}
            {% if data.sorting_type == "mis_A" %}
              <option value="mis_A">Missing least ingredients</option>
              <option value="name_A" >Name ascending</option>
              <option value="name_D" >Name descending</option>
              <option value="fav_A" >Least Popular</option>
              <option value="fav_D">Most Popular</option>
              <option value="mis_D">Missing most ingredients</option>
            {%elif data.sorting_type == "mis_D"%}
              <option value="mis_D">Missing most ingredients</option>
              <option value="name_A" >Name ascending</option>
              <option value="name_D" >Name descending</option>
              <option value="fav_A" >Least Popular</option>
              <option value="fav_D">Most Popular</option>
              <option value="mis_A">Missing least ingredients</option>
            {% else %}
              <option value="mis_A">Missing least ingredients</option>
              <option value="mis_D">Missing most ingredients</option>
            {% endif %}
          {% endif %}
        </select>
        <button type="submit">Sort</button>
      </div>
    </form>

    <!--Recipe Cards-->
    {% if data.recipes %}
    <div class="ui grid" style="margin-top: 6px; margin-bottom: 75px;">
      <!--column-->
      {%for recipe in data.recipes%} {%if not data.partial%}
      <div class="four wide column">
        <div class="ui link card" style="margin: 10px; width: 300px; height: 340px;">
          {% if recipe.recipe_link %}
          <a  target="_blank" class="ui medium image" href="{{recipe.recipe_link}}">
            <img style="height: 215px; object-fit: cover;" src="{{recipe.recipe_image}}" />
          </a>
          {% else %}
          <a class="ui medium image" href="{% url 'recipe_view_page'%}?id={{recipe.recipe_id}}">
            <img style="height: 215px; object-fit: cover;" src="{{recipe.recipe_image}}" />
          </a>
          {% endif %}

          <div class="content" style="text-align: center;">
            {% if recipe.recipe_link %}
              <a target="_blank" class="recipe_name" href="{{recipe.recipe_link}}">
                {{recipe.recipe_name}}</a>
              {% else %}
              <a class="recipe_name"
                href="{% url 'recipe_view_page'%}?id={{recipe.recipe_id}}">{{recipe.recipe_name}}</a>
              {% endif %}
          </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/fridge/recipes" />
                <input id="scrollY" style="display: none;" value="" name="scroll_y" />
                <input style="display: none;" value="recipe_list" name="activity" />
                <input style="display: none;" value="{{data.isSearch}}" name="isSearch" />
                {% if data.user and recipe.user_saved %}
                <button id="like" class="ui icon button" data-tooltip="Remove this from your Favorite Recipes">
                  <i class="star icon yellow"></i>
                </button>

                {% else %}
                <button id="like" class="ui icon button" data-tooltip="Add this to your Favorite Recipes">
                  <i class="star icon"></i>
                </button>
                {% endif %}
              </span>
            </form>
          </div>
        </div>
      </div>
      {%else%}
      <div class="four wide column">
        <div class="tooltip">
          {%if recipe.missing_ingredients%}
          <span class="tooltiptext">You are currently missing:
            <ul>
              {%for mis in recipe.missing_ingredients%}
              <li>{{mis}}</li>
              {% endfor %}
            </ul>
          </span>
          {%endif%}
          <style>
            .tooltip .tooltiptext {
              visibility: hidden;
              width: 45%;
              background-color: white;
              color: black;
              text-align: center;
              border-radius: 6px;
              padding: 5px 0;
              border: 2px solid red;

              /* Position the tooltip */
              position: absolute;
              z-index: 20;
              right: 5px;
            }

            .tooltip:hover .tooltiptext {
              visibility: visible;
            }
          </style>
          <div class="ui link red card" style="margin: 10px; width: 300px; height: 340px;">
            {% if recipe.recipe_link %}
            <a  target="_blank" class="ui medium image" href="{{recipe.recipe_link}}">
              <img style="height: 215px; object-fit: cover;" src="{{recipe.recipe_image}}" />
            </a>
            {% else %}
            <a class="ui medium image" href="{% url 'recipe_view_page'%}?id={{recipe.recipe_id}}">
              <img style="height: 215px; object-fit: cover;" src="{{recipe.recipe_image}}" />
            </a>
            {% endif %}
            <div class="content" style="text-align: center;">
              {% if recipe.recipe_link %}
              <a target="_blank" class="recipe_name" href="{{recipe.recipe_link}}">
                {{recipe.recipe_name}}</a>
              {% else %}
              <a class="recipe_name"
                href="{% url 'recipe_view_page'%}?id={{recipe.recipe_id}}">{{recipe.recipe_name}}</a>
              {% endif %}
            </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/fridge/recipes" />
                  <input id="scrollY" style="display: none;" value="" name="scroll_y" />
                  <input style="display: none;" value="{{data.fridge_recipes}}" name="fridge_recipes" />
                  <input style="display: none;" value="recipe_list" name="activity" />
                  <input style="display: none;" value="{{data.isSearch}}" name="isSearch" />
                  {% if data.user and recipe.user_saved %}
                  <button id="like" class="ui icon button" data-tooltip="Remove this from your Favorite Recipes">
                    <i class="star icon yellow"></i>
                  </button>

                  {% else %}
                  <button id="like" class="ui icon button" data-tooltip="Add this to your Favorite Recipes">
                    <i class="star icon"></i>
                  </button>
                  {% endif %}
                </span>
              </form>
            </div>
          </div>
        </div>
      </div>
      {%endif%}
      {% endfor%}
    </div>
    {% endif %}
    <!--End of Recipe Cards-->
  </div>

  <!--Pagination-->
  {% if data.recipes %}
  <div class="pagination">
    <span class="step-links">
      {% if data.recipes.has_previous %}
      <a href="?page=1" title="First" style="border: none; background-color: white; color: #031f3b;">
        <<</a>
          <a href="?page={{ data.recipes.previous_page_number }}"
            style="border: none; background-color: white; color: #031f3b;">Previous</a>
          {% endif %}

          <span class="current">
            {% for num in data.recipes.paginator.page_range %}{% if data.recipes.number == num %}
            <a href="?page={{ num }}" style="background-color: #031f3b; color: white;">{{ num }}</a>
            {% else %}
            <a href="?page={{ num }}">{{ num }}</a>
            {% endif %} {% endfor %}
          </span>
          {% if data.recipes.has_next %}
          <a href="?page={{ data.recipes.next_page_number }}"
            style="border: none; background-color: white; color: #031f3b;">Next</a>
          <a href="?page={{ data.recipes.paginator.num_pages }}" title="Last"
            style="border: none; background-color: white; color: #031f3b;">>></a>
          {% endif %}
    </span>
  </div>
  {% endif %}


  <!--End of Pagination-->

  {% if data.keep_scroll_pos %}
  <script>
    var scrollTop = {{ data.scrollTop }};
    window.scrollTo(0, scrollTop);
  </script>
  {% endif %} {% if data.user %}
  <script>
    document.getElementById("logout_btn").style.display = "flex";
    document.getElementById("login_btn").style.display = "none";
    window.addEventListener("scroll", function (event) {
      var scrollY = this.scrollY;
      if (scrollY) {
        var elements = document.querySelectorAll("#scrollY");
        for (var i = 0; i < elements.length; i++) elements[i].value = scrollY;
      }
    });
  </script>
  {% endif %}
</body>

</html>