{% extends "core/base.html" %}
{% load static %}

{% block title_text %}Billnotes{% endblock title_text %}
{% block header_text %}<span>Bill</span>notes{% endblock header_text %}

{% block content %}
<div class="note-page">
    <h2>My Notes</h2>
    <ul class="note-list">
        {% for item in note_items %}
        <li class="note-item" data-slug="{{ item.obj.slug }}"
            data-set-palette-url="{% url 'billboard:note_set_palette' item.obj.slug %}">

            {% if item.obj.palette %}
            <div class="note-item__palette {{ item.obj.palette }}"></div>
            {% else %}
            <div class="note-item__image-box">?</div>
            {% endif %}

            <p class="note-item__title">{{ item.title }}</p>
            <p class="note-item__description">{{ item.description }}</p>

            {% if not item.obj.palette and item.palette_options %}
            <template class="note-palette-modal-tpl">
                <div class="note-palette-modal">
                    {% for palette_name in item.palette_options %}
                    <div class="{{ palette_name }}">
                        <div class="note-swatch-body"></div>
                        <button type="button" class="btn btn-confirm">OK</button>
                    </div>
                    {% endfor %}
                    <div class="note-palette-confirm" hidden>
                        <p>Lock in this palette?</p>
                        <button type="button" class="btn btn-confirm">OK</button>
                        <button type="button" class="btn btn-cancel">NVM</button>
                    </div>
                </div>
            </template>
            {% endif %}

        </li>
        {% empty %}
        <li class="note-item note-item--empty">No notes yet.</li>
        {% endfor %}
    </ul>
</div>
<script src="{% static 'apps/billboard/note-page.js' %}"></script>
{% endblock %}