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

{% block pagetitle %}
<title>Dashboard | 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">Member Dashboard</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item active" aria-current="page">Home</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row g-4">
            <!-- Welcome Card -->
            <div class="col-md-6">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-success text-white">
                        <h3 class="h5 mb-0"><i class="bi bi-house-door me-2"></i>Welcome</h3>
                    </div>
                    <div class="card-body">
                        <h4 class="card-title">Hello, John Doe!</h4>
                        <p class="card-text">Welcome to your Greenwood Estates member portal. From here you can access community resources, connect with neighbors, and stay informed.</p>
                        <div class="alert alert-success">
                            <i class="bi bi-info-circle-fill me-2"></i>
                            Your membership is active through December 31, 2024.
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Quick Links -->
            <div class="col-md-6">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-success text-white">
                        <h3 class="h5 mb-0"><i class="bi bi-lightning me-2"></i>Quick Actions</h3>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-sm-6">
                                <a href="{% url 'directory' %}" class="btn btn-outline-success w-100 py-3">
                                    <i class="bi bi-people display-6 d-block mb-2"></i>
                                    Member Directory
                                </a>
                            </div>
                            <div class="col-sm-6">
                                <a href="{% url 'posts' %}" class="btn btn-outline-success w-100 py-3">
                                    <i class="bi bi-chat-square-text display-6 d-block mb-2"></i>
                                    Community Posts
                                </a>
                            </div>
                            <div class="col-sm-6">
                                <a href="{% url 'posts_create' %}" class="btn btn-outline-success w-100 py-3">
                                    <i class="bi bi-plus-circle display-6 d-block mb-2"></i>
                                    Create Post
                                </a>
                            </div>
                            <!-- <div class="col-sm-6">
                                <a href="#" class="btn btn-outline-success w-100 py-3">
                                    <i class="bi bi-calendar-event display-6 d-block mb-2"></i>
                                    View Calendar
                                </a>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Recent Activity -->
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white">
                        <h3 class="h5 mb-0"><i class="bi bi-activity me-2"></i>Your Recently Updated Posts</h3>
                    </div>
                    <div class="card-body">
                        <div class="list-group">
                            {% for recent_post in member_recent_posts %}
                            <a href="#" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">{{ recent_post.title }}</h5>
                                    <small>3 days ago</small>
                                </div>
                                <p class="mb-1">{{ recent_post.content }}</p>
                                <small>Posted by Sarah Johnson</small>
                            </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white">
                        <h3 class="h5 mb-0"><i class="bi bi-activity me-2"></i>Recent Community Posts</h3>
                    </div>
                    <div class="card-body">
                        <div class="list-group">
                            {% for recent_post in recent_posts %}
                            <a href="#" class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">{{ recent_post.title }}</h5>
                                    <small>3 days ago</small>
                                </div>
                                <p class="mb-1">{{ recent_post.content }}</p>
                                <small>Posted by Sarah Johnson</small>
                            </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
{% endblock %}
{% block extra_js %}
{% endblock %}