@model List<Postall.Models.VideoViewModel>

@if (Model == null || !Model.Any())
{
    <div class="alert alert-info">
        <i class="bi bi-info-circle"></i> Não há vídeos disponíveis para este canal.
    </div>
}
else
{
    <div class="form-group mb-3">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="bi bi-search"></i></span>
            </div>
            <input type="text" id="videoSearchInput" class="form-control" placeholder="Filtrar vídeos...">
        </div>
    </div>

    <style>
        /* Estilos para os cards de vídeo */
        .video-item .card {
            height: 100%;
            position: relative;
        }

        .video-item .video-image {
            width: 120px;
            height: 67px;
            object-fit: cover;
        }
        /* Estilo para o título do vídeo */
        .video-title {
            display: block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* Estilo para a descrição do vídeo */
        .video-description {
            height: 40px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        /* Estilo para o botão ler mais */
        .read-more-btn {
            font-size: 0.8rem;
            color: #007bff;
            cursor: pointer;
            display: inline-block;
            margin-top: 3px;
        }

            .read-more-btn:hover {
                text-decoration: underline;
            }
        /* Estilo para o conteúdo expandido */
        .description-expanded {
            max-height: 150px;
            overflow-y: auto;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 0 0 4px 4px;
            border-top: 1px solid #dee2e6;
            margin: 10px -20px -20px -20px; /* Margem negativa para alinhar com os limites do card */
            display: none;
            position: relative;
            z-index: 5;
        }

        /* Ajuste na posição do botão Fechar */
        .card-body {
            padding-bottom: 5px;
        }
    </style>

    <div class="row" id="videosList">
        @foreach (var video in Model)
        {
            <div class="col-md-6 mb-3 video-item">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="d-flex">
                            <div class="flex-shrink-0 mr-3">
                                <img src="@video.ThumbnailUrl" alt="@video.Title" class="img-thumbnail video-image">
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <div class="form-check">
                                    <input class="form-check-input video-checkbox" type="checkbox" value="@video.VideoId" id="video-@video.VideoId">
                                    <label class="form-check-label w-100" for="video-@video.VideoId">
                                        <h6 class="mb-1 video-title">@video.Title</h6>
                                    </label>
                                </div>
                                <p class="text-muted small mb-1">Publicado em: @video.PublishedAt.ToString("dd/MM/yyyy")</p>
                                <div>
                                    <p class="small video-description mb-0">@video.Description</p>
                                    <span class="read-more-btn" data-target="desc-@video.VideoId">Ler mais</span>
                                </div>
                            </div>
                        </div>
                        <div id="desc-@video.VideoId" class="description-expanded">
                            <p><b>@video.Title</b></p>
                            @video.Description
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>

    <script>
        $(function() {
            // Manipular clique no botão "Ler mais"
            $('.read-more-btn').click(function() {
                var targetId = $(this).data('target');
                $('#' + targetId).slideToggle(200);

                // Alternar texto do botão
                var btnText = $(this).text() === 'Ler mais' ? 'Fechar' : 'Ler mais';
                $(this).text(btnText);
            });

            // Filtro de vídeos
            $('#videoSearchInput').on('keyup', function() {
                var value = $(this).val().toLowerCase();
                $('.video-item').filter(function() {
                    var title = $(this).find('.video-title').text().toLowerCase();
                    $(this).toggle(title.indexOf(value) > -1);
                });
            });
        });
    </script>
}