{% extends 'base.html' %}
{% block extrastyles %}
<link rel="stylesheet" href="/media/quill.snow.css" />
{% endblock %}
{% block breadcrumbs %}
<li><a href="{%url 'notes:note-list' user.username %}">Notes</a></li>
{% endblock %}

{% block content %}
<main>
    <article class="note-container">
        <header class="note-header">
            <div class="note-header-left">
                <span class="label">tags:</span>
                <ul>{% for tag in object.tags.all %}
                    <li>
                        <a href="{% url 'notes:note-tag' user.username tag.slug %}">{{tag}}</a>
                    </li>
                    {%endfor%}</ul>
                <div class="notebook">
                    <span class="label">notebook:</span>
                    <a href="">{{object.notebook.name}}</a>
                </div>
            </div>
            <div class="note-header-right">
                <h2 class="note-time">{{object.date_created|date:"M d, Y"}}</h2>
                {% if object.url %}<h3 class="note-url"><a class="btn btn-small btn-subtle" href="{{object.url}}">Source</a><a class="btn btn-small btn-subtle right-padding-0 left-margin-2" href="object.cache">Archive</a></h3>{% endif %}
            </div>
        </header>
        <div class="edit-btn-wrapper"><button class="hide btn btn-hollow" id="edit-toggle-btn">Edit</button></div>
        <h1 id="note-title" class="note-title">{{object.title}}</h1>
        <div id="q-container" class="inactive"><div id="note-body">{% if object.body_html %}{{object.body_html|safe}}{%else%}{{object.body_text}}{%endif%}</div></div>
        <form action="" method="post" id="note-edit-form">{% csrf_token %}
            {% for field in form %}{% if field.name in "title body_text" %}
            <div class="hide">{{field}}</div>
            {% endif%}{% endfor %}
        <input id="btn-js-hide" type="submit" class="btn sm" value="Save" >
        </form>
    </article>
    <aside class="note-list-container">
        <div class="svg-wrapper"><svg class="svg-icon-arrow">
            <svg viewBox="0 0 16 13" id="shape-double-arrow" width="100%" height="100%"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><g id="Showing-post-info" transform="translate(-297.000000, -105.000000)" stroke="currentColor"><g transform="translate(305.000000, 111.500000) scale(-1, 1) rotate(-180.000000) translate(-305.000000, -111.500000) translate(297.000000, 105.000000)"><path d="M2.20710678,6.5 L6.85355339,1.85355339 L7.20710678,1.5 L6.5,0.792893219 L6.14644661,1.14644661 L1.14644661,6.14644661 L1.05805826,6.23483496 L0.792893219,6.5 L1.14644661,6.85355339 L6.14644661,11.8535534 L6.5,12.2071068 L7.20710678,11.5 L6.85355339,11.1464466 L2.20710678,6.5 Z" id="Combined-Shape"></path><path d="M10.2071068,6.5 L14.8535534,1.85355339 L15.2071068,1.5 L14.5,0.792893219 L14.1464466,1.14644661 L9.14644661,6.14644661 L9.05805826,6.23483496 L8.79289322,6.5 L9.14644661,6.85355339 L14.1464466,11.8535534 L14.5,12.2071068 L15.2071068,11.5 L14.8535534,11.1464466 L10.2071068,6.5 Z" id="Combined-Shape"></path></g></g></g></svg>
            </svg></div>
        <div class="">
            <ul class="list-note-preview">{% for obj in notes_list %}
                <li>
                    <a href="{% url 'notes:note-detail' user.username  obj.slug %}">
                        <h4>{{obj.title}}</h4>
                        <div class="note-preview">{{obj.body_text|truncatewords:12}}</div>
                    </a>
                </li>
            {% endfor %}</ul>
        </div>
    </aside>
    <div class="balance-container">
    </div>
</main>
{% endblock %}

{% block jsinclude %}
<script src="/media/js/highlight.pack.js"></script>
<script src="/media/js/quill.min.js"></script>
<script>
document.addEventListener('readystatechange', event => {
  if (event.target.readyState === "interactive") {
    //initLoader();
  }
  else if (event.target.readyState === "complete") {
    initQuill("#note-body");
  }
});
</script>
{% endblock %}
    <script>
{% block jsdomready %}
    var btn = document.getElementById("edit-toggle-btn"),
        qcontainer = document.getElementById('q-container'),
        title = document.getElementById('note-title'),
        form = document.getElementById('note-edit-form'),
        note_html = document.createElement('textarea'),
        note_qjson = document.createElement('textarea');

    window.editing = false;
    window.quillchange = false;

    hljs.initHighlightingOnLoad();
    btn.classList.remove('hide');
    note_html.setAttribute('name', 'body_html');
    note_html.setAttribute('class', 'hide');
    note_html.setAttribute('id', 'id_body_html');
    note_qjson.setAttribute('name', 'body_qjson');
    note_qjson.setAttribute('id', 'id_body_qjson');
    note_qjson.setAttribute('class', 'hide');
    form.appendChild(note_html);
    form.appendChild(note_qjson);
    document.getElementById("btn-js-hide").classList.add("hide");
    btn.addEventListener('click', function(){edit_note(this, title, qcontainer, window.quill, "{% url 'notes-api-detail' object.pk %}" )}, false)
{%endblock%}
    </script>

'indent
'align
'direction
'code-block