Lemmah/BucketList

{% extends "base_layout.html" %}
{% block title %}Dream Buckets | {{ bucketlist }} Items{% endblock %}
{% block nav_menu_items %}
  <ul id="nav-mobile" class="right hide-on-med-and-down">
    <li><a href="#" class="waves-effect waves-teal btn-flat white-text">{{ username }}</a></li>
    <li><a href="/logout/" class="waves-effect waves-teal btn-flat white-text">LogOut</a></li>
  </ul>
  <ul class="side-nav" id="mobile-demo">
    <li><a href="/logout/">Logout</a></li>
  </ul>
{% endblock %}
{% block body %}
    <div class="container">
    <div class="row center">
      <p class="flow-text"><i class="material-icons circle green">insert_chart</i>{{ bucketlist }}</p>    
        <div class="col s12 m4"></div>
    <div class="col s12 m4 center card ">
    {% for message in get_flashed_messages() %}
          <p class="red-text">{{ message }}</p>
        {% endfor %}
    </div>
    <div class="col s12 m4"></div>
    </div>
      <div class="row">
        <ul class="collection">
       {% if not empty_bucketlist %}
       {% for bucketlist_item in bucketlist.items %}
           <li class="collection-item avatar">
             <i class="material-icons circle green">note_add</i>
             <span class="title">{{ bucketlist_item.name }}</span>
             <p> <span class="blue-text"> {{ bucketlist_item.category }}</span><br>
         {{ bucketlist_item.description }}
             </p>
         <!-- Dropdown of Options available to a bucketlist -->
 
     <div class="fixed-action-btn horizontal secondary-content">
        <a class="btn-floating btn-large green">
          <i class="large material-icons">settings</i>
        </a>
        <ul>
          <li><a href="{{ bucketlist_item.name }}/delete/" class="btn-floating red tooltipped" data-position="top" data-delay="10" data-tooltip="Delete Bucketlist"><i class="material-icons">delete</i></a></li>
          <li><a href="#edit_bucketlist_item" class="btn-floating blue tooltipped" data-position="top" data-delay="10" data-tooltip="Edit Bucketlist"><i class="material-icons">mode_edit</i></a></li>
        </ul>
      </div>
      <!-- Form for editing a Bucketlist item: it's a modal! -->
      <div id="edit_bucketlist_item" class="modal">
        <div class="modal-content">
          <h4>Edit {{ bucketlist_item.name }}</h4>
          <div id="create_bucketlist" class="col s12">
            <form class="col s12" method="post" action="{{ bucketlist_item.name }}/update/">
            <div class="input-field col s12">
            <i class="material-icons prefix">assignment</i>
            <input id="icon_prefix" type="text" name="item_name" value="{{ bucketlist_item.name }}" required>
            <label for="icon_prefix">Bucketlist Name</label>
            </div>
        <div class="input-field col s12">
         <i class="material-icons prefix">accessibility</i>
        <select name="item_category" value="{{ bucketlist_item.name }}" required>
          <option value="" disabled>Choose Category</option>
          <option value="Career">Career</option>
          <option value="Health">Health</option>
          <option value="Entertainment">Entertainment</option>
        </select>
            </div>
        <div class="input-field col s12">
         <i class="material-icons prefix">assessment</i>
             <textarea id="textarea1" class="materialize-textarea" name="item_desc">{{ bucketlist_item.description }}</textarea>
             <label for="icon_prefix">Bucketlist Description</label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <a href="" class="left btn modal-action modal-close waves-effect waves-teal red darken-3"><i class="material-icons right">cancel</i>Cancel</a>
      <button class="btn waves-teal green darken-3"><i class="material-icons right">done_all</i>Update</button>
        </div>
    </form>
      </div>
       {% endfor %}
       {% else %}
        <li class="collection-item avatar">
            <div class="center">
         <br><br>
         <p class="flow-text"> Your {{ bucketlist }} bucketlist is empty!</p><br><br>
             <p><a onclick="$('.tap-target').tapTarget('open')" class="waves-effect waves-light btn green">Add your first Item</a></p>
         <br><br>
            </div>
        </li>
       {% endif %}
         </ul>
      </div>
    </div>
         <!-- Super Add Button: it's a tap target -->
         <div class="fixed-action-btn">
           <a id="menu" class="waves-effect waves-light btn btn-floating btn-large green" href="#create_bucketlist">
             <i class="material-icons">add</i>
           </a>
         </div>
 
     <!-- Welcome message: it's the tap content -->
         <div class="tap-target green" data-activates="menu">
           <div class="tap-target-content white-text">
             <h5>The Super Add Button</h5>
             <p class="white-text">Welcome, {{ username }}. We're glad that you're creating your first bucketlist here. You will be using this button to add more bucketlists and even add items to a bucketlist. Happy adventure!</p>
           </div>
         </div>
 
      <!-- Form for adding Bucketlist items: it's a modal! -->
      <div id="create_bucketlist" class="modal">
        <div class="modal-content">
          <h4>Enter Item Details</h4>
          <div id="create_bucketlist" class="col s12">
            <form class="col s12" method="post" action="add_item/">
            <div class="input-field col s12">
            <i class="material-icons prefix">assignment</i>
            <input id="icon_prefix" type="text" name="item_name" required>
            <label for="icon_prefix">Item Name</label>
            </div>
        <div class="input-field col s12">
         <i class="material-icons prefix">accessibility</i>
        <select name="item_category">
          <option value="" disabled selected>Choose Category</option>
          <option value="Career">Career</option>
          <option value="Health">Health</option>
          <option value="Entertainment">Entertainment</option>
        </select>
            </div>
        <div class="input-field col s12">
         <i class="material-icons prefix">assessment</i>
             <textarea id="textarea1" class="materialize-textarea" name="item_desc"></textarea>
             <label for="icon_prefix">Item Description</label>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <a href="" class="left btn modal-action modal-close waves-effect waves-teal red darken-3"><i class="material-icons right">cancel</i>Cancel</a>
      <button class="btn waves-teal green darken-3"><i class="material-icons right">add</i>Create</button>
        </div>
    </form>
      </div>
{% endblock %}