Lemmah/BucketList

{% extends "base_layout.html" %}
{% block title %}Dream Buckets | Dashboard{% endblock %}
{% block nav_menu_items %}
  <ul id="nav-mobile" class="left hide-on-med-and-down">
  </ul>
  <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">Before you die...</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 no_bucketlists %}
       {% for bucketlist in session_user.available_bucketlists %}
           <li class="collection-item avatar">
             <i class="material-icons circle green">insert_chart</i>
             <span class="title">{{ bucketlist.name }}</span>
             <p> <span class="blue-text"> {{ bucketlist.details }}</span><br>
                {% for item in bucketlist.items %}
            <div class="chip">
           {{ item }}
        </div>
        {% endfor %}
             </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="bucketlists/{{ bucketlist }}/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="bucketlists/{{ bucketlist }}/" class="btn-floating green tooltipped" data-position="top" data-delay="10" data-tooltip="Manage Items"><i class="material-icons">note_add</i></a></li>
          <li><a href="#edit_bucketlist{{bucketlist}}" 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: it's a modal! -->
      <div id="edit_bucketlist{{bucketlist}}" class="modal">
        <div class="modal-content">
          <h4>Edit {{ bucketlist.name }}</h4>
          <div id="create_bucketlist" class="col s12">
            <form class="col s12" method="post" action="bucketlists/{{ bucketlist.name }}/update/">
            <div class="input-field col s12">
            <i class="material-icons prefix">assignment</i>
            <input id="icon_prefix" type="text" name="bucketlist_name" value="{{ bucketlist.name }}" required>
            <label for="icon_prefix">Bucketlist Name</label>
            </div>
        <div class="input-field col s12">
         <i class="material-icons prefix">assessment</i>
             <textarea id="textarea1" class="materialize-textarea" name="bucketlist_desc">{{ bucketlist.details }}</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"> There are no bucketlists in here... </p><br><br>
             <p><a onclick="$('.tap-target').tapTarget('open')" class="waves-effect waves-light btn green">Create First Bucketlist</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: it's a modal! -->
      <div id="create_bucketlist" class="modal">
        <div class="modal-content">
          <h4>Enter Bucketlist Details</h4>
          <div id="create_bucketlist" class="col s12">
            <form class="col s12" method="post" action="create_bucketlist/">
            <div class="input-field col s12">
            <i class="material-icons prefix">assignment</i>
            <input id="icon_prefix" type="text" name="bucketlist_name" required>
            <label for="icon_prefix">Bucketlist Name</label>
            </div>
        <div class="input-field col s12">
         <i class="material-icons prefix">assessment</i>
             <textarea id="textarea1" class="materialize-textarea" name="bucketlist_desc"></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">add</i>Create</button>
        </div>
    </form>
      </div>
{% endblock %}