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

{% 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/edit-board.js' %}"></script>
{% endblock %}

{% block content %}
<div id="formCard" class="form-card mdl-card mdl-cell--8-col mdl-cell--2-offset-desktop mdl-shadow--2dp mdl-grid">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Edit Board</h2>
  </div>
  <div class="mdl-card__supporting-text">
    <form method="post" action="{% url 'api_v1_board_update' board_id %}" id="editBoardForm" class="mdl-cell--2-offset-desktop mdl-cell--8-col">
      {% csrf_token %}
      {{ form.active.as_hidden }}
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--12-col 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--bottom">
        {{ form.desc }}
        <label class="mdl-textfield__label" for="{{ form.desc.id_for_label }}">Description</label>
      </div>

      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        {{ form.readGroup }}
        <label for="{{ form.readGroup.id_for_label }}" class="mdl-textfield__label">Read Group</label>
      </div>

      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        {{ form.addGroup }}
        <label for="{{ form.addGroup.id_for_label }}" class="mdl-textfield__label">Add Group</label>
      </div>

      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
        {{ form.moveGroup }}
        <label for="{{ form.moveGroup.id_for_label }}" class="mdl-textfield__label">Move Group</label>
      </div>

      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
        {{ form.deleteGroup }}
        <label for="{{ form.deleteGroup.id_for_label }}" class="mdl-textfield__label">Delete Group</label>
      </div>


      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
        {{ form.manageGroup }}
        <label for="{{ form.mangeGroup.id_for_label }}" class="mdl-textfield__label">Manage Group</label>
      </div>

      <div class="mdl-card__actions">
        <div class="mdl-layout-spacer"></div>
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--primary">
          Edit <i class="material-icons right">done</i>
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}