<?php get_header(); ?>

<div class="container site-main">
    <div class="content-area">
        <div class="team-archive-container">

            <header class="page-header">
                <h1 class="page-title">Unser Team</h1>
                <p class="page-description">Lerne die Leute kennen, die diesen Server am Laufen halten.</p>
            </header>

            <?php
            $query = new WP_Query( array(
                'post_type'      => 'team_member',
                'posts_per_page' => -1,
                'orderby'        => 'menu_order',
                'order'          => 'ASC',
            ) );

            if ( $query->have_posts() ) : ?>
                <div class="team-grid">
                    <?php while ( $query->have_posts() ) : $query->the_post();
                        $rank_string = get_post_meta( get_the_ID(), '_team_member_rank', true );
                        $uuid        = get_post_meta( get_the_ID(), '_team_member_uuid', true );
                        $banner_id   = get_post_meta( get_the_ID(), '_team_member_banner', true );
                        $img         = get_the_post_thumbnail_url( get_the_ID(), 'medium' );
                        $banner_url  = $banner_id ? wp_get_attachment_image_url( $banner_id, 'medium_large' ) : false;

                        // UUID hat Vorrang – Minecraft Avatar via visage.surgeplay.com
                        if ( $uuid ) {
                            $avatar_url = 'https://visage.surgeplay.com/bust/' . esc_attr( $uuid ) . '.png';
                        } elseif ( $img ) {
                            $avatar_url = $img;
                        } else {
                            $avatar_url = false;
                        }
                        $use_placeholder = ! $avatar_url;
                        $initials = mb_strtoupper( mb_substr( get_the_title(), 0, 1 ) );
                    ?>
                    <article class="team-card">
                        <!-- Banner -->
                        <div class="team-card-banner" <?php if ( $banner_url ) echo 'style="background-image:url(' . esc_url($banner_url) . ')"'; ?>>
                        </div>

                        <!-- Avatar -->
                        <div class="team-image-wrapper">
                            <?php if ( $avatar_url ) : ?>
                                <img src="<?php echo esc_url( $avatar_url ); ?>"
                                     alt="<?php echo esc_attr( get_the_title() ); ?>"
                                     loading="lazy">
                            <?php else : ?>
                                <div class="team-avatar-placeholder">
                                    <?php echo esc_html( $initials ); ?>
                                </div>
                            <?php endif; ?>
                        </div>

                        <div class="team-info">
                            <h3 class="team-name"><?php the_title(); ?></h3>
                            <div class="team-ranks-wrapper">
                                <?php if ( ! empty( $rank_string ) ) {
                                    $ranks = explode( ',', $rank_string );
                                    foreach ( $ranks as $r ) {
                                        echo '<span class="team-rank">' . esc_html( trim( $r ) ) . '</span>';
                                    }
                                } ?>
                            </div>
                            <div class="team-bio"><?php the_excerpt(); ?></div>
                        </div>
                    </article>
                    <?php endwhile; wp_reset_postdata(); ?>
                </div>

            <?php else : ?>
                <p><?php _e('Noch keine Teammitglieder.', 'minecraft-modern-theme'); ?></p>
            <?php endif; ?>

        </div>
    </div>
</div>

<style>
/* Avatar-Placeholder wenn kein Bild gesetzt ist */
.team-avatar-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: var(--card-bg);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary-accent, #00d4ff);
    font-size: 2.5rem;
    font-weight: 700;
    gap: 4px;
}
.team-avatar-placeholder svg {
    width: 60%;
    height: 60%;
    color: var(--primary-accent, #00d4ff);
}
.team-avatar-placeholder span {
    font-size: 2rem;
    line-height: 1;
}
</style>

<?php get_footer(); ?>