{% 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 %}