<div class="dropdown" data-hx-container="team_selector">
    <label tabindex="0"
           class="flex flex-row justify-between items-center w-48 border h-8 rounded cursor-pointer pe-4">
        <div class="flex flex-row w-full" title="{{ request.actor.name }}">
            {% if request.actor.is_org or not request.user.user_profile.profile_picture %}
                <img class="p-1 ms-2 h-6 w-6 object-contain"
                     src="https://raw.githubusercontent.com/TreyWW/MyFinances/main/frontend/static/img/logo_single.png"
                     alt="Logo" />
                <div class="font-bold ms-2 truncate">{{ request.actor.name | default:"Personal" }}</div>
            {% else %}
                <img class="p-1 ms-2 h-6 w-6 object-contain"
                     src="{{ request.user.user_profile.profile_picture.url }}"
                     alt="Logo" />
                <div class="font-bold ms-2 truncate">{{ request.actor.name | default:"Personal" }}</div>
            {% endif %}
        </div>
        <div class="fa-layers fa-fw fa-xs">
            <span class="fas fa-chevron-up" data-fa-transform="up-6"></span>
            <span class="fas fa-chevron-down" data-fa-transform="down-6"></span>
        </div>
    </label>
    <ul tabindex="0"
        class="dropdown-content menu p-2 border shadow bg-base-100 !w-full !rounded mt-2"
        data-hx-container="dropdown_items">
        <div class="font-bold p-2">Personal Account</div>
        <button class="font-semibold flex flex-row hover:bg-base-100 rounded items-center py-1 pe-4 justify-between {% if not request.actor.is_org %}bg-base-100{% endif %}"
                hx-post="{% url 'core:api:teams:switch_team' team_id=0 %}"
                hx-swap="none">
            <div class="items-center flex flex-row">
                {% component "profile_picture" image_type="small" extra_classes="p-1 h-6 w-6 object-contain" url=request.user.user_profile.profile_picture_url %}
                <a>{{ request.user.first_name|default:"You" }}</a>
            </div>
            {% if not request.actor.is_org %}<i class="fa fa-check"></i>{% endif %}
        </button>
        <div class="font-bold mt-2 p-2">Teams</div>
        {% for team in request.user.teams_apart_of %}
            <button class="flex flex-row hover:bg-base-100 rounded items-center py-1 pe-4 justify-between w-full {% if request.actor.is_org and team.id == request.actor.id %}bg-base-100{% endif %}"
                    hx-post="{% url 'core:api:teams:switch_team' team_id=team.id %}"
                    hx-swap="none">
                <div class="items-center flex flex-row w-full" title="{{ team.name }}">
                    <img class="p-1 h-6 w-6 object-contain"
                         src="https://raw.githubusercontent.com/TreyWW/MyFinances/main/frontend/static/img/logo_single.png"
                         alt="Logo" />
                    <p class="ps-4 w-full truncate">{{ team.name }}</p>
                </div>
                {% if request.actor.is_org and team.id == request.actor.id %}<i class="fa fa-check"></i>{% endif %}
            </button>
        {% empty %}
            You aren't in any teams
        {% endfor %}
    </ul>
</div>
