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

<!-- Edit form fragment -->
<span th:fragment="edit-form" class="place-name-container editing">
    <form th:hx-put="@{/timeline/places/{id}(id=${place.id})}"
          hx-target="closest .place-name-container"
          hx-swap="outerHTML"
          class="inline-edit-form">
        <div class="form-group">
            <label for="place-name" th:text="#{places.name.label}">Name</label>
            <input type="text"
                   id="place-name"
                   name="name"
                   th:value="${place.name}"
                   class="place-name-input"
                   autofocus
                   required>
        </div>
        <div class="form-group">
            <label for="category" th:text="#{places.category.label}">Category</label>
            <select id="category" name="type" class="form-select">
                <option th:each="placeType : ${placeTypes}"
                        th:value="${placeType.name()}"
                        th:selected="${placeType == place.type}"
                        th:text="#{${placeType.messageKey}}">Place Type</option>
            </select>
        </div>
        <div class="form-buttons">
            <button type="submit" class="btn" th:text="#{form.update}">Save</button>
            <button type="button" 
                    class="btn"
                    th:hx-get="@{/timeline/places/view/{id}(id=${place.id})}"
                    hx-target="closest .place-name-container"
                    hx-swap="outerHTML"
                    th:text="#{form.cancel}">Cancel</button>
        </div>
    </form>
</span>

<!-- View mode fragment -->
<span th:fragment="view-mode" class="place-name-container">
    <span class="place-name" th:text="${place.name}">Place Name</span>
    <i class="lni lni-pencil-1 edit-icon" 
       th:hx-get="@{/timeline/places/edit-form/{id}(id=${place.id})}"
       hx-target="closest .place-name-container"
       hx-swap="outerHTML"></i>
</span>

</body>
</html>
