{% extends "_layout" %}

{% block navbar %}
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav mr-auto">
  {% for note in notes %}
    <li class="nav-item">
      <a class="nav-link note-select" data-note-id="{{ note.id }}" href="#{{ note.id }}">{{ note.name }}</a>
    </li>
  {% endfor %}
  </ul>
  <button class="btn btn-sm btn-light notes-refresh" title="Verversen">
    <i class="fas fa-sync-alt"></i> Verversen
  </button>
  </div>
</div>
{% endblock navbar %}

{% block content %}
<div class="card-columns">
{% for note in notes %}
  <div class="card note mb-3" style="display:none"; data-note-id="{{ note.id }}">
    <div class="card-header">
      <h1 class= "mb-0">
        <span id="note-name">{{ note.name }}</span>
        <div class="btn-toolbar float-right mt-1" role="toolbar" aria-label="Note buttons">
          <div class="btn-group note-edit-mode-buttons"
               role="group" aria-label="Edit mode buttons">
            <button class="btn btn-dark note-edit-button" title="Bewerken">
              <i class="fas fa-edit"></i>
            </button>
          </div>
          <div class="btn-group note-edit-buttons" role="group"
               aria-label="Edit note buttons">
            <button class="btn btn-light note-edit-help" title="Opmaakhulp">
              <i class="fas fa-question-circle"></i>
            </button>
            <button class="btn btn-light note-cancel-button" title="Annuleren">
              <i class="fas fa-ban"></i>
            </button>
            <button class="btn btn-dark note-save-button" title="Opslaan">
              <i class="fas fa-save"></i>
            </button>
          </div>
        </div>
      </h1>
    </div>
    <div class="card-body">
      <div class="card-text note-html"></div>
      <div class="card-text">
        <textarea class="form-control note-data" rows="16"
                  data-title="Opmaakhulp"
                  data-content="<pre class='mb-0'>
## Kop 2
### Kop 3
#### Kop 4

_Schuingedrukt_
**Vetgedruk**
~Doorgestreept~

* Item 1
* Item 2

* [ ] Wil ik graag
* [ ] Wil ik ook graag
* [x] Heb ik al!

[Linktekst](http://google.nl)

---
Horizontale lijn<pre>"></textarea>
      </div>
    </div>
    <div class="card-footer">
      <p class="card-text">
        <small>
          <i class="fas fa-clock"></i>
          <i class="note-updated-at"></i>
        </small>
      </p>
    </div>
  </div>
{% endfor %}
</div>
<div class="modal" tabindex="-1" role="dialog" id="errorDialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header bg-dark text-light">
        <h5 class="modal-title"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span class="text-light" aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

{% block footer %}
<footer class="footer bg-dark text-light">
  <div class="container text-center">
    <small>Rocket Pinboard v{{app_version}} — &copy; 2018 Paul van Tilburg</small>
  </div>
</footer>
{% endblock footer %}

{% block script %}
<script src="/js/pinboard.js"></script>
{% endblock script %}