{% extends "base.html" %}
{% block title %}Our Team | {{ settings.event_title }}{% endblock %}
{% block body_class %}team-page{% endblock %}
{% block content %}

<div class="team-page-bg"></div>

{% if team_data %}
{% for item in team_data %}
{% set sec = item.section %}
{% set members = item.members %}
{% set rows = item.rows %}
{% set enabled_rows = rows | selectattr('enabled') | list %}

<section class="section team-section" data-team-section>
  <div class="wrap">
    <div class="section-heading center">
      <p class="eyebrow"><i class="fas fa-users"></i> {{ sec.title | upper }}</p>
      <h2>{{ sec.title }}</h2>
      {% if sec.description %}<p>{{ sec.description }}</p>{% endif %}
    </div>
  </div>

  {% if members %}
    {% if enabled_rows | length > 0 %}
      {% set per_row = (members | length / enabled_rows | length) | round(0, 'ceil') | int %}
      {% for row in enabled_rows %}
        {% set start = loop.index0 * per_row %}
        {% set row_members = members[start:start + per_row] %}
        {% if row_members %}
  <div class="team-marquee {% if row.direction == 'rtl' %}team-marquee-reverse{% endif %}" data-team-marquee data-speed="{{ row.speed }}">
    <div class="team-marquee-track">
      {% for member in row_members %}
      {% set ot_img = img(member.image) if member.image else '' %}
      <div class="team-member-card">
        <div class="team-member-img" {% if ot_img %}data-lightbox="{{ url_for('serve_media', filename=ot_img) }}" data-caption="{{ member.name }}"{% endif %}>
          {% if ot_img %}
          <img src="{{ url_for('serve_media', filename=ot_img) }}" alt="{{ member.name }}" loading="lazy">
          {% else %}
          <span class="team-member-fallback">{{ member.name[:2] | upper }}</span>
          {% endif %}
        </div>
        <span class="team-member-name">{{ member.name }}</span>
      </div>
      {% endfor %}
    </div>
  </div>
        {% endif %}
      {% endfor %}
    {% else %}
  <div class="wrap">
    <div class="team-members-static">
      {% for member in members %}
      {% set ot2_img = img(member.image) if member.image else '' %}
      <div class="team-member-card">
        <div class="team-member-img" {% if ot2_img %}data-lightbox="{{ url_for('serve_media', filename=ot2_img) }}" data-caption="{{ member.name }}"{% endif %}>
          {% if ot2_img %}
          <img src="{{ url_for('serve_media', filename=ot2_img) }}" alt="{{ member.name }}" loading="lazy">
          {% else %}
          <span class="team-member-fallback">{{ member.name[:2] | upper }}</span>
          {% endif %}
        </div>
        <span class="team-member-name">{{ member.name }}</span>
      </div>
      {% endfor %}
    </div>
  </div>
    {% endif %}
  {% else %}
  <div class="wrap">
    <div class="empty"><i class="fas fa-users"></i> Members coming soon.</div>
  </div>
  {% endif %}
</section>
{% endfor %}

{% else %}
<section class="section team-section">
  <div class="wrap">
    <div class="section-heading center">
      <p class="eyebrow"><i class="fas fa-users"></i> OUR TEAM</p>
      <h2>Meet the Team</h2>
      <p>Our team members will appear here soon.</p>
    </div>
  </div>
</section>
{% endif %}

<div class="team-lightbox" id="teamLightbox" role="dialog" aria-label="Image preview">
  <div class="team-lightbox-inner">
    <button class="team-lightbox-close" type="button" aria-label="Close preview"><i class="fas fa-xmark"></i></button>
    <img src="" alt="" id="teamLightboxImg">
    <span class="team-lightbox-caption" id="teamLightboxCaption"></span>
  </div>
</div>

{% endblock %}