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

            <div class="note-item__body">
                <p class="note-item__title">{{ item.title }}</p>
                <p class="note-item__description">{{ item.description }}</p>
                <div class="note-recognitions">
                    <div class="note-recognitions__header">Recognitions</div>
                    <ul class="note-recognitions__list">
                        <li><span class="note-recognitions__dim">Title:</span> <strong>{{ item.title }}</strong></li>
                        {% if item.obj.palette %}
                        <li class="note-recognitions__palette-line"><span class="note-recognitions__dim">Palette:</span> <strong>{{ item.palette_label }}</strong></li>
                        {% endif %}
                    </ul>
                </div>
            </div>

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

            {% if not item.obj.palette and item.palette_options %}
            <template class="note-palette-modal-tpl">
                <div class="note-palette-modal">
                    {% for p in item.palette_options %}
                    <div class="{{ p.name }}" data-palette-label="{{ p.label }}">
                        <div class="note-swatch-body"></div>
                        <span class="note-swatch-label">{{ p.label }}</span>
                    </div>
                    {% endfor %}
                    <div class="note-palette-confirm">
                        <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 %}