{{ header }}

  <div class="inner-wrap pt-4 profile">
      <div class="container">
          <div class="row">
              <div class="col-md-12 mb-4 pt-3">
                  <h2 class="mb-4">Bionotes</h2><br>

                  <div class="table-responsive theme-table">

                  	{% if books %}
		            	<table class="table">
						  <thead>
						    <tr>
						      <td>S.N</td>
						      <td>Title</td>
						      <!-- <td>Download</td> -->
						    </tr>
						  </thead>
						  <tbody>
						  	{% for key, news in books %}
						    <tr>
						      <td>{{key+1}}</td>
						      <td>
						      	

						      	{% if news.lists %}


						      	<div class="panel-group mt-20" id="accordion">


	  <div class="panel panel-default">
	    <div class="panel-heading accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse{{key}}">
	      <h6 class="panel-title"><a  href="{{news.href}}"><i class="glyphicon glyphicon-plus"></i>{{news.title}} </a><i class="fa fa-angle-right"></i></h6>
	    </div>
	    <div id="collapse{{key}}" class="panel-collapse collapse">
	      <div class="panel-body">

	        <ul>
	          {% for bionote in news.lists %}
	          <a href="{{bionote.href}}" target="_blank"><li>{{bionote.title}}</li></a>
	          {% endfor %}
	        </ul>
	      </div>
	    </div>
	  </div>



	</div>




						      	{% else %}
						      	<a href="{{news.href}}" target="_blank">{{news.title}}</a>
						      	{% endif %}
						      </td>
						      <!-- <td><a href="{{news.href}}" target="_blank">View Bionote</a>
						      		{% if news.lists %}
						      	<div>
						      		<ul>
						      			{% for bionote in news.lists %}
						      			<li><a href="{{bionote.href}}" target="_blank">View Bionote</a></li>
						      			{% endfor %}
						      		</ul>
						      	</div>
						      		
						      	{% endif %}
						      </td> -->
						    </tr>
						    {% endfor %}
						  </tbody>
						</table>
		            {% endif %}

                  </div>
                </div>
                <div class="clearfix"></div>
          </div>
      </div>
  </div>

{{ footer }}