{% load bootstrap3 %}

{% if abs_beams %}

  <div class="pull-right">
    <button id="bt_toggle" type="button" class="btn btn-default btn-sm" >
      Expand/Collapse
    </button>
  </div><br><br>


  {% for beam in abs_beams %}
    <div class="panel panel-default" id="panel-{{beam.id}}">
      <div class="panel-heading" role="tab" id="heading{{beam.id}}">
        <h4 class="panel-title">
          <a role="button" onclick="beam_values(beam.id)" data-toggle="collapse" data-parent="#div_lines" href="#collapse{{beam.id}}" aria-expanded="true" aria-controls="collapse{{beam.id}}">
            #{{forloop.counter}}:  {{beam.name}}
          </a>
          {% if edit %}
            <button id="bt_remove_beam-{{ beam.id }}" type="button" class="btn-xs btn-default pull-right" name="bt_remove_beam" value="{{beam.pk}}"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
            <button id="bt_edit_beam-{{ beam.id }}" type="button" class="btn-xs btn-default pull-right" name="bt_edit_beam" value="{{beam.pk}}"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button>
          {% endif %}
        </h4>
      </div>
    <div id="collapse{{beam.id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{beam.id}}">
      <div class="panel-body">
        {% include "abs_beam_values.html" %}
        {# bootstrap_form beam.form layout='horizontal' size='small' #}
      <br>

      <br>
        <!--<button type="button" class="btn btn-sm btn-default" style="margin-left: 10px" name="bt_add_subline" value="{{line.pk}}">Add {{line.line_type.name}}</button>-->
      {# endif #}

      </div>
    </div>
  </div>
{% endfor%}

{% else %}
  <p style="color:#b4bcc2; margin-left: 5%;"><i>No Beams...</i></p>
{% endif %}