{% extends "layout.html" %}
{% block content %}
<div class="card" style="border-left: 5px solid {{ entry.activity.color }};">
    <div style="display: flex; justify-content: space-between; align-items: start;">
        <div>
            <h2>{{ entry.activity.name }}</h2>
            <p style="color: #666;">
                {{ entry.start_time.strftime('%A, %d. %B %Y') }}<br>
                {{ entry.start_time.strftime('%H:%M') }} 
                {% if entry.end_time %} - {{ entry.end_time.strftime('%H:%M') }} {% endif %}
            </p>
        </div>
        <div style="text-align: right;">
            <div style="font-weight: bold; font-size: 2rem; color: #333;">{{ entry.duration_str }}</div>
            <a href="{{ url_for('logbook') }}" class="btn" style="background: #95a5a6; font-size: 0.8rem; margin-top: 15px; display:inline-block;">Back to Log</a>
        </div>
    </div>
</div>

<div class="card">
    <h3>Session Notes</h3>
    <form method="POST">
        <textarea name="note" rows="4" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-family: inherit;">{{ entry.note }}</textarea>
        <div style="margin-top: 10px; text-align: right;">
            <button type="submit" class="btn">Update Note</button>
        </div>
    </form>
</div>

<div class="card">
    <h3>Tasks in this Session</h3>
    {% if not tasks %}
        <p style="color: #999;">No tasks were tracked for this session.</p>
    {% else %}
        <ul style="list-style: none; padding: 0;">
        {% for task in tasks %}
            <li style="border-bottom: 1px solid #eee; padding: 15px 0; display: flex; align-items: center;">
                <span style="margin-right: 15px; font-size: 1.2rem;">
                    {% if task.status == 'completed' %}✅{% else %}⬜{% endif %}
                </span>
                <div style="flex-grow: 1;">
                    <a href="{{ url_for('task_detail', task_id=task._id) }}" style="font-weight: bold; display: block; font-size: 1.1rem;">{{ task.name }}</a>
                    {% if task.completed_at %}
                        <small style="color: #27ae60;">Completed at {{ task.completed_at.strftime('%H:%M') }}</small>
                    {% else %}
                        <small style="color: #e67e22;">Not completed</small>
                    {% endif %}
                </div>
                <a href="{{ url_for('task_detail', task_id=task._id) }}" class="btn" style="font-size: 0.8rem; padding: 5px 10px;">View Task ></a>
            </li>
        {% endfor %}
        </ul>
    {% endif %}
</div>
{% endblock %}