{% extends "layout.html" %}
{% block content %}
<div class="card">
    <div style="display: flex; justify-content: space-between; align-items: start;">
        <div>
            <h2>{{ task.name }}</h2>
            <p>
                <strong>Status:</strong> {{ task.status|upper }}<br>
                {% if task.is_template %}
                <span style="background: #f39c12; color: white; padding: 3px 8px; border-radius: 5px;">Template (Auto-Add)</span>
                {% endif %}
            </p>

            {% if task.activity_id %}
            <form action="{{ url_for('toggle_timer', activity_id=task.activity_id) }}" method="POST" style="margin-top: 10px;">
                <input type="hidden" name="note" value="{{ task.name }}">
                <button type="submit" class="btn" style="background: #27ae60;">
                    Start Timer
                </button>
            </form>
            {% else %}
            <small style="color: #999;">No activity linked. Edit task to assign one.</small>
            {% endif %}
        </div>
        <a href="{{ url_for('tasks') }}" class="btn" style="background: #95a5a6;">Back to Tasks</a>
    </div>
</div>

<div class="card">
    <h3>Comments</h3>
    
    <div style="background: #f9f9f9; padding: 1rem; border-radius: 5px; margin-bottom: 2rem;">
        {% if task.comments %}
            {% for comment in task.comments %}
            <div style="border-bottom: 1px solid #ddd; padding: 10px 0;">
                <p style="margin: 0;">{{ comment.text }}</p>
                <small style="color: #999;">{{ comment.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
            </div>
            {% endfor %}
        {% else %}
            <p style="color: #ccc;">No comments yet.</p>
        {% endif %}
    </div>

    <form method="POST">
        <textarea name="comment" rows="3" style="width: 100%; border: 1px solid #ddd; border-radius: 5px; padding: 0.5rem;" placeholder="Write a comment..." required></textarea>
        <button type="submit" class="btn" style="margin-top: 10px;">Add Comment</button>
    </form>
</div>
{% endblock %}