{% extends "layout.html" %}
{% block content %}
    <h2>Logbook</h2>
    {% if not log %}
        <p>No activities recorded yet.</p>
    {% else %}
        {% for entry in log %}
        <!-- Wrapped whole card in a link to the detail view -->
        <a href="{{ url_for('log_entry_detail', entry_id=entry._id) }}" style="text-decoration: none; color: inherit; display: block;">
            <div class="card" style="border-left: 5px solid {{ entry.activity.color }}; transition: transform 0.1s;">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <h3 style="margin: 0;">
                            {{ entry.activity.name }}
                            {% if entry.subcategory %}
                                <span style="font-size: 0.8rem; background: #eee; padding: 2px 8px; border-radius: 10px; color: #555; vertical-align: middle;">
                                    {{ entry.subcategory }}
                                </span>
                            {% endif %}
                        </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; color: #555;">"{{ 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.name }} <small>({{ task.completed_at.strftime('%H:%M') if task.completed_at else 'Done' }})</small></li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
            </div>
        </a>
        {% endfor %}
    {% endif %}
    
    <style>
        /* Small hover effect to indicate clickability */
        a .card:hover {
            transform: scale(1.01);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
    </style>
{% endblock %}