{% extends 'members/index.html' %}

{% block title %}FET: {{ active_job_group.name }}{% endblock %}

{% block jobs_content %}
    <div class="db-page-content">
        <h2>{{ active_job_group.name }}</h2>
        {% if description %}
                {{ description|safe }}
        {% endif %}
    </div>

    <div>
        {% regroup job_members by job.name as all_jobmem_list %}

        {% for jobmem in all_jobmem_list %}
            <article id="{{ jobmem.list.0.job.slug }}" class="members-article">
                <a href="#{{ jobmem.list.0.job.slug }}" class="title">
                    <i class="far fa-link"></i>
                    <h3 class="members-section-title">{{ jobmem.grouper }}</h3>
                </a>
                <div class="members-listing">
                    {% for jm in jobmem.list %}
                        <figure>
                            <a href="{{ jm.member.get_absolute_url }}">
                                <img loading="lazy" src="{{ jm.member.image.thumb.url }}" alt="Portraitfoto von {{ jm.member.firstname }}" class="w-36 h-36 bg-white">
                                <figcaption>
                                    <h4 class="member-name">{{ jm.member.firstname }} {{ jm.member.surname }}</h4>
                                    <p class="member-role">{{ jm.get_job_role_display }}</p>
                                    <p class="member-date">Seit {{ jm.job_start|date:"d. M. Y" }}</p>
                                </figcaption>
                            </a>
                        </figure>
                    {% endfor %}
                </div>
            </article>
        {% endfor %}
    </div>
{% endblock %}