{% extends "layout.html" %}
{% load softhyphen_tags %}

{% block content %}
<div class="grid-container">

    <div class="grid-x grid-padding-x padding-top-1">

        {% for job in pinned_job_groups %}
            <div class="cell large-2 medium-4 small-6">
                <a class="button job-btn {% if job.slug in request.path %} active {% endif %}" href="{% url 'jobs' job.slug %}">
                    {{ job.name|softhyphen|safe }}
                </a>
            </div>
        {% endfor %}

        {% for job in unpinned_job_groups %}
            <div class="cell large-2 medium-4 small-6">
                <a class="button job-btn {% if job.slug in request.path %} active {% endif %} job-btn" href="{% url 'jobs' job.slug %}">
                    {{ job.name|softhyphen|safe }}
                </a>
            </div>
        {% endfor %}

        <div class="cell large-2 medium-4 small-6">
            <a class="button memb-btn {% if 'pension' in request.path %} active {% endif %}" href="{% url 'members_view' 'pension' %}">
                Pension
            </a>
        </div>

        <div class="cell large-2 medium-4 small-6">
            <a class="button memb-btn {% if '/members/' == request.path %} active {% endif %}" href="{% url 'members' %}">
                Alle Mitglieder
            </a>
        </div>

    </div>

    {% if description %}
        <div class="grid-x">
            <div class="cell padding-top-1 padding-left-1 padding-right-1" style="background-color: white; text-align: justify;">
            {{ description|safe }}
            </div>
        </div>
    {% endif %}

    <!-- show details of a member -->
    {% if member %}
        {% block members_content %}
        {% endblock %}
    {% endif %}

    <!-- show all, active or pension members -->
    {% if members %}
        <div class="grid-x">
            <div class="cell padding-top-1 padding-left-1 padding-right-1" style="background-color: white; text-align: justify;">
            {% if fs_info %}
                {{ fs_info.content|safe }}

                {% if request.user.is_authenticated %}
                    <hr>
                    <a href="{% url 'admin:core_customflatpage_change' fs_info.id %}">Fachschaft-Text bearbeiten</a>
                    <hr>
                {% endif %}
            {% endif %}
            </div>
        </div>

        <div class="padding-top-1 padding-left-1 padding-right-1" style="background-color: white;">
        {% include 'members/members_list.html' %}
        </div>
    {% endif %}

    <!-- show job lists in a job group -->
    {% include 'members/jobs_list.html' %}

</div>

{% endblock %}

<script>
// Get the container element
var btnContainer = document.getElementById("grid-container");

// Get all buttons with class="btn" inside the container
var grid = btnContainer.getElementsByClassName("grid-x");
var cell = grid.getElementsByClassName("cell");
var btns = cell.getElementsByClassName("button");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");

    // If there's no active class
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" active", "");
    }

    // Add the active class to the current/clicked button
    this.className += " active";
  });
}
</script>
