{% load static %}

<section id="team" class="team section-bg">
  <div class="container">

    <div class="section-title">
      <h2 data-aos="fade-in">{{ team_title }}</h2>
      <p data-aos="fade-in">{{ team_subtitle }}</p>
    </div>

    <div class="row">
      {% for member in team %}
      <div class="col-xl-3 col-lg-4 col-md-6">
        {% if forloop.first %}
        <div class="member" data-aos="fade-up">
        {% else %}
        <div class="member" data-aos="fade-up" data-aos-delay="{% cycle '100' '200' '300' '400' %}">
        {% endif %}
          <div class="member" data-aos="fade-up">
          {% cycle 'member1' 'member2' 'member3' 'member4' 'member5' 'member6' as member_dir silent %}
          <div class="pic"><img src="{% static 'img/bocords/team/'|add:member_dir|add:'/profile.jpg' %}" alt=""></div>
          <h4>{{ member.name }}</h4>
          <span>{{ member.title }}</span>
          <div class="social">
            {% if member.social.twitter %}
            <a href="{{ member.social.twitter }}"><i class="bi bi-twitter"></i></a>
            {% endif %}
            {% if member.social.facebook %}
            <a href="{{ member.social.facebook }}"><i class="bi bi-facebook"></i></a>
            {% endif %}
            {% if member.social.instagram %}
            <a href="{{ member.social.instagram }}"><i class="bi bi-instagram"></i></a>
            {% endif %}
            {% if member.social.linkedin %}
            <a href="{{ member.social.linkedin }}"><i class="bi bi-linkedin"></i></a>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</section>