{% extends "layout.html" %}
{% block content %}
    <h2>Logbook</h2>
    {% if not log %}
        <p>No activities recorded yet.</p>
    {% else %}
        {% for entry in log %}
        <div class="card" style="border-left: 5px solid {{ entry.activity.color }};">
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <h3 style="margin: 0;">{{ entry.activity.name }}</h3>
                    <small style="color: #666;">
                        {{ entry.start_time.strftime('%Y-%m-%d %H:%M') }} - {{ entry.end_time.strftime('%H:%M') }}
                    </small>
                    {% if entry.note %}
                        <p style="margin: 5px 0; font-style: italic;">"{{ entry.note }}"</p>
                    {% endif %}
                </div>
                <div style="font-weight: bold; font-size: 1.2rem;">
                    {{ entry.duration_str }}
                </div>
            </div>
            
            {% if entry.tasks %}
            <div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee;">
                <strong>Tasks Completed:</strong>
                <ul style="margin: 5px 0; padding-left: 20px;">
                    {% for task in entry.tasks %}
                        <li>{{ task.task_name }} <small>({{ task.completed_at.strftime('%H:%M') }})</small></li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    {% endif %}
{% endblock %}