{% extends "dev_conf_edit.html" %}
{% load bootstrap3 %}
{% load static %}

{% block extra-head %}
<style type="text/css">
    /* show the move cursor as the user moves the mouse over the panel header.*/
    .panel-default { cursor: move; }
</style>
<script src="{% static 'js/jquery-ui.min.js' %}"></script>

{% endblock %}

{% block content %}
<form class="form" method="post">
  {% csrf_token %}
  {% bootstrap_form form layout='horizontal' size='medium' %}
  <div style="clear: both;"></div>
    <h2>ABS Beams</h2><hr>
  <div class="panel-group" id="div_beams" role="tablist" aria-multiselectable="true">
  {% include "abs_beams_list.html" %}
  </div>
  <div style="clear: both;"></div>
  <br>
  <div class="pull-right">
    <button type="button" class="btn btn-primary" onclick="{% if previous %}window.location.replace('{{ previous }}');{% else %}history.go(-1);{% endif %}">Cancel</button>
    <button type="button" class="btn btn-primary" id="bt_add_beam">Add Beam</button>
    <button type="submit" class="btn btn-primary">{{button}}</button>
  </div>
</form>
{% endblock %}


{% block extra-js%}
  <script type="text/javascript">

    $("#bt_toggle").click(function() {
      $(".panel-collapse").collapse('toggle')
    });

    $("#bt_add_beam").click(function() {
      document.location = "{% url 'url_add_abs_beam' id_conf %}";
    });

  </script>
{% endblock %}