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

{% block title %}{{ member.firstname }} {{ member.surname }}{% endblock %}

{% block extraheader %}
    <meta content="{{member.image.url}}" property="og:image">
    <meta content="{{ member.firstname }}" property="og:profile:first_name">
    <meta content="{{ member.surname }}" property="og:profile:last_name">
    <meta content="profile" property="og:type">
{% endblock %}

{% block member_content %}
    <section class="flex-grow max-w-prose my-8 sm:my-0 text-justify text-gray-800 dark:text-gray-300">
        <!-- 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 dark:text-gray-100 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 active_jobs or inactive_jobs %}
                <h3 class="group mt-4 mb-2 text-lg text-gray-900 dark:text-gray-100">Ehrenamtliche Tätigkeiten:
                    {% if inactive_jobs %}
                        <button class="inline float-right text-sm px-2 py-1 text-gray-600 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-400 border rounded border-gray-500 dark:border-gray-500 md:border-gray-400 dark:md:border-gray-600 group-hover:border-gray-500 dark: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>
                    {% endif %}
                </h3>

                <ul class="flex flex-col gap-1">
                    {% for jobm in active_jobs %}
                        <li class="flex flex-row flex-wrap">
                            <span>{{ jobm.job.name }}:</span>
                            <span class="ml-2 text-gray-600 dark:text-gray-400">{{ 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 inactive_jobs %}
                        <li class="flex flex-row flex-wrap">
                            <span>{{ jobm.job.name }}:</span>
                            <span class="ml-2 text-gray-600 dark:text-gray-400">{{ jobm.job_start|date }} - {{ jobm.job_end|date }}</span>
                        </li>
                    {% endfor %}
                </ul>
            {% endif %}
        </div>
    </section>
{% endblock %}
