<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>

<div th:fragment="timeline-content" id="timeline-content">
    <div th:if="${timelineData.users == null or timelineData.users.isEmpty()}" class="timeline-entry" th:text="#{timeline.no.data}">
        No timeline data available for this date.
    </div>
    <div id="loading-indicator" class="htmx-indicator" th:text="#{timeline.loading}">
        loading ...
    </div>

    <div class="user-timeline-selection" th:if="${timelineData.users != null && timelineData.users.size() > 1}">
        <div th:title="${userData.displayName}" th:if="${userData}" th:each="userData, iterStat : ${timelineData.users}"
             class="user-header"
             th:classappend="${iterStat.first} ? 'active' : ''"
             th:data-user-id="${userData.userId}"
             onclick="selectUser(this)">
                <img th:src="${userData.userAvatarUrl}"
                     th:alt="${userData.avatarFallback}"
                     class="avatar">
                <div th:text="${userData.displayName}" class="username">Username</div>
        </div>
    </div>
    <div th:if="${userData}" th:each="userData, iterStat : ${timelineData.users}"
         class="user-timeline-section"
         th:classappend="${iterStat.first} ? 'active' : ''"
         th:data-user-id="${userData?.userId}"
         th:data-base-color="${userData?.baseColor}"
         th:data-raw-location-points-url="${userData?.rawLocationPointsUrl}"
         th:data-user-avatar-url="${userData?.userAvatarUrl}"
         th:data-avatar-fallback="${userData?.avatarFallback}"
         th:data-display-name="${userData?.displayName}">
        <div th:if="${userData?.entries == null or userData.entries.isEmpty()}" class="no-entries" th:text="#{timeline.no.data}">
            No timeline data available for this user.
        </div>

        <div th:each="entry : ${userData?.entries}"
             th:class="|timeline-entry ${entry.type.name().toLowerCase()}|"
             th:classappend="${selectedPlaceId != null and entry.place?.id == selectedPlaceId} ? 'active' : ''"
             th:data-id="${entry.id}"
             th:data-lat="${entry.place?.latitudeCentroid}"
             th:data-lng="${entry.place?.longitudeCentroid}"
             th:data-start="${entry.startTime}"
             th:data-end="${entry.endTime}"
             th:data-user-id="${userData.userId}">
            <th:block th:fragment="timeline-entry">
                <!-- Entry Description -->
                <div class="entry-description">
                    <!-- Visit with editable place name -->
                    <div th:if="${entry.type.name() == 'VISIT'}" class="place-name-container">
                        <span class="place-name" th:text="${entry.place?.name ?: 'Unknown Place'}">Place Name</span>
                        <i class="lni lni-pencil-1 edit-icon"
                           th:hx-get="@{/timeline/places/edit-form/{id}(id=${entry.place?.id}, date=${date}, timezone=${timezone})}"
                           hx-target="closest .place-name-container"
                           hx-swap="outerHTML"
                           th:if="${entry.place?.id != null}"></i>
                    </div>

                    <!-- Trip description -->
                    <span th:if="${entry.type.name() == 'TRIP'}" th:text="#{timeline.trip}">Trip</span>
                </div>
                <!-- Type -->
                <div class="entry-time" th:if="${entry.type.name() == 'VISIT'}">
                    <span th:text="#{${entry.place.type.messageKey}}">Home</span>
                </div>
                <!-- Duration and Distance -->
                <span class="entry-duration">
                    <span th:if="${entry.type.name() == 'VISIT'}">
                        <span th:text="#{timeline.duration}">Duration</span>:
                        <span th:text="${entry.formattedDuration}">1h 30m</span>
                    </span>
                    <span th:if="${entry.type.name() == 'TRIP'}">
                        <span th:if="${entry.formattedDistance != null}">
                            <span th:text="#{timeline.distance}">Distance</span>:
                            <span th:text="${entry.formattedDistance}">5.2 km</span>
                        </span>
                        <div th:if="${entry.transportMode != null}" class="trip-transport-mode-container">
                            <span th:text="#{'timeline.transport.' + ${entry.transportMode} + '.label'}">by foot</span>
                            <i class="lni lni-pencil-1 edit-icon"
                               th:hx-get="@{/timeline/trips/edit-form/{id}(id=${entry.resourceId})}"
                               hx-target="closest .trip-transport-mode-container"
                               hx-swap="outerHTML"></i>
                        </div>
                    </span>
                </span>

                <!-- Time -->
                <div class="entry-time">
                    <span th:if="${timeDisplayMode.name() == 'GEO_LOCAL'}"
                          th:text="${entry.formattedLocalTimeRange}"
                          th:title="|#{timeline.time.your}: ${entry.formattedTimeRange}|">09:00 - 10:30</span>
                    <span th:if="${timeDisplayMode.name() == 'DEFAULT'}"
                          th:text="${entry.formattedTimeRange}"
                          th:title="|#{timeline.time.local}: ${entry.formattedLocalTimeRange}|">09:00 - 10:30</span>
                </div>
            </th:block>
        </div>
    </div>
</div>

</body>
</html>
