{% extends 'base.html' %}

{% block extrastyles %}
<script async src="/media/js/vanilla-picker.min.js"></script>
{% endblock %}

{% block content %}
<main>
    <article class="note-container single-col">
         {% include "notes/partials/list_header.html" with notebook_list=notebook_list tag_list=tag_list %}
        <div class="flex-wrapper">
            {% if object.name != 'Trash'%}
        <form id="nb-edit-form" action="{% url 'notebook-api-detail' object.pk %}" method="PATCH">{% csrf_token %}
            {{ form.non_field_errors }}
            <div class="flex-wrapper flex-inner">
                {% for field in form %}{% if field.name == 'color_rgb' %}
                <fieldset class="color-picker-fieldset" id="color-picker" {% if object.color_rgb %}style="background-color: {{object.color_rgb}}; border: none;"{%endif%}>
                    <input type="text" name="color_rgb" value="{{object.color_rgb}}" maxlength="20" id="id_color_rgb">
                    {% if field.errors %}{{field.errors}}{% endif %}
                </fieldset>{% else %}
                <fieldset class="hide">
                    {{field.label_tag}}
                    {{field}}
                    {% if field.errors %}{{field.errors}}{% endif %}
                </fieldset>{% endif %}
                    {% endfor %}
                    <h1 class="notebook-title" id="nb-title">{{object.name}}</h1>
            </div>
                <input id="btn-js-hide" type="submit" class="btn sm" value="Save" >
        </form>
        <div class="edit-btn-wrapper"><a class="hide btn btn-hollow" id="edit-toggle-btn">Edit</a></div>
        {%else%}
            <h1 class="notebook-title" id="nb-title">{{object.name}}</h1>
        {%endif%}
        </div>

            <ul class="list-note-preview">{% for object in object.note_set.all %}
                {% include "notes/partials/note_list.html" with object=object hidecolor=True hidenotebook=True %}
            {% endfor %}</ul>
    </article>
    {%comment%}<aside class="note-list-container">
        {% include "notes/partials/note_sidebar.html" with note_list=note_list %}
    </aside>
    <div class="balance-container">
    </div>{%endcomment%}
</main>
{% endblock %}
{% block jsdomready %}
window.url = "{% url 'notebook-api-detail' object.pk %}";
{%endblock%}