{% extends 'base.html' %}

{% load flatpages %}
{% load softhyphen_tags %}
{% load static %}

{% block content %}
	<!-- Main Content -->
	<main class="container mx-auto w-full px-4 mt-8 flex-1">
		<h1 class="page-title">Über uns</h1>
        <div class="sm:flex sm:flex-row justify-center my-8">
            <aside class="flex-none max-w-min sm:mr-8">
                <div class="fixed sm:sticky top-0 sm:top-4 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center"
                    x-show="showModal || $screen('sm')"
                    x-transition:enter="transition duration-300 ease-out"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="transition duration-150 ease-in"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                >
                    <div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 sm:p-0 bg-white dark:bg-gray-700 sm:bg-transparent rounded sm:rounded-none"
						@click.outside="showModal = ! showModal"
                        x-show="showModal || $screen('sm')"
                        x-transition:enter="transition transform ease-out duration-300"
                        x-transition:enter-start="scale-110 opacity-0"
                        x-transition:enter-end="scale-100 opacity-100"
                        x-transition:leave="transition transform ease-in duration-150"
                        x-transition:leave-start="scale-100 opacity-100"
                        x-transition:leave-end="scale-110 opacity-0"
                    >
                        <div class="flex justify-between items-center mb-2 sm:hidden">
                            <h2 class="text-gray-800 dark:text-gray-100 sm:section-title sm_section-title-margins sm:w-full">
                                <span class="mr-1 text-gray-400 sm:hidden">
                                    <i class="fa-solid fa-bars"></i>
                                </span>
                                Kategorien
                            </h2>
                            <div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 dark:text-gray-400 sm:hidden cursor-pointer" @click="showModal = false">
								<i class="far fa-times"></i>
                            </div>
                        </div>
                        <ul class="sideBarNav">
                            {% for job in pinned_job_groups %}
                                {% include 'members/partials/_jobs_side_bar.html' %}
                            {% endfor %}

                            {% for job in unpinned_job_groups %}
                                {% include 'members/partials/_jobs_side_bar.html' %}
                            {% endfor %}

                            <hr class="">

                            <li class="{% if 'active' in request.path %}active{% endif %}">
                                <a href="{% url 'members:members' 'active' %}">Fachschaft</a>
                            </li>
                            
                            <li class="{% if 'pension' in request.path %}active{% endif %}">
                                <a href="{% url 'members:members' 'pension' %}">Pension</a>
                            </li>
                            
                            <li class="{% if '/members/' == request.path %}active{% endif %}">
                                <a href="{% url 'members:index' %}">Alle Mitglieder</a>
                            </li>

                            {% if request.user.is_authenticated %}
                                {% if active_job_group %}
                                    <li class="internalLI">
                                        <a href="{% url 'admin:members_jobgroup_change' active_job_group.id %}">
                                            <i class="fa-regular fa-pen-to-square mr-1"></i>{{ active_job_group.name|softhyphen|safe }} bearbeiten
                                        </a>
                                    </li>
                                {% endif %}

                                {% get_flatpages '/fachschaft/' as pages %}
                                {% if pages %}
                                    <li class="internalLI">
                                        <a href="{% url 'admin:core_customflatpage_change' pages.first.id %}">
                                            <i class="fa-regular fa-pen-to-square mr-1"></i>Fachschaft-Text bearbeiten
                                        </a>
                                    </li>
                                {% endif %}

                                {% if member %}
                                    <li class="internalLI">
                                        <a href="{% url 'admin:members_member_change' member.id %}">
                                            <i class="fa-regular fa-pen-to-square mr-1"></i>Profil bearbeiten
                                        </a>
                                    </li>
                                {% endif %}
                            {% endif %}
                        </ul>
                    </div>
                </div>
                <button class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden" 
					@click="showModal = true"
                    x-show="!showModal"
                    x-transition:enter="transition duration-100 ease-in"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="transition duration-100 ease-out"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                >
                <i class="fa-solid fa-bars px-2 py-1"></i>
                </button>
            </aside>

			<section class="flex-grow max-w-prose my-8 sm:my-0">
                {% if member %}
                    <!-- show details of a member -->
                    {% block member_content %}
                    {% endblock %}
                {% endif %}

                {% if members %}
                    <!-- show all, active or pension members -->
                    {% block members_content %}
                    {% endblock %}
                {% endif %}

                {% if job_members %}
                    <!-- show job lists in a job group -->
                    {% block jobs_content %}
                    {% endblock %}
                {% endif %}
			</section>
		</div>
	</main>
{% endblock %}
