<div class="container-fluid pt-3">
    <!-- Layout principal -->
    <div class="dashboard-content">
        <!-- Parte esquerda -->
        <div class="left-section">
            <!-- Check-in -->
            <div class="check-in">
                <h2>Check-in Diário</h2>
                <div class="buttons">
                    <button *ngFor="let image of buttonImages; let i = index" [class.active]="nivelHumor === i + 1"
                        (click)="selectButton(i)" style="border: none; background: none;">
                        <img [src]="image" alt="Botão {{ i + 1 }}"
                            style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;">
                    </button>
                </div>

                <!-- Campo de comentário e botão de envio -->
                <div class="comment-section">
                    <textarea [(ngModel)]="comment" placeholder="Faça um comentário..." rows="3" maxlength="120">
                    </textarea>
                    <div class="contador-caracteres">{{ comment.length || 0 }} / 120</div>
                    <button [disabled]="nivelHumor === null" (click)="submitCheckIn()">
                        Enviar
                    </button>
                </div>
            </div>

            <!-- Questionários pendentes -->
            <div class="pending-surveys">
                <h2>Questionários Pendentes</h2>
                <ul *ngIf="ultimosQuestionariosNaoRespondidos.length > 0">
                    <li *ngFor="let q of ultimosQuestionariosNaoRespondidos">
                        {{ q.titulo }} - Prazo: {{ q.dataValidade | date: 'dd/MM/yyyy' }}
                    </li>
                    <br>
                    <button class="ver-todos-btn" (click)="irParaListagem()">Ver todos os questionários</button>
                </ul>
                <div *ngIf="ultimosQuestionariosNaoRespondidos.length === 0">
                    <br>
                    <li>Parabéns, não há questionários pendentes!</li>
                </div>
            </div>
        </div>

        <!-- Parte direita -->
        <div class="right-section">
            <h2>{{ tituloDica || 'Dica de Saúde do Dia' }}</h2>
            <br>
            <p>
                {{ dicaDoDia || 'Carregando dica de saúde...' }}
            </p>
        </div>
    </div>
</div>