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

{% block content %}
<link rel="stylesheet" href="{% static 'css/research-group.css'  %}" />
<link rel="stylesheet" href="{% static 'css/home.css'  %}" />

<div class="container-fluid">
    <div id="accordionExample">
        {% regroup researchGroup|dictsort:"group_type" by group_type as group_list %}

        {% for researchGroup in group_list %}
        <div class="item">
            <div class="item-header" id="heading{{project.grouper.value}}">
                <h4 class="mb-0">
                    Research  {{ researchGroup.grouper|title }} :
                    <br>
                </h4>
            </div>
            
            <div class="row">
                {% for proj in researchGroup.list %}
                {% if researchGroup.grouper.value == 1 %}
                <div class="col-md-3">
                              
                    <ul class="rg-listing" style="width:100%">
                        <li style="width:auto">
                            <div class="bx-img">
                                <h4>{{proj.name}}</h4>
                            </div>
                            <div class="faculty-bx-text firsr-bx style-bx">
                                <div class="scrolling-details-rg">
                              <p>
                                {% if proj.position %}<span class="rg-span">Position: </span> {{proj.position}}<br> {% endif %}
                                <a href="{{proj.scholar_link}}" target="_blank">Scholar Link</a><br>
                                {% if proj.scholar_topic %}<span class="rg-span">Scholar Topic: </span> {{proj.scholar_topic}}<br>{% endif %}
                                {% if proj.year_start %}<span class="rg-span">Year:</span> {{proj.year_start}}{% endif %}
                                {% if not proj.year_end %} - Present {% endif %}
                                {% if proj.year_end %} - {{proj.year_end}}<br> {% endif %}
                                {% if proj.photo %}
                                <img src="{% get_media_prefix %}/{{ proj.photo }}" style="width: min(50vw, 45%);height: min(50vw, 45%)" alt='' class="center">
                                {% else %}    
                                <img src="{% get_media_prefix %}/no-pic.jpg" style="width: min(50vw, 45%);height: min(50vw, 45%)" alt='' class="center">
                                {% endif %}
                                </p>
                            </div>
                            </div>
                        </li>
                    </ul>
                  
                </div>
                {% endif%}

                {% if researchGroup.grouper.value == 2 %}
                <div class="col-md-3">
                    <ul class="rg-listing" style="width:100%">
                        <li style="width:auto">
                            <div class="bx-img">
                                <h4>{{proj.name}}</h4>
                            </div>
                            <div class="faculty-bx-text firsr-bx style-bx">
                                <div class="scrolling-details-rg">
                              <p>
                                {% if proj.designation %}<span class="rg-span">Designation: </span>{{proj.designation}}<br>{% endif%}
                                {% if proj.dept_name %}<span class="rg-span">Department:</span> {{proj.dept_name}}<br>{% endif%}
                                {% if proj.org_name %}<span class="rg-span">Organisation:</span> {{proj.org_name}}<br>{% endif%}
                                {% if proj.thesis_topic %}<span class="rg-span">Topic: </span>{{proj.thesis_topic}}<br>{% endif%}
                                {% if proj.site_link %}<span class="rg-span">Site: </span>
                                <a class="pub-link" href= "{{proj.site_link}}" target="_blank">
                                    <span style="color:blue">{{proj.site_link}}</span></a><br>{% endif%}
                                {% if proj.photo %}
                                <img src="{% get_media_prefix %}/{{ proj.photo }}" style="width: min(50vw, 45%);height: min(50vw, 45%)" alt='' class="center">
                                {% else %}    
                                <img src="{% get_media_prefix %}/no-pic.jpg" style="width: min(50vw, 45%);height: min(50vw, 45%)" alt='' class="center">
                                {% endif%}    
                            </p>
                        </div>
                            </div>
                        </li>
                    </ul>
                  
                </div>
                {% endif%}

                {% if researchGroup.grouper.value == 3  or researchGroup.grouper.value == 4 or researchGroup.grouper.value == 5 or researchGroup.grouper.value == 6 or researchGroup.grouper.value == 7 or researchGroup.grouper.value == 8 %}
                <div class="col-md-3">
                    <ul class="rg-listing" style="width:100%">
                        <li style="width:auto;min-height: 30%;height:250px !important">
                            <div class="bx-img">
                                <h4>{{proj.name}}</h4>
                            </div>
                            <div class="faculty-bx-text firsr-bx style-bx">
                                <div class="scrolling-details-1">
                                {% if proj.photo %}<p>
                                <img src="{% get_media_prefix %}/{{ proj.photo }}" style="width: min(50vw, 45%);height: min(50vw, 45%)" alt='' class="center">
                                 </p>
                                 {% else %}    
                                <img src="{% get_media_prefix %}/no-pic.jpg" style="width: min(50vw, 45%);height: min(50vw, 45%)" alt='' class="center">
                                 {% endif%} 
                                </div>
                            </div>
                        </li>
                    </ul>
                  
                </div>
                {% endif%}

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

    </div>
</div>

{% endblock %}