{% extends "_layout" %}

{% block navbar %}
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav mr-auto">
  {% for list in lists %}
    <li class="nav-item">
      <a class="nav-link listSelect" data-list-id="{{ list.id }}" href="#{{ list.id }}">{{ list.name }}</a>
    </li>
  {% endfor %}
  </ul>
  <button class="btn float-right btn-primary" id="editButton">
    <span class="glyphicon glyphicon-edit"></span>
    Bewerk
  </button>
  <div class="btn-group" role="group" aria-label="Edit buttons">
    <button class="btn float-right btn-default" id="cancelButton">
      <span class="glyphicon glyphicon-save"></span>
      Annuleren
    </button>
    <button class="btn float-right btn-primary" id="saveButton">
      <span class="glyphicon glyphicon-save"></span>
      Opslaan
    </button>
  </div>
</div>
{% endblock navbar %}

{% block content %}
<div class="row">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h1 class="panel-title" id="listName"></h1>
      </div>
      <div class="panel-body border p-3" id="listHtml"></div>
      <div class="panel-footer">
        <small><i id="listUpdatedAt"></i></small>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <textarea class="form-control" id="listData" rows="25"></textarea>
  </div>
</div>
{% endblock content %}

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