{% extends "constellation_base/base.html" %}

{% block title %}Orderboard | Manage Boards{% endblock %}
{% block heading %}Orderboard | Manage Boards{% endblock %}

{% block head %}
{{ block.super }}
{% load static %}
<link rel="stylesheet" href="{% static 'constellation_orderboard/css/orderboard.css' %}">
{% endblock %}

{% block js %}
<div id="message-toast" class="mdl-js-snackbar mdl-snackbar">
  <div class="mdl-snackbar__text"></div>
  <button class="mdl-snackbar__action" type="button"></button>
</div>
{{ block.super }}
{% load static %}
<script src="{% static 'constellation_orderboard/js/view-list.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script>
    var url_api_v1_board_list = "{% url 'api_v1_board_list' %}"
    var url_view_board = "{% url 'view_board' 0 %}"
</script>
{% endblock %}

{% block content %}
<div id="boardsCard" class="mdl-card mdl-cell--8-col mdl-cell--2-offset-desktop mdl-shadow--2dp mdl-grid">
    {% verbatim %}
    <script id="handlebars-board" type="text/x-handlebars-template">
        <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">Boards</h2>
        </div>
        <div class="mdl-card__supporting-text">
            <div class="mdl-list">
            {{#if boards}}
            {{#each boards}}
                <div class="mdl-list__item">
                    <span class="mdl-list__item-primary-content">
                        <a href="{{url}}">{{name}}</a>
                    </span>
                    <span class="mdl-list__item-secondary-content">
                        {{desc}}
                    </span>
                </div>
            {{/each}}
            {{else}}
                No active boards yet.
            {{/if}}
            </div>
        </div>
    </script>
    {% endverbatim %}
</div>
{% endblock %}
