{% extends "base.html" %}
{% load static %}

{% block title %}{{ group.name }} | Roster{% endblock %}

{% block content %}
<div class="container-fluid dashboard-container px-lg-5">
    <div class="row">
        <!-- LEFT SIDEBAR -->
        <div class="col-lg-2 d-none d-lg-block">
            <div class="sticky-sidebar">
                <nav class="sidebar-nav">
                    <a href="{% url 'home' %}" class="nav-link"><i class="bi bi-compass"></i> Teammates</a>
                    <a href="{% url 'groups:hub' %}" class="nav-link active"><i class="bi bi-grid"></i> Squads</a>
                    <a href="{% url 'inbox' %}" class="nav-link"><i class="bi bi-chat-dots"></i> Messages</a>
                    <a href="{% url 'events' %}" class="nav-link"><i class="bi bi-calendar-event"></i> Sessions</a>
                </nav>
            </div>
        </div>

        <!-- MAIN COLUMN -->
        <div class="col-lg-10 col-md-12">
            <!-- Group Header Card -->
            <div class="card border-0 shadow-soft mb-5 overflow-hidden" style="border-radius: 24px;">
                {% if group.cover_image %}
                <div style="height: 250px; background: url('{{ group.cover_image.url }}') center/cover no-repeat;"></div>
                {% else %}
                <div style="height: 150px; background: linear-gradient(135deg, #F6F3EC 0%, #E5E1D8 100%);"></div>
                {% endif %}
                
                <div class="card-body p-4 p-lg-5">
                    <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-4">
                        <div>
                            <div class="d-flex flex-wrap gap-2 mb-3">
                                <span class="post-badge">{{ group.get_group_type_display }}</span>
                                <span class="intent-badge">{{ group.get_intent_type_display }}</span>
                                <span class="text-muted small ms-2"><i class="bi bi-geo-alt me-1"></i> {{ group.get_location_scope_display }}</span>
                            </div>
                            <h1 class="display-5 fw-bold mb-2">{{ group.name }}</h1>
                            <p class="text-muted lead mb-0">{{ group.focus_game|default:"Competitive Gaming & Teamwork" }}</p>
                        </div>
                        
                        <div class="d-flex gap-3">
                            {% if is_member %}
                                <div class="dropdown">
                                    <button class="btn btn-outline-cg px-4 dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                        Member
                                    </button>
                                    <ul class="dropdown-menu border-0 shadow-sm p-2">
                                        <li><a class="dropdown-item rounded small" href="{% url 'groups:members' group.pk %}">View Members</a></li>
                                        {% if membership.role == 'owner' or membership.role == 'moderator' %}
                                        <li><a class="dropdown-item rounded small" href="{% url 'groups:edit' group.pk %}">Settings</a></li>
                                        <li><a class="dropdown-item rounded small" href="{% url 'groups:moderation' group.pk %}">Moderation</a></li>
                                        {% endif %}
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <form action="{% url 'groups:leave' group.pk %}" method="POST">
                                                {% csrf_token %}
                                                <button type="submit" class="dropdown-item rounded small text-danger">Leave Squad</button>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                            {% elif is_pending %}
                                <button class="btn btn-outline-cg px-4 disabled">Request Sent</button>
                            {% else %}
                                <form action="{% url 'groups:join' group.pk %}" method="POST">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-primary-cg px-5">Join Squad</button>
                                </form>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-5">
                <!-- Content Column -->
                <div class="col-lg-8">
                    <div class="dashboard-section">
                        <h2 class="section-header mb-4">About</h2>
                        <div class="bg-white p-4 p-lg-5 rounded-cg shadow-soft">
                            <p class="mb-0" style="white-space: pre-wrap; line-height: 1.8;">{{ group.description }}</p>
                        </div>
                    </div>

                    {% if group.group_type == 'mastermind' %}
                    <div class="dashboard-section">
                        <h2 class="section-header mb-4">Practice Schedule</h2>
                        <div class="card border-0 bg-secondary-section p-4" style="border-radius: 16px;">
                            <div class="d-flex gap-4">
                                <div class="stat-icon bg-white text-cg-slate">
                                    <i class="bi bi-calendar-check fs-4"></i>
                                </div>
                                <div>
                                    <p class="mb-0 fw-bold">Team Commitment</p>
                                    <p class="text-muted small mb-0">{{ group.recurring_schedule }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    <!-- Feed Placeholder -->
                    <div class="dashboard-section mt-5">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2 class="section-header mb-0">Squad Feed</h2>
                            <button class="btn btn-outline-cg btn-sm border-0 bg-light px-3">Latest First</button>
                        </div>
                        <div class="text-center py-5 bg-white rounded-cg shadow-soft">
                            <i class="bi bi-chat-dots fs-1 text-muted opacity-25 mb-3 d-block"></i>
                            <p class="text-muted mb-0">The conversation is just beginning. Be the first to coordinate.</p>
                        </div>
                    </div>
                </div>

                <!-- Info Column -->
                <div class="col-lg-4">
                    <div class="stat-widget mb-5">
                        <h2 class="section-header mb-4" style="font-size: 1.1rem;">Squad Info</h2>
                        <div class="d-flex flex-column gap-3">
                            <div class="d-flex justify-content-between small border-bottom pb-2">
                                <span class="text-muted">Visibility</span>
                                <span class="fw-bold">{{ group.get_visibility_display }}</span>
                            </div>
                            <div class="d-flex justify-content-between small border-bottom pb-2">
                                <span class="text-muted">Capacity</span>
                                <span class="fw-bold">{{ active_members.count }} / {{ group.capacity|default:"∞" }}</span>
                            </div>
                            <div class="d-flex justify-content-between small border-bottom pb-2">
                                <span class="text-muted">Created</span>
                                <span class="fw-bold">{{ group.created_at|date:"M Y" }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="stat-widget">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h2 class="section-header mb-0" style="font-size: 1.1rem;">Members</h2>
                            <a href="{% url 'groups:members' group.pk %}" class="extra-small text-decoration-none fw-bold">View All</a>
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            {% for member in active_members|slice:":12" %}
                            <a href="{% url 'profile_detail' member.user.username %}" title="{{ member.user.username }}">
                                <img src="{{ member.user.profile.get_avatar_url }}" class="rounded-circle border" width="40" height="40" style="object-fit: cover;">
                            </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
