<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{{data.pUser.name}}'s Profile</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    />
  </head>

  <style>
    .user_name {
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: large;
        color:black;
        font-weight: bolder;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
      
    .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+ */
    }
    .ui.inverted.segment {
      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 inverted secondary top 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 dropdown simple 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 active">
          <img
            id="image_profile"
            class="ui avatar image mini"
            src="{{data.user.image}}"
          />
          <p id="hi_name">{{data.user.name}}</p>
        </a>
        <a href="{% url 'logout'%}" class="item">
          Logout
        </a>
      </div>
    </div>
    <!--End of Navigation Bar-->

    <!--Profile Image-->

    <div class="ui segment inverted">
      <div style="margin-top: 70px; display: inline-flex;">
        <img
         id="user_image" style="height: 180px; width: 180px;" 
          class="ui avatar image small"
          src="{{data.pUser.image}}"
        />
        <div style="margin-left: 5px; margin-top: 75px;">
          <h2 style="color: bisque;">{{data.pUser.name}}</h2>
        </div>
      </div>
    </div>

    <!--Container-->

    <div class="ui container" style="margin-top: 20px; margin-bottom: 250px;">
      <div class="ui pointing menu">
        <a href="{% url 'public_profile'%}?id={{data.pUser.userID}}" class="item">
          About
        </a>
        <a class="item active">
          Friends
        </a>
        <a
          href="{% url 'public_fav_recipes'%}?id={{data.pUser.userID}}"
          class="item"
        >
          Favorite Recipes
        </a>
        <a href="{% url 'public_personal_recipes'%}?id={{data.pUser.userID}}" class="item">
          Personal Recipes
        </a>

      </div>

      <!--friend list cards-->
      <div
        style="margin-bottom: 50px; padding: 20px;"
        class="ui raised segment"
      >
        {% if data.friends %} {% if data.num_of_friends == 1 %}
        <p>
          List of all Your Friends ({{data.num_of_friends}} Item)
        </p>
        {% else %}
        <p>
          List of all Your Friends ({{data.num_of_friends}} Items)
        </p>
        {% endif %}
        <div class="ui container center aligned">
          <div class="ui grid" style="margin-top: 15px; margin-bottom: 75px;">
            {% for friend in data.friends %}

            <div class="four wide column">
              <div
                class="ui link card"
                style="width: 300px; height: 260px;"
              >
                <a class="ui medium image">
                  <img style="height: 210px; object-fit: cover;" src="{{friend.image}}" />
                </a>
                <div class="content" style="text-align: center;">
                  <p class="user_name" style="margin-bottom: 10px">{{friend.name}}</p>
                </div>
                <div class="extra content" bis_skin_checked="1">
                  <form
                    action="/empty_my_fridge/public_profile/"
                    method="get"
                    class="ui form"
                  >
                     <span class="right floated">

                      <input
                        style="display: none;"
                        name="friend_id"
                        value="{{friend.userID}}"
                      />

                      </form>
                      
                     
                    </span>
                  
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
          {% else %}
          <h2 style="padding: 100px;">
            Your Friends List is Empty. Try adding a few!
          </h2>
          {% endif %}
        </div>
      </div>
      <!--end of favorite list card-->
    </div>

  </body>
</html>
