<div class="container-fluid">
    <div class="title-section">
        <h2>Material de Apoio</h2>
    </div>

    <div class="section-container">
        <div class="section" *ngFor="let dica of dicasDeSaude" (click)="abrirDica(dica)">
            <h3>{{ dica.titulo }}</h3>
            <p>{{ dica.conteudo | slice:0:100 }}...</p>
        </div>
    </div>

    <div class="modal" *ngIf="dicaSelecionada">
        <div class="modal-content">
            <span class="close" (click)="fecharPopUp()">&times;</span>
            <h2>{{ dicaSelecionada.titulo }}</h2>
            <p>{{ dicaSelecionada.conteudo }}</p>

            <ng-container *ngIf="dicaSelecionada.links?.length">
                <div *ngFor="let link of dicaSelecionada.links">
                    <a [href]="link" target="_blank">🔗 Acesse mais informações</a>
                </div>
            </ng-container>
            <div *ngIf="dicaSelecionada.nomeArquivo" >
                <a [href]="'http://localhost:8080/materiais/download/' + dicaSelecionada.nomeArquivo">
                📄{{ dicaSelecionada.nomeArquivo | cleanFilename }}
                </a>
            </div>
            
        </div>
    </div>
</div>