1 files changed, 55 insertions, 0 deletions
diff --git a/design/templates/notes/notebook_list.html b/design/templates/notes/notebook_list.html
new file mode 100644
index 0000000..6f25f62
--- /dev/null
+++ b/design/templates/notes/notebook_list.html
@@ -0,0 +1,55 @@
+{% extends 'base.html' %}
+
+{% block extrastyles %}
+<link rel="stylesheet" href="/media/quill.snow.css" />
+<script async src="/media/js/vanilla-picker.min.js"></script>
+{% endblock %}
+{% block content %}
+<main>
+    <article class="note-container">
+        <h2 class="hed-small top-margin-0">Add a Notebook</h2>
+        {% include 'notes/partials/notebook_form.html' with form=form %}
+    <h1 class="hed-small">Notebooks</h1>
+
+    <ul class="nb-list">{% for form in notebook_form_list %}
+        <li class="nb-list-item">
+            <form action="{% url 'notebook-api-detail'  form.instance.id %}" method="PUT">{% for field in form %}{% if field.name == 'color_rgb' %}
+                <fieldset class="color-picker-fieldset" id="color-picker-{{forloop.parentloop.counter0}}" {% if form.instance.color_rgb %}style="background-color: {{form.instance.color_rgb}}; border: none;"{%endif%}>
+                    <input type="text" name="color_rgb" value="{{form.instance.color_rgb}}" maxlength="20" id="id_color_rgb">
+                    {% if field.errors %}{{field.errors}}{% endif %}
+                </fieldset>
+                href="{% url 'notebooks:detail' form.instance.slug %}"
+                <h2>{{form.instance.name}}</h2>
+                {% else %}
+                <fieldset>
+                    {% if field.field.widget.input_type != 'hidden' %}{{field.label_tag}}{% endif %}
+                    {{field}}
+                    {% if field.errors %}{{field.errors}}{% endif %}
+                </fieldset>{% endif %}{% endfor %}
+                <input id="i-{{forloop.counter0}}" type="submit" class="btn sm" value="Save" >
+            </form>
+            <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-edit" id="edit-toggle-btn-{{forloop.counter0}}">Edit</a></div>
+            <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-trash" id="trash-btn-{{forloop.counter0}}">Trash</a></div>
+        </li>
+        {%endfor%}</ul>
+    {% comment %}
+    <ul class="nb-list">{% for object in notebook_list %}
+        <li class="nb-list-item">
+            <div class="color-picker-fieldset" id="color-picker-{{forloop.counter0}}" {% if object.color_rgb %}style="background-color: {{object.color_rgb}}; border: none;"{%endif%}>
+            </div>
+            <p><a href="{% url 'notebooks:detail' object.slug %}">{{object.name}}</a></p>
+            <p>{{object.note_count}} notes</p>
+            <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-edit" id="edit-toggle-btn">Edit</a></div>
+            <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-Trash" id="edit-toggle-btn">Trash</a></div>
+        </li>
+        {%endfor%}</ul>
+    {% endcomment %}
+    </article>
+    <!--<aside class="note-list-container">
+        {% include "notes/partials/note_sidebar.html" with note_list=note_list %}
+    </aside>
+    <div class="balance-container">
+    </div>-->
+</main>
+{% endblock %}
+