{% 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 id="nb-list-home" class="note-container">
    <div class="flex-wrapper">
    <h1 class="hed-small">Notebooks</h1>
    <a class="circle plus small-circle modal-open push-top" href="/nb/" id="add_id_notebook" data-modal-hed-class="notebook" data-modal-hed="Add a New Notebook">New</a>
    </div>
            {% if messages %}
                <ul class="messages">
                    {% for message in messages %}
                        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
                            {% if 'safe' in message.tags %}{{ message|safe }}{% else %}{{ message }}{% endif %}
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        <div id="notebook-wrapper">
        {% include 'notes/partials/notebook_form.html' with form=form url='' %}
        </div>
    <ul class="nb-list">{% for form in notebook_form_list %}
        <li class="nb-list-item">
            <form action="{% url 'notebooks:update' form.instance.slug %}" method="POST" name="create" data-method="POST" data-action="">{% csrf_token %}
                {% for field in form %}{% if field.name == 'color_rgb' %}
                <div class="flex-wrapper">
                <fieldset class="fe-color-picker 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" class="input-color-rgb" name="color_rgb" value="{{form.instance.color_rgb}}" maxlength="20" id="id_color_rgb-{{forloop.parentloop.counter0}}">
                    {% if field.errors %}{{field.errors}}{% endif %}
                </fieldset>
                <h2 class="nb-name"><a href="{% url 'notebooks:detail' form.instance.slug %}">{{form.instance.name}}</a></h2>
                <button type="submit" value="trash" class="btn-hollow trash float-right" name="trash">Move to Trash</button>
                </div>
                {% elif field.name == 'name' %}
                <fieldset>
                    <label for="id_name-{{forloop.parentloop.counter0}}">Notebook Name:</label>
                    <input type="text" name="name" value="{{form.instance.name}}" maxlength="250" required id="id_name-{{forloop.parentloop.counter0}}">
                </fieldset>
                {% else %}
                    {% if field.field.widget.input_type != 'hidden' %}{{field.label_tag}}{% endif %}
                    {{field}}
                    {% if field.errors %}{{field.errors}}{% endif %}
                {% endif %}{% endfor %}
                <input id="i-{{forloop.counter0}}" type="submit" class="btn sm" value="Save" >
                
                <div class="row-wrapper">
                    <p>{{form.instance.note_count}} notes{% if form.instance.note_count > 5 %}, most recent:{%endif%}</p>
                    {% if form.instance.note_count > 0 %}<ul id="n-list-{{forloop.counter0}}" class="n-list{% if form.instance.note_count > 5 %} slideup{%endif%}">{% for note in form.instance.note_set.all %}
                        <li><a href="{{note.get_absolute_url}}">{{note.title}}</a></li>
                        {%endfor%}
                        {% if form.instance.note_count > 5 %}<li class="more"><button type="button" class="btn btn-small btn-more button" id="more-button-{{forloop.counter0}}">More</button></li>{%endif%}
                    </ul>{%endif%}
                    {% if form.instance.tag_list %}<div class="tags">Common tags: <ul class="inline">{% for tag in form.instance.tag_list %}
                        <li class="inline"><a href="{% url 'notes:tags' tag.slug %}">
                                <span class="tag-wrapper" data-bg-color="#{{tag.color_hex}};" >{{tag|title}}</span>
                            </a></li>
                            {%endfor%}</div>{%endif%}
                    <div class="edit-btn-wrapper"><a class="btn btn-hollow btn-nb-edit float-right" id="edit-toggle-btn-{{forloop.counter0}}">Edit</a></div>
                </div>
            </form>
        </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 %}