<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Personal Recipes</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    />
  </head>
  
  <style>
    .vertical-center {
      margin: 0;
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    .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+ */
    }

  </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 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 active">
          <img
            id="image_profile"
            class="ui avatar image mini"
            s style="height: 35px; width: 35px;"
            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.user.image}}"
        />
        <div style="margin-left: 5px; margin-top: 75px;">
          <h2 style="color: bisque;">{{data.user.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 'profile'%}" class="item">
          About Me
        </a>
        <a href="{% url 'friends'%}" class="item">
          Friends
        </a>
        <a
        href="{% url 'friend_requests'%}"
        class="item"
      >
        Friend Requests
      </a>
        <a href="{% url 'favorite_recipes'%}" class="item">
          My Favorite Recipes
        </a>
        <a
          href="{% url 'personal_recipes'%}"
          class="active item"
        >
          Personal Recipes
        </a>

        <div class="right menu">
          <a href="{% url 'edit_profile'%}" class="item">
            Edit Profile
          </a>
          <a href="{% url 'account_settings'%}" class="item">
            Account Settings
          </a>
        </div>
      </div>

      <div class="ui grid">
        <div class="eight wide column">
          <div style="margin-bottom: 50px;" class="ui raised segment">
            <h3>ADD A NEW RECIPE</h3>
            <form action="/empty_my_fridge/personal_recipes/" method="post" class="ui form">
              <div style="width: 80%;" class="field">
                <label>Title of Recipe</label>
                <input
                  placeholder="Title of Recipe"
                  required
                  name="title"
                  type="text"
                />
              </div>

              <div style="width: 80%;" class="field">
                <label>Categories: Separate each category by a comma</label>
                <input

                  placeholder="category1, category2, ..."
                  type="text"
                  name="recipe_categories"
                  required
                />
              </div>

              <div style="width: 80%;" class="field">
                <label>Description</label>
                <input
                  rows="3"
                  placeholder="Description of Recipe"
                  type="text"
                  name="description"
                />
              </div>

              <div style="width: 80%;" class="field">
                <label>Steps </label>
                <textarea
                  placeholder="How to make the recipe"
                  name="steps"
                  required
                ></textarea>
              </div>

              <span class="myfridge_list_holder">
                <div style="width: 80%;" class="field">
                  <label>List of Ingredients Needed</label>
                  <input
                    type="text"
                    placeholder="food1,food2,food3,..."
                    name="ingredients"
                    id="ing"
                    required
                  />
                </div>
                <div style="width: 80%;" class="field">
                  <label>List of Respective Measurements Needed (In the same order)</label>
                  <input
                    type="text"
                    placeholder="1/4 cup, 3 tbsp, 1 dollop,..."
                    name="measurements"
                    id="measure"
                    required
                  />
                </div>
              </span>


              <!--dropdown w/out javascript-->
              <div class="ui form">
                <div class="seven wide field">
                  <label>Level of Privacy</label>
                  <select name="privacy">
                    <option value="0">Privacy</option>
                    <option value="2">Public</option>
                    <option value="1">Friends Only</option>
                    <option value="0">Private</option>
                  </select>

                  <!--in python, assign data-value to another db attribute-->
                </div>
              </div>

              <!--SUBMIT FORM-->
              <button class="ui button blue" type="submit">
                Add New Recipe
              </button>
            </form>
            <div
              style="display: none;"
              id="message"
              class="ui {{data.msg_type}} message"
            >
              <div class="header">
                {{data.msg_type}}
              </div>
              <p>{{data.message}}</p>
            </div>
          </div>
        </div>

        <!--LIST ALL CURRENT USER RECIPES IF PRESENT-->
        <div class="eight wide column">
          <div style="margin-bottom: 50px;" class="ui raised segment">
            <h3>YOUR CURRENT RECIPES</h3>
            <div class="ui list">
              {%if not my_recipes%}
              <label>{{no_rec}}</label>
              {%endif%} 
              {% for each in my_recipes %}
              <div class="item">
                <i class="right triangle icon"></i>
                <div class="content">
                  <a class="header" href="{% url 'recipe_view_page'%}?id={{each.recipe_id}}" id="rec_link"
                  name="rec_link" value="True">{{each.recipe_name}}</a>
                  <div class="description">{{each.description}}</div>
                  <form
                    action="/empty_my_fridge/recipe_view_page/"
                    method="post"
                    class="ui form"
                  >
                     <span class="right floated star"/>
                      <input
                        style="display: none;"
                        name="go_public"
                        value="{{each}}"
                      />

                  </form>
                  <form action="/empty_my_fridge/personal_recipes/" method="post" class="ui form"> 
                    <input
                        style="display: none;"
                        name="delete_recipe"
                        value="{{each.recipe_id}}"
                      />
                    <button
                      style="margin-top: -80px;"

                      class="ui icon button"
                      data-tooltip="Delete this Recipe"
                    >
                      <i class="trash alternate outline icon"></i>
                    </button>
                  </form>
                </div>
              </div>
              {%endfor%}
            </div>
          </div>
        </div>
      </div>
    </div>

    {% if data.message %}
    <script>
      document.getElementById("message").style.display = "block";
    </script>
    {% endif %} 
    

    <!-- add code to list available personal recipes from database-->
  </body>
</html>
