{% extends 'base.html' %}
{% load static %}

{% block content %}
<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'  %}" />
<link rel="stylesheet" href="{% static 'css/project.css'  %}" />

<script type="text/javascript" language="javascript"
  src="{% static 'js/dataTables.responsive.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/dataTables.responsive.css' %}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">

<script src="{% static 'js/project.js' %}"></script>
<div class="container-fluid">
<h3>Project List:</h3>


    <div class="accordion" id="accordionExample">
        {% regroup project|dictsort:"project_type" by project_type as project_list %}
        {% for project in project_list %}
        
            
         <div class="item">
         <div class="item-header" id="heading{{project.grouper.value}}">
            <h2 class="mb-0">
               <button class="btn btn-link {% if project.grouper.value != 1%}collapsed{% endif %}" type="button" data-toggle="collapse"
                  data-target="#collapse{{project.grouper.value}}" aria-expanded="{% if project.grouper.value != 1%}false {% else  %} true{% endif %}" 
                  aria-controls="collapse{{project.grouper.value}}">
                   {{ project.grouper | title }}
                   {% if project.grouper.value != 3%}
                   (Total : {{project.list|length }})
                   {% endif %}

               <i class="fa fa-angle-down"></i>
               </button>
            </h2>
         </div>
         {% if project.grouper.value == 3%}
         <p style="margin-top: 1%;
         margin-left: 1%;">Handled more than 150 consultancy Projects as PI of amount more than INR 35 million.
         </p>

         {% endif %}
         {% if project.grouper.value == 1%}
                {% regroup project.list|dictsort:"research_type" by research_type as list %}
            {% endif %}

            {% if project.grouper.value == 2%}
                {% regroup project.list by institute_type as list %}

            {% endif %}

            {% if project.grouper.value == 3%}
                {% regroup project.list|dictsort:"consultancy_type" by consultancy_type as list %}
            {% endif %} 
            {% for pr in list %}
         <div id="collapse{{project.grouper.value}}" 
         class="collapse show {% if project.grouper.value == 1%}show{% endif %}" 
         aria-labelledby="heading{{project.grouper.value}}"
            data-parent="#accordionExample">
           
                        
            <div class="t-p">
                {% if project.grouper.value == 1 or project.grouper.value == 3%}
                    <span class="role" >As a {{pr.grouper}}</span>
                {% endif %}
                <table id="projectTable" class="display prTable" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Year</th>
                            <th>Funded By</th>
                            <th>Collaborator</th>
                        </tr>
                    </thead>
        
        
                    <tbody>
                        {% for proj in pr.list %} 
                        <tr>
        
                            <td>{{proj.title}}</td>
                            <td>{% if proj.year_start != 0  %}{{proj.year_start}} {% endif %}
                                {% if proj.year_end != 0 and proj.year_start != 0 %} - {% endif %}
                                 {% if proj.year_end != 0  %}  {{proj.year_end}} {% endif %}</td>
                            
                            <td>{{proj.funded_by}}</td>
                            <td>{{proj.collaborator}}</td>
                        </tr>
                        {% endfor %}
        
                    </tbody>
                </table>
            </div>
         </div>
         {% endfor %}
      </div>
      
      {% endfor %}
    
    </div>
    </div>


{% endblock %}