{% comment %}
Componente de Controle de Tempo para Tarefas
Uso: {% include 'includes/task_time_control.html' with task=task show_controls=True %}
{% endcomment %}

<div class="task-time-control">
    <!-- Informações de Tempo -->
    <div class="row mb-2">
        <div class="col-md-4">
            <div class="text-center">
                <small class="text-muted">Total</small>
                <div class="fw-bold">{{ task.tempo_total_formatado }}</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="text-center">
                <small class="text-muted">Hoje</small>
                <div class="fw-bold">{{ task.tempo_hoje_formatado }}</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="text-center">
                <small class="text-muted">Sessão</small>
                <div class="fw-bold">
                    {% if task.esta_trabalhando %}
                        <span class="text-success" id="cronometro-{{ task.pk }}">00:00:00</span>
                    {% else %}
                        00:00:00
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Status do Trabalho -->
    <div class="text-center mb-2">
        <small class="text-muted">Status</small>
        <div>
            {% if task.esta_trabalhando %}
                <span class="text-success" id="status-trabalho-{{ task.pk }}">
                    <i class="bi bi-play-circle"></i> Trabalhando
                </span>
            {% elif task.status == 'pausada' %}
                <span class="text-warning" id="status-trabalho-{{ task.pk }}">
                    <i class="bi bi-pause-circle"></i> Pausada
                </span>
            {% else %}
                <span class="text-secondary" id="status-trabalho-{{ task.pk }}">
                    <i class="bi bi-stop-circle"></i> Parada
                </span>
            {% endif %}
        </div>
    </div>

    <!-- Controles de Tempo -->
    {% if show_controls and task.status != 'concluida' and task.status != 'cancelada' %}
        <div class="d-flex justify-content-center gap-1">
            {% if task.status == 'nao_iniciada' %}
                <button class="btn btn-success btn-sm" 
                        onclick="iniciarTarefa({{ task.pk }})" 
                        title="Iniciar Trabalho">
                    <i class="bi bi-play-circle"></i>
                </button>
            {% elif task.status == 'em_andamento' and task.esta_trabalhando %}
                <button class="btn btn-warning btn-sm" 
                        onclick="pausarTarefa({{ task.pk }})" 
                        title="Pausar">
                    <i class="bi bi-pause-circle"></i>
                </button>
                <button class="btn btn-danger btn-sm" 
                        onclick="pararTarefa({{ task.pk }})" 
                        title="Parar">
                    <i class="bi bi-stop-circle"></i>
                </button>
            {% elif task.status == 'pausada' %}
                <button class="btn btn-info btn-sm" 
                        onclick="retomarTarefa({{ task.pk }})" 
                        title="Retomar">
                    <i class="bi bi-play-circle"></i>
                </button>
                <button class="btn btn-danger btn-sm" 
                        onclick="pararTarefa({{ task.pk }})" 
                        title="Parar">
                    <i class="bi bi-stop-circle"></i>
                </button>
            {% else %}
                <button class="btn btn-success btn-sm" 
                        onclick="iniciarTarefa({{ task.pk }})" 
                        title="Iniciar Trabalho">
                    <i class="bi bi-play-circle"></i>
                </button>
            {% endif %}
        </div>
    {% endif %}
</div>

<style>
.task-time-control {
    padding: 0.5rem;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

.task-time-control .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.task-time-control .fw-bold {
    font-size: 0.9rem;
}
</style>