{{define "day.html"}}
<div class="day-detail">
    <header class="day-header">
        <h2>{{.Date.Format "Monday, January 2, 2006"}}</h2>
    </header>
    
    <div id="day-detail-content">
        {{template "day_content.html" .}}
    </div>
</div>
{{end}}

{{define "day_content.html"}}
<div class="day-content">
    {{/* Events Section */}}
    <section class="day-section events-section">
        <h3>📅 Events</h3>
        {{if .Content.Events}}
        <ul class="event-list">
            {{range .Content.Events}}
            <li class="event-item">
                <strong>{{.Title}}</strong>
                {{if not .AllDay}}
                <span class="event-time">{{formatTime .Start}} - {{formatTime .End}}</span>
                {{else}}
                <span class="event-time">All day</span>
                {{end}}
                {{if .Location}}
                <span class="event-location">📍 {{.Location}}</span>
                {{end}}
                {{if .Description}}
                <p class="event-description">{{.Description}}</p>
                {{end}}
            </li>
            {{end}}
        </ul>
        {{else}}
        <p class="empty-message">No events scheduled.</p>
        {{end}}
    </section>
    
    {{/* Diary Section */}}
    <section class="day-section diary-section">
        <h3>📝 Journal</h3>
        {{if .Content.Diary}}
        <div class="diary-display">
            <p class="diary-text">{{.Content.Diary.Text}}</p>
            <button 
                class="btn btn-small"
                data-action="toggle-diary-edit">
                Edit
            </button>
        </div>
        <div class="diary-edit" style="display: none;">
            <form 
                hx-post="/diary/{{formatDate .Date}}"
                hx-target="#day-detail-content"
                hx-swap="innerHTML">
                <textarea name="text" rows="5" placeholder="Write your thoughts...">{{.Content.Diary.Text}}</textarea>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <button 
                        type="button" 
                        class="btn btn-secondary"
                        data-action="cancel-diary-edit">
                        Cancel
                    </button>
                    <button 
                        type="button"
                        class="btn btn-danger"
                        hx-delete="/diary/{{formatDate .Date}}"
                        hx-target="#day-detail-content"
                        hx-swap="innerHTML"
                        hx-confirm="Delete this diary entry?">
                        Delete
                    </button>
                </div>
            </form>
        </div>
        {{else}}
        <form 
            hx-post="/diary/{{formatDate .Date}}"
            hx-target="#day-detail-content"
            hx-swap="innerHTML">
            <textarea name="text" rows="5" placeholder="Write your thoughts..."></textarea>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>
        {{end}}
    </section>
    
    {{/* Photos Section */}}
    <section class="day-section photos-section">
        <h3>📷 Photos</h3>
        {{if .Content.Photos}}
        <div class="photo-gallery">
            {{range .Content.Photos}}
            <figure class="photo-item">
                <a href="{{.URLPath}}" target="_blank">
                    <img src="{{.URLPath}}" alt="{{.Description}}" loading="lazy">
                </a>
                <figcaption>{{.Description}}</figcaption>
            </figure>
            {{end}}
        </div>
        {{else}}
        <p class="empty-message">No photos for this day.</p>
        {{end}}
    </section>
</div>
{{end}}