{% extends 'schasite/authenticated_base.html' %}
{% load static  %}

{% block pagetitle %}
<title>Posts | SCHA</title>
<script type="text/css">
    .post-detail .card-header {
        padding: 1rem 1.25rem;
    }
    
    .comment-list {
        max-height: 500px;
        overflow-y: auto;
        padding-right: 0.5rem;
    }
    
    .comment-list::-webkit-scrollbar {
        width: 8px;
    }
    
    .comment-list::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    
    .comment-list::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 10px;
    }
    
    .comment-list::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
    
    /* Responsive adjustments */
    @media (max-width: 767.98px) {
        .comment-list {
            max-height: none;
        }
        
        .post-detail .card-header h3 {
            font-size: 1.1rem;
        }
    }
    
    /* Interaction buttons */
    .btn-outline-success:hover .bi-hand-thumbs-up,
    .text-success .bi-hand-thumbs-up {
        fill: currentColor;
    }
</script>
{% endblock %}

{% block content %}
<main class="py-5">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12">
                <h1 class="display-6">Community Post</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="../../index.html">Home</a></li>
                        <li class="breadcrumb-item"><a href="../index.html">Community Posts</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Post Details</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <!-- Main Post Card -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-success text-white">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="h5 mb-0">Annual Community Picnic</h3>
                            <span class="badge bg-light text-success">Announcement</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-flex mb-4">
                            <div class="flex-shrink-0">
                                <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                    <i class="bi bi-person-fill text-success fs-4"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mb-1">Sarah Johnson</h5>
                                <div class="d-flex flex-wrap text-muted small">
                                    <div class="me-3"><i class="bi bi-calendar me-1"></i>Posted on June 5, 2023</div>
                                    <div><i class="bi bi-chat me-1"></i>12 comments</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <img src="../../../images/events/picnic.jpg" alt="Community picnic" class="img-fluid rounded mb-3">
                            <p>Our annual community picnic is scheduled for <strong>Saturday, June 15th from 11am-3pm</strong> at the Greenwood Park. This is always one of our most popular events, bringing together neighbors of all ages for a day of fun and community building.</p>
                            
                            <h5 class="mt-4">Event Details</h5>
                            <ul>
                                <li><strong>Date:</strong> June 15, 2024</li>
                                <li><strong>Time:</strong> 11:00 AM - 3:00 PM</li>
                                <li><strong>Location:</strong> Greenwood Community Park</li>
                                <li><strong>Address:</strong> 1234 Greenwood Lane, Anytown, ST</li>
                                <li><strong>RSVP Deadline:</strong> June 10, 2024</li>
                            </ul>
                            
                            <h5 class="mt-4">What to Expect</h5>
                            <p>This year we're excited to offer:</p>
                            <ul>
                                <li>Bounce house and playground activities for kids</li>
                                <li>Face painting and balloon animals</li>
                                <li>Pie baking contest (sign up below!)</li>
                                <li>Potluck lunch (main dishes provided by HOA)</li>
                                <li>Live acoustic music from 1-3pm</li>
                            </ul>
                            
                            <div class="alert alert-success mt-4">
                                <h5><i class="bi bi-info-circle me-2"></i>Volunteers Needed</h5>
                                <p>We're looking for volunteers to help with setup (10-11am), food service (11:30am-1:30pm), and cleanup (3-4pm). Please email me if you can help!</p>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <button class="btn btn-sm btn-outline-success me-2">
                                    <i class="bi bi-hand-thumbs-up me-1"></i>Like (24)
                                </button>
                                <button class="btn btn-sm btn-outline-success">
                                    <i class="bi bi-share me-1"></i>Share
                                </button>
                            </div>
                            <div>
                                <a href="#" class="text-decoration-none text-success small">
                                    <i class="bi bi-flag me-1"></i>Report
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Comments Section -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-success text-white">
                        <h3 class="h5 mb-0"><i class="bi bi-chat-square-text me-2"></i>Comments (12)</h3>
                    </div>
                    <div class="card-body">
                        <!-- Comment Form -->
                        <div class="mb-4">
                            <form>
                                <div class="mb-3">
                                    <label for="commentText" class="form-label">Add a comment</label>
                                    <textarea class="form-control" id="commentText" rows="3" placeholder="Share your thoughts..."></textarea>
                                </div>
                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-success">Post Comment</button>
                                </div>
                            </form>
                        </div>
                        
                        <hr>
                        
                        <!-- Comment List -->
                        <div class="comment-list">
                            <!-- Comment 1 -->
                            <div class="d-flex mb-4">
                                <div class="flex-shrink-0">
                                    <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                        <i class="bi bi-person-fill text-success"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <h6 class="mb-0">Robert Wilson</h6>
                                        <small class="text-muted">June 5, 2023 at 2:30 PM</small>
                                    </div>
                                    <p class="mb-2">Looking forward to it! I'll bring my famous potato salad. Can I sign up to help with setup?</p>
                                    <div>
                                        <a href="#" class="text-decoration-none text-success small me-3">
                                            <i class="bi bi-hand-thumbs-up me-1"></i>Like (5)
                                        </a>
                                        <a href="#" class="text-decoration-none text-success small">
                                            <i class="bi bi-reply me-1"></i>Reply
                                        </a>
                                    </div>
                                    
                                    <!-- Reply -->
                                    <div class="d-flex mt-3">
                                        <div class="flex-shrink-0">
                                            <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                                <i class="bi bi-person-fill text-success small"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <div class="d-flex justify-content-between align-items-center mb-1">
                                                <h6 class="mb-0">Sarah Johnson</h6>
                                                <small class="text-muted">June 5, 2023 at 3:15 PM</small>
                                            </div>
                                            <p class="mb-2">That would be great Robert! I'll put you down for setup crew.</p>
                                            <div>
                                                <a href="#" class="text-decoration-none text-success small me-3">
                                                    <i class="bi bi-hand-thumbs-up me-1"></i>Like (2)
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Comment 2 -->
                            <div class="d-flex mb-4">
                                <div class="flex-shrink-0">
                                    <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                        <i class="bi bi-person-fill text-success"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <h6 class="mb-0">Emily Davis</h6>
                                        <small class="text-muted">June 6, 2023 at 9:45 AM</small>
                                    </div>
                                    <p class="mb-2">I'd love to enter the pie contest! Are there any category restrictions?</p>
                                    <div>
                                        <a href="#" class="text-decoration-none text-success small me-3">
                                            <i class="bi bi-hand-thumbs-up me-1"></i>Like (3)
                                        </a>
                                        <a href="#" class="text-decoration-none text-success small">
                                            <i class="bi bi-reply me-1"></i>Reply
                                        </a>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Comment 3 -->
                            <div class="d-flex">
                                <div class="flex-shrink-0">
                                    <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                        <i class="bi bi-person-fill text-success"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <h6 class="mb-0">Michael Brown</h6>
                                        <small class="text-muted">June 6, 2023 at 11:20 AM</small>
                                    </div>
                                    <p class="mb-2">I'll bring my guitar and play during the music time if that's okay!</p>
                                    <div>
                                        <a href="#" class="text-decoration-none text-success small me-3">
                                            <i class="bi bi-hand-thumbs-up me-1"></i>Like (8)
                                        </a>
                                        <a href="#" class="text-decoration-none text-success small">
                                            <i class="bi bi-reply me-1"></i>Reply
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-center">
                        <a href="#" class="text-decoration-none">Load more comments</a>
                    </div>
                </div>
                
                <!-- Related Posts -->
                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white">
                        <h3 class="h5 mb-0"><i class="bi bi-collection me-2"></i>Related Posts</h3>
                    </div>
                    <div class="card-body">
                        <div class="list-group list-group-flush">
                            <a href="#" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">Summer Pool Schedule</h6>
                                    <small class="text-muted">May 28, 2023</small>
                                </div>
                                <p class="mb-1 small">Pool hours and rules for the summer season</p>
                                <small class="text-muted">Posted by Michael Brown</small>
                            </a>
                            <a href="#" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">Neighborhood Yard Sale</h6>
                                    <small class="text-muted">May 15, 2023</small>
                                </div>
                                <p class="mb-1 small">Community-wide yard sale August 3-4</p>
                                <small class="text-muted">Posted by Emily Davis</small>
                            </a>
                            <a href="#" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h6 class="mb-1">Landscaping Updates</h6>
                                    <small class="text-muted">April 30, 2023</small>
                                </div>
                                <p class="mb-1 small">New plants and improvements in common areas</p>
                                <small class="text-muted">Posted by Robert Wilson</small>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}
{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Like button functionality
        document.querySelectorAll('.bi-hand-thumbs-up').forEach(icon => {
            icon.addEventListener('click', function() {
                // In a real implementation, this would track likes
                this.classList.toggle('text-success');
            });
        });
        
        // Comment submission
        const commentForm = document.querySelector('.comment-list').previousElementSibling.querySelector('form');
        commentForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const commentText = document.getElementById('commentText').value;
            if (commentText.trim() !== '') {
                // In a real implementation, this would submit the comment
                alert('Comment posted successfully (simulated)');
                document.getElementById('commentText').value = '';
            }
        });
    });
</script>
{% endblock %}