{% extends 'base.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="{% static 'css/patent.css'  %}" />
<script src="{% static 'js/patent.js' %}"></script>
<script src="{% static 'js/datatables.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/datatables.min.css'  %}" />
<link rel="stylesheet" href="{% static 'css/bootstrap-table.min.css'  %}" />

<script type="text/javascript" language="javascript"
  src="{% static 'js/dataTables.responsive.js '%}"></script>
<link rel="stylesheet" href="{% static 'css/dataTables.responsive.css' %}" />

<div class="container-fluid">
<!--
<h3>Patent List:</h3>
  <div id="accordion" class="">
    <table id="patent-item-table" class="display" cellspacing="0" width="100%">
      <tbody>
        {% for pat in patent %}
        <tr>
          <td>
            <div class="card col-md-12">
              <div class="card-header">
                <a class="card-link" data-toggle="collapse" href="#collapseOne">
                  {{pat.title}}
                </a>
              </div>
              <div class="card-body">
                <div class="readmore">
                  {{pat.abstract}}
                </div>
                <span class="readmore-link"></span>
              </div>
            </div>
            <div class="card col-md-12">

              <ul class="list-group list-group-flush">
                <li class="list-group-item">Authors: {{pat.author}}</li>
                <li class="list-group-item">Year : {{pat.year}} | Application Num : {{pat.application_num}}</li>
                <li class="list-group-item">Grant Number : {{pat.grant_num}} | Grant Date : {{pat.grant_date}}</li>
              </ul>
              </div>
            
          </td>
          <td></td>

        </tr>

        {% endfor %}

      </tbody>
    </table>

  </div>
  -->


  <div id="accordion" class="accordion">
    <div id="accordionExample">
        {% regroup patent|dictsort:"patent_type" by patent_type as patent_list %}

        {% for patent in patent_list %}
         <div class="item">
                <div class="item-header" id="heading{{patent.grouper.value}}">
                    <h2 class="mb-0">
                    <button class="btn btn-link {% if patent.grouper.value != 1%}collapsed{% endif %}" type="button" data-toggle="collapse"
                        data-target="#collapse{{patent.grouper.value}}" aria-expanded="{% if patent.grouper.value != 1%}false {% else  %} true{% endif %}" 
                        aria-controls="collapse{{patent.grouper.value}}" style="color: black;
                        font-size: large;
                        text-decoration: underline;">
                        {% if patent.grouper.value == 1%}
                        Patent List
                        {% endif %}
                        {% if patent.grouper.value == 2%}
                        Technology Transfer                        
                        {% endif %}
                        (Total : {{patent.list|length }})
                    <i class="fa fa-angle-down"></i>
                    </button>
                    </h2>
                </div>
                <div id="collapse{{patent.grouper.value}}" 
                class="collapse show {% if patent.grouper.value == 1%}show{% endif %}" 
                aria-labelledby="heading{{patent.grouper.value}}"
                    data-parent="#accordionExample">
                    <div class="t-p">
                        {% if patent.grouper.value == 1%}
                        <div id="accordion" class="">
                          <table id="patent-item-table" class="display" cellspacing="0" width="100%">
                            <tbody>
                              {% for pat in patent.list %}
                              <tr>
                                <td>
                                  <div class="card col-md-12">
                                    <div class="card-header">
                                      <a class="card-link" data-toggle="collapse" href="#collapseOne">
                                        {{pat.title}}
                                      </a>
                                    </div>
                                    
                                  </div>
                                  <div class="card col-md-12">
                      
                                    <ul class="list-group list-group-flush">
                                      <li class="list-group-item">Authors: {{pat.author}}</li>
                                      <li class="list-group-item">Year : {{pat.year}} | Application Num : {{pat.application_num}}</li>
                                      <li class="list-group-item">Grant Number : {{pat.grant_num}} | Grant Date : {{pat.grant_date}}</li>
                                    </ul>
                                    </div>
                                    <div class="card col-md-12">
                                    <div class="card-body">
                                      <div class="readmore">
                                        {{pat.abstract}}
                                      </div>
                                      <span class="readmore-link"></span>
                                    </div>
                                  </div>
                                </td>
                                <td></td>
                      
                              </tr>
                      
                              {% endfor %}
                      
                            </tbody>
                          </table>
                      
                        
                        {% endif %}

                        {% if patent.grouper.value == 2%}

                        <div id="accordion" class="">
                          <table id="tech-transfer-item-table" class="display" cellspacing="0" width="100%">
                            <tbody>
                              {% for pat in patent.list %}
                              <tr>
                                <td>
                                  <div class="card col-md-12">
                                    <div class="card-header">
                                      <a class="card-link" data-toggle="collapse" href="#collapseOne">
                                        {{pat.title}}
                                      </a>
                                    </div>
                                    <div class="card-body">
                                      <div class="readmore">
                                        {{pat.abstract}}
                                      </div>
                                      <span class="readmore-link"></span>
                                    </div>
                                  </div>
                                  
                                </td>
                                <td></td>
                      
                              </tr>
                      
                              {% endfor %}
                      
                            </tbody>
                          </table>
                      
                        {% endif %}

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