{% extends "layout.html.twig" %}

{% block title %}{% if showDetails %}Member Directory{% else %}Community Members{% endif %} | LocalLendables{% endblock %}

{% block content %}
<main class="container-fluid py-4">
    
    <div class="d-flex align-items-center justify-content-between mb-4">
        <h2 class="h4 fw-bold mb-0">
            {% if showDetails %}Member Directory{% else %}Community Members{% endif %}
        </h2>
        {% if currentUser %}
        <a href="/dashboard/{{ currentUser.id }}" class="btn btn-primary-custom btn-sm">
            My Dashboard
        </a>
        {% endif %}
    </div>

    {% if showDetails %}
    <!-- Detailed Member List -->
    <div class="row g-3">
        {% for user in users %}
        <div class="col-12">
            <div class="member-card bg-white rounded-3 p-3">
                <div class="d-flex gap-3 align-items-center">
                    <div class="position-relative">
                        <img src="{{ user.avatar ?: 'https://ui-avatars.com/api/?name=' ~ user.firstName ~ '+' ~ user.lastName ~ '&background=2563EB&color=fff' }}" 
                             alt="{{ user.showName ?: (user.firstName ~ ' ' ~ user.lastName) }}" class="avatar">
                        <div class="status-indicator"></div>
                    </div>
                    <div class="flex-grow-1">
                        <h3 class="h6 fw-semibold mb-1">{{ user.showName ?: (user.firstName ~ ' ' ~ user.lastName) }}</h3>
                        <p class="text-muted small mb-2">{{ user.location ?: 'Local area' }}</p>
                        <div class="d-flex gap-2 mb-2">
                            <span class="badge bg-light text-dark small">{{ user.itemCount ?: 0 }} items</span>
                            <span class="badge bg-success small">{{ user.rating ?: '5.0' }}★</span>
                            {% if user.isActive %}
                            <span class="badge bg-success small">Active</span>
                            {% endif %}
                        </div>
                        {% if currentUser %}
                        <div class="d-flex gap-2">
                            <a href="/login?demo={{ user.username }}" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-sign-in-alt me-1"></i>Demo Login
                            </a>
                            <button class="btn btn-sm btn-primary">
                                <i class="fas fa-eye me-1"></i>View Items
                            </button>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <!-- Avatar Grid -->
    <div class="text-center mb-4">
        <h3 class="h5 fw-semibold mb-2">Join Our Sharing Community</h3>
        <p class="text-muted">Connect with neighbors to lend and borrow items locally</p>
    </div>

    <div class="row g-4 justify-content-center">
        {% for user in users %}
        <div class="col-6 col-md-4 col-lg-3">
            <div class="member-card bg-white rounded-3 p-3 text-center h-100">
                <div class="position-relative d-inline-block mb-3">
                    <img src="{{ user.avatar ?: 'https://ui-avatars.com/api/?name=' ~ user.firstName ~ '+' ~ user.lastName ~ '&background=2563EB&color=fff' }}" 
                         alt="{{ user.showName ?: (user.firstName ~ ' ' ~ user.lastName) }}" class="avatar">
                    <div class="status-indicator"></div>
                </div>
                <h4 class="h6 fw-semibold mb-2">{{ user.showName ?: (user.firstName ~ ' ' ~ user.lastName) }}</h4>
                <p class="text-muted small mb-3">{{ user.itemCount ?: 0 }} items shared</p>
                {% if not currentUser %}
                <a href="/login?demo={{ user.username }}" class="btn btn-primary-custom btn-sm w-100">
                    Demo Login
                </a>
                {% else %}
                <button class="btn btn-outline-primary btn-sm w-100">
                    View Items
                </button>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    {% if not currentUser %}
    <!-- Call to Action -->
    <div class="bg-white rounded-3 p-4 mt-4 text-center">
        <h3 class="h5 fw-bold mb-2">Ready to Start Sharing?</h3>
        <p class="text-muted mb-3">Join LocalLendables to lend and borrow items in your community</p>
        <div class="d-flex gap-2 justify-content-center">
            <a href="/login?demo=kiley.ford" class="btn btn-primary-custom">
                <i class="fas fa-user me-2"></i>Try Demo (Kiley)
            </a>
            <a href="/login?demo=morgan.gilbert" class="btn btn-outline-primary">
                <i class="fas fa-user me-2"></i>Try Demo (Morgan)
            </a>
        </div>
    </div>
    {% endif %}

</main>
{% endblock %}
