{% 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">
        <div class="flex-wrapper">
        <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 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>{% 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>
        </div>

        <form id="new-note-form" action="{% url 'notebook-api-list' %}" method="post" class="hide">
            <label>Create a new notebook</label>
            {% csrf_token %}
            {{ form.non_field_errors }}
            {% for field in form %}
            <fieldset class="" id="fs-{{field.name}}" >
                {{field.label_tag}}
                {{field}}
                {% if field.errors %}{{field.errors}}{% endif %}
            </fieldset>
                {% endfor %}
                <p><input id="btn-js-hide" class="btn btn-inline" value="create" type="submit" /></p>
        </form>
            <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%}