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

{% block pagetitle %}
<title>Posts | SCHA</title>
{% endblock %}

{% block content %}
<main class="py-5">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12">
                <h1 class="display-6">Community Posts</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Community Posts</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row mb-4">
            <div class="col-md-8 mb-3 mb-md-0">
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" class="form-control" placeholder="Search posts...">
                    <button class="btn btn-success" type="button">Search</button>
                </div>
            </div>
            <div class="col-md-4 text-md-end">
                <a href="{% url 'posts_create' %}" class="btn btn-success">
                    <i class="bi bi-plus-circle me-2"></i>New Post
                </a>
            </div>
        </div>
        
        <div class="row">
            <div class="col-12">
                <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"><i class="bi bi-pin-angle me-2"></i>Pinned Post</h3>
                            <span class="badge bg-light text-success">Announcement</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-flex mb-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: 40px; height: 40px;">
                                    <i class="bi bi-person-fill text-success"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mb-1">Annual Community Picnic</h5>
                                <div class="d-flex flex-wrap text-muted small mb-2">
                                    <div class="me-3"><i class="bi bi-person me-1"></i>Sarah Johnson</div>
                                    <div class="me-3"><i class="bi bi-calendar me-1"></i>June 5, 2023</div>
                                    <div><i class="bi bi-chat me-1"></i>12 comments</div>
                                </div>
                            </div>
                        </div>
                        <p class="card-text">Our annual community picnic is scheduled for Saturday, June 15th from 11am-3pm at the Greenwood Park. This year we'll have a bounce house, face painting, and a pie baking contest. Please RSVP by June 10th so we can plan for food quantities.</p>
                        <div class="mt-3">
                            <a href="#" class="btn btn-sm btn-outline-success me-2"><i class="bi bi-hand-thumbs-up me-1"></i>Like (24)</a>
                            <a href="#" class="btn btn-sm btn-outline-success"><i class="bi bi-chat me-1"></i>Comment</a>
                        </div>
                    </div>
                </div>
                
                {% for post in posts %}
                <div class="card shadow-sm mb-4">
                    <div class="card-body">
                        <div class="d-flex mb-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: 40px; height: 40px;">
                                    <i class="bi bi-person-fill text-success"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mb-1"><a href="{% url 'posts_detail' post_id=post.id %}">{{ post.title }}</a></h5>
                                <div class="d-flex flex-wrap text-muted small mb-2">
                                    <div class="me-3"><i class="bi bi-person me-1"></i>Emily Davis</div>
                                    <div class="me-3"><i class="bi bi-calendar me-1"></i>June 3, 2023</div>
                                    <div><i class="bi bi-chat me-1"></i>8 comments</div>
                                </div>
                            </div>
                        </div>
                        <p class="card-text">{{ post.content }}</p>
                        <div class="mt-3">
                            <a href="#" class="btn btn-sm btn-outline-success me-2"><i class="bi bi-hand-thumbs-up me-1"></i>Like (15)</a>
                            <a href="#" class="btn btn-sm btn-outline-success"><i class="bi bi-chat me-1"></i>Comment</a>
                        </div>
                    </div>
                </div>
                {% endfor %}
                <div class="card shadow-sm mb-4">
                    <div class="card-body">
                        <div class="d-flex mb-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: 40px; height: 40px;">
                                    <i class="bi bi-person-fill text-success"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mb-1">Lost Dog - Please Help!</h5>
                                <div class="d-flex flex-wrap text-muted small mb-2">
                                    <div class="me-3"><i class="bi bi-person me-1"></i>Emily Davis</div>
                                    <div class="me-3"><i class="bi bi-calendar me-1"></i>June 3, 2023</div>
                                    <div><i class="bi bi-chat me-1"></i>8 comments</div>
                                </div>
                            </div>
                        </div>
                        <p class="card-text">Our golden retriever Max got out of our yard this morning around 9am. He was last seen near the corner of Oak Drive and Maple Street. He's friendly, wearing a blue collar with our contact info. Please call me at 555-456-7890 if you see him!</p>
                        <div class="mt-3">
                            <a href="#" class="btn btn-sm btn-outline-success me-2"><i class="bi bi-hand-thumbs-up me-1"></i>Like (15)</a>
                            <a href="#" class="btn btn-sm btn-outline-success"><i class="bi bi-chat me-1"></i>Comment</a>
                        </div>
                    </div>
                </div>
                
                <div class="card shadow-sm mb-4">
                    <div class="card-body">
                        <div class="d-flex mb-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: 40px; height: 40px;">
                                    <i class="bi bi-person-fill text-success"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h5 class="mb-1">Yard Sale This Weekend</h5>
                                <div class="d-flex flex-wrap text-muted small mb-2">
                                    <div class="me-3"><i class="bi bi-person me-1"></i>Michael Brown</div>
                                    <div class="me-3"><i class="bi bi-calendar me-1"></i>June 1, 2023</div>
                                    <div><i class="bi bi-chat me-1"></i>5 comments</div>
                                </div>
                            </div>
                        </div>
                        <p class="card-text">We're having a yard sale at 321 Elm Avenue this Saturday from 8am-2pm. Lots of household items, kids' clothes, and furniture. Everything must go!</p>
                        <div class="mt-3">
                            <a href="#" class="btn btn-sm btn-outline-success me-2"><i class="bi bi-hand-thumbs-up me-1"></i>Like (7)</a>
                            <a href="#" class="btn btn-sm btn-outline-success"><i class="bi bi-chat me-1"></i>Comment</a>
                        </div>
                    </div>
                </div>
                
                <nav aria-label="Posts navigation">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1">Previous</a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">Next</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</main>
{% endblock %}
{% block extra_js %}
{% endblock %}