{#  This template shows one member and all the details (that are ment for public) including a list of current jobs #}
{% load softhyphen_tags %}
{% load static %}

<section class="flex-grow max-w-prose my-8 sm:my-0 text-justify text-gray-800">
    <!-- Alternativtext auf jede Person anpassen: Name im alt="" dynamisch erzeugen -->
    <img loading="lazy" src="{{ member.image.portrait.url }}" alt="Portraitfoto von {{ member.firstname }} {{ member.surname }}" class="md:float-left w-36 mr-2 mb-2">
    <div x-data="{ expandList: false }">
        <h2 class="mb-2 text-lg text-gray-900 text-left">{{ member.firstname }} {{ member.surname }}</h2>
        <div class="mb-2">
            Spitzname: {{ member.nickname }} <br>
            Mailaccount: {{ member.mailaccount }} <br>
        </div>
        <div class="mb-2">
            {{ member.description|softhyphen|safe }}
        </div>
        {% if jobs %}
            <h3 class="group mt-4 mb-2 text-lg text-gray-900">Ehrenamtliche Tätigkeiten:
                <button class="inline float-right text-sm px-2 py-1 text-gray-600 md:text-gray-500 group-hover:text-gray-600 border rounded border-gray-500 md:border-gray-400 group-hover:border-gray-500"
                    @click="expandList = ! expandList"
                >
                    <span x-show="!expandList">Mehr</span><span x-show="expandList">Weniger</span><span class="hidden md:inline"> anzeigen</span>
                    <i class="fa-fw fa-solid fa-angle-left transition transform -ml-1"
                        :class="expandList ? '-rotate-90' : ''"
                    ></i>
                </button>
            </h3>

            <ul class="flex flex-col gap-1">
                {% for jobm in jobs %}
                    <li class="flex flex-row flex-wrap">
                        <span>{{ jobm.job.name }}:</span>
                        <span class="ml-2 text-gray-600">{{ jobm.job_start|date }} -</span>
                    </li>
                {% endfor %}
            </ul>
            <ul class="flex flex-col gap-1 mt-1"
                x-show="expandList"
                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"
            >
                {% for jobm in jobs %}
                    <li class="flex flex-row flex-wrap">
                        <span>{{ jobm.job.name }}:</span>
                        <span class="ml-2 text-gray-600">{{ jobm.job_start|date }} -</span>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
</section>

<script src="{% static 'gumshoe.js' %}"></script>
<script src="{% static 'smooth-scroll.js' %}"></script>
<script>
    var spy = new Gumshoe('#scrollspy-subNav a', {
        /***** Scrollspy *****/ // Active classes
        navClass: 'font-semibold', // applied to the nav list item
    });

    /***** SmoothScroll *****/ // All animations will take exactly 500ms
    var scroll = new SmoothScroll('a[href*="#"]', {
        speed: 750,
        speedAsDuration: true,
        easing: 'easeInOutQuad'
    });
</script>
