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

{% block title %}{{ template_settings.organization }} -- Orderboard{% endblock %}
{% block heading %}Orderboard{% endblock %}

{% block head %}
{{ block.super }}
{% load static %}
<link rel="stylesheet" href="{% static 'constellation_orderboard/css/orderboard.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.4/dialog-polyfill.min.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>
<dialog id="newItem" class="mdl-dialog">
    <h4 class="mdl-dialog__title">New Item</h4>
    <div class="mdl-dialog__content mdl-grid">
        <form method="post" action="{% url 'api_v1_card_create' %}" id="newItemForm">
            {% csrf_token %}
            {{ form.stage.as_hidden }}
            {{ form.board.as_hidden }}
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--12-col mdl-cell--5-col-tablet mdl-cell--bottom">
                {{ form.name }}
                <label class="mdl-textfield__label" for="{{ form.name.id_for_label }}">Name</label>
            </div>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--12-col mdl-cell--3-col-tablet mdl-cell--bottom">
                {{ form.quantity }}
                <label class="mdl-textfield__label" for="{{ form.quantity.id_for_label }}">Quantity</label>
            </div>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="width:100%">
                {{ form.notes }}
                <label class="mdl-textfield__label" for="{{ form.notes.id_for_label }}">Description</label>
            </div>
            <div class="mdl-dialog__actions">
                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                    Submit Item <i class="material-icons right">done</i>
                </button>
            </div>
        </form>
    </div>
</dialog>
{{ block.super }}
{% load static %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.4/dialog-polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script>
    var board_id = "{{ id }}"
    var url_api_v1_stage_list = "{% url 'api_v1_stage_list' %}";
    var url_api_v1_board_active_cards = "{% url 'api_v1_board_active_cards' id %}";
    var url_api_v1_card_move_left = "{% url 'api_v1_card_move_left' 0 %}";
    var url_api_v1_card_move_right = "{% url 'api_v1_card_move_right' 0 %}";
    var url_api_v1_card_archive = "{% url 'api_v1_card_archive' 0 %}";
    var stage_form_id="{{ form.stage.id_for_label }}";
    var stage_board_id="{{ form.board.id_for_label }}";
</script>

<script src="{% static 'constellation_orderboard/js/orderboard.js' %}"></script>
{% endblock %}

{% block content %}
{% verbatim %}
<div class="mdl-grid board" id="board" style="width:100%">
    <div class="waiting-spinner mdl-spinner mdl-js-spinner is-active"></div>
    <script id="handlebars-board" type="text/x-handlebars-template">
    {{#each stages}}
        <div class="mdl-cell mdl-cell--12-col mdl-cell--{{../mdl_width}}-col-desktop stage" id="stage_{{name}}">
        <hr class="mdl-cell--hide-desktop">
        <h3 class="stage-name">{{name}}</h3>
        {{#each cards}}
            <div id="card_{{id}}" class="inventory-item mdl-card mdl-shadow--2dp mdl-color--accent mdl-color-text--white">
                <div class="card_name mdl-card__title mdl-color-text--white">
                    <span>{{name}}</span> <span id="card_{{id}}_quantity">({{quantity}})</span>
                </div>
                <div class="mdl-card__supporting-text mdl-color-text--white">
                    <div id="card_{{id}}_notes" class="card_notes">{{notes}}</div>
{% endverbatim %}
{% if can_move %}
{% verbatim %}
                    <button onclick="moveItem({{id}}, 'left')" id="card_{{id}}_left_button" class="card_button card_left_button mdl-cell--hide-tablet mdl-cell--hide-phone">
                        <i class="material-icons">chevron_left</i>
                    </button>
                    <button onclick="moveItem({{id}}, 'left')" id="card_{{id}}_up_button" class="card_button card_up_button mdl-cell--hide-desktop">
                        <i class="material-icons">keyboard_arrow_up</i>
                    </button>
                    <button onclick="moveItem({{id}}, 'right')" id="card_{{id}}_right_button" class="card_right_button card_button mdl-cell--hide-tablet mdl-cell--hide-phone">
                        <i class="material-icons">chevron_right</i>
                    </button>
                    <button onclick="moveItem({{id}}, 'right')" id="card_{{id}}_down_button" class="card_button card_down_button mdl-cell--hide-desktop">
                        <i class="material-icons">keyboard_arrow_down</i>
                    </button>
{% endverbatim %}
{% endif %}
{% if can_delete %}
{% verbatim %}
                    <div onclick="deleteItem({{id}})" id="card_{{id}}_close_button" class="card_button card_close_button">&times;</div>
{% endverbatim %}
                    {% endif %}
{% verbatim %}
                    <div id="card_{{id}}_progress" class="progress"> <div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div></div>
                </div>
            </div>
        {{/each}}
    </div>
    {{/each}}
    <div id="clear" style="clear:both;"></div>
    </script>
</div>
<br/>
<div class="divider"></div>
{% endverbatim %}
<div class="fixed-action-btn">
  <a href="{% url 'view_board_archive' id %}" class="fab">
    <button id="archive" class="mdl-button mdl-js-button mdl-button--fab mdl-button--accent">
      <i class="material-icons">archive</i>
    </button>
  </a>
  {% if can_add %}
  <button id="showNewItem" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
    <i class="material-icons">add</i>
  </button>
  {% endif %}
</div>

<br/>
{% endblock %}
