{% 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 }}
                {% 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 %}
            </h2>
            <p style="color: #666;">
                {{ entry.start_time.strftime('%A, %d. %B %Y') }}
            </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>Edit Entry</h3>
    <form method="POST">
        <input type="hidden" name="action" value="update">
        
        <div style="display: flex; gap: 1rem; margin-bottom: 1rem;">
            <div style="flex: 1;">
                <label>Start Time</label>
                <input type="datetime-local" name="start_time" value="{{ entry.start_time.strftime('%Y-%m-%dT%H:%M') }}" required>
            </div>
            <div style="flex: 1;">
                <label>End Time</label>
                <!-- If currently running (end_time is None), prevent editing end time or handle appropriately. Usually logbook is for past entries. -->
                <input type="datetime-local" name="end_time" value="{{ entry.end_time.strftime('%Y-%m-%dT%H:%M') if entry.end_time else '' }}">
            </div>
        </div>

        <!-- Subcategory Edit -->
        <label>Subcategory</label>
        <select name="subcategory">
            <option value="">-- None --</option>
            {% if entry.activity and entry.activity.subcategories %}
                {% for sub in entry.activity.subcategories %}
                    <option value="{{ sub }}" {% if sub == entry.subcategory %}selected{% endif %}>{{ sub }}</option>
                {% endfor %}
            {% endif %}
        </select>

        <label>Note</label>
        <textarea name="note" rows="3" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-family: inherit;">{{ entry.note }}</textarea>
        
        <div style="margin-top: 10px; display: flex; justify-content: space-between;">
            <button type="submit" class="btn">Save Changes</button>
        </div>
    </form>
    
    <div style="border-top: 1px solid #eee; margin-top: 2rem; padding-top: 1rem;">
        <form method="POST" onsubmit="return confirm('Are you sure you want to delete this entry? This action cannot be undone.');">
            <input type="hidden" name="action" value="delete">
            <button type="submit" class="btn btn-danger">Delete Entry</button>
        </form>
    </div>
</div>

<div class="card">
    <h3>Tasks in this Session</h3>
    {% if not tasks %}
        <p style="color: var(--text-secondary);">No tasks were tracked for this session.</p>
    {% else %}
        <div class="checklist-container">
        {% for task in tasks %}
            <div class="checklist-item {% if task.status == 'completed' %}completed{% endif %}" style="padding: 12px 0;">
                <!-- Visual Checkbox (Read Only) -->
                <div style="
                    width: 18px; height: 18px; 
                    border: 2px solid {% if task.status == 'completed' %}var(--primary-color){% else %}var(--text-secondary){% endif %}; 
                    border-radius: 4px; 
                    background: {% if task.status == 'completed' %}var(--primary-color){% else %}transparent{% endif %};
                    margin-right: 12px; margin-top: 3px;
                    display: flex; align-items: center; justify-content: center;
                ">
                    {% if task.status == 'completed' %}
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    {% endif %}
                </div>

                <div style="flex-grow: 1;">
                    <a href="{{ url_for('task_detail', task_id=task._id) }}" style="text-decoration: none; color: inherit; font-weight: 500; display: block;">
                        {{ task.name }}
                    </a>
                    {% if task.completed_at %}
                        <small style="color: var(--text-secondary); font-size: 0.8rem;">Completed at {{ task.completed_at.strftime('%H:%M') }}</small>
                    {% endif %}
                </div>
                
                <a href="{{ url_for('task_detail', task_id=task._id) }}" style="color: var(--text-secondary); text-decoration: none; font-size: 1.2rem; line-height: 1;">
                    ›
                </a>
            </div>
        {% endfor %}
        </div>
    {% endif %}
</div>
{% endblock %}