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

{% block title %}Our Amazing Team{% endblock %}

{% block content %}
<div class="container py-5">
  <!-- Hero Section with styling matching the board page -->
  <section class="hero-section text-center py-5 bg-primary mb-5 rounded-3 shadow-sm">
    <div class="container">
      <h1 class="display-4 fw-bold text-light">{{ page_title|default:"Meet Our Team" }}</h1>
      <p class="lead text-light mb-4">{{ page_subtitle|default:"Passionate professionals dedicated to excellence" }}</p>
      <div class="border-bottom border-light w-25 mx-auto"></div>
    </div>
  </section>
</div>

<!-- Leadership Team Section - Unchanged -->
{% if leadership_team %}
<section class="py-5">
  <div class="container">
    <h2 class="text-center section-title">{{ leadership_section_title|default:"Leadership" }}</h2>
    <div class="row">
      {% for member in leadership_team %}
      <div class="col-lg-4 col-md-6">
        <div class="team-card">
          <div class="card-inner">
            <div class="card-front shadow">
              <div class="team-image">
                {% if member.image %}
                <img src="{{ member.image.url }}" alt="{{ member.name }}" class="img-fluid">
                {% else %}
                <img src="{% static 'images/placeholder.svg' %}" alt="{{ member.name }}" class="img-fluid">
                {% endif %}
              </div>
              <h3 class="h4 mb-2">{{ member.name }}</h3>
              <p class="position-text mb-3">{{ member.position }}</p>
            </div>
            <div class="card-back shadow">
              <p class="mb-4">{{ member.bio }}</p>
              <div class="social-links mt-auto">
                {% if member.linkedin_url %}
                <a href="{{ member.linkedin_url }}" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin"></i></a>
                {% endif %}
                
                {% if member.twitter_url %}
                <a href="{{ member.twitter_url }}" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>
                {% endif %}
                
                {% if member.github_url %}
                <a href="{{ member.github_url }}" aria-label="GitHub" target="_blank" rel="noopener noreferrer"><i class="fab fa-github"></i></a>
                {% endif %}
                
                {% if member.dribbble_url %}
                <a href="{{ member.dribbble_url }}" aria-label="Dribbble" target="_blank" rel="noopener noreferrer"><i class="fab fa-dribbble"></i></a>
                {% endif %}
                
                {% if member.email %}
                <a href="mailto:{{ member.email }}" aria-label="Email"><i class="fas fa-envelope"></i></a>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

<!-- Team Members Section - Unchanged -->
{% if team_members %}
<section class="py-5 bg-light">
  <div class="container">
    <h2 class="text-center section-title">{{ team_section_title|default:"Our Team" }}</h2>
    
    {% if departments %}
    <div class="text-center mb-5">
      <div class="btn-group" role="group" aria-label="Department filters">
        <button type="button" class="btn filter-btn active" data-filter="all">All</button>
        {% for department in departments %}
        <button type="button" class="btn filter-btn" data-filter="{{ department.slug }}">{{ department.name }}</button>
        {% endfor %}
      </div>
    </div>
    {% endif %}
    
    <div class="row">
      {% for member in team_members %}
      <div class="col-lg-4 col-md-6 team-member{% if member.department %} department-{{ member.department.slug }}{% endif %}">
        <div class="team-card">
          <div class="card-inner">
            <div class="card-front shadow">
              <div class="team-image">
                {% if member.image %}
                <img src="{{ member.image.url }}" alt="{{ member.name }}" class="img-fluid">
                {% else %}
                <img src="{% static 'images/placeholder.svg' %}" alt="{{ member.name }}" class="img-fluid">
                {% endif %}
              </div>
              <h3 class="h4 mb-2">{{ member.name }}</h3>
              <p class="position-text mb-3">{{ member.position }}</p>
            </div>
            <div class="card-back shadow">
              <p class="mb-4">{{ member.bio }}</p>
              <div class="social-links mt-auto">
                {% if member.linkedin_url %}
                <a href="{{ member.linkedin_url }}" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin"></i></a>
                {% endif %}
                
                {% if member.twitter_url %}
                <a href="{{ member.twitter_url }}" aria-label="Twitter" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>
                {% endif %}
                
                {% if member.github_url %}
                <a href="{{ member.github_url }}" aria-label="GitHub" target="_blank" rel="noopener noreferrer"><i class="fab fa-github"></i></a>
                {% endif %}
                
                {% if member.dribbble_url %}
                <a href="{{ member.dribbble_url }}" aria-label="Dribbble" target="_blank" rel="noopener noreferrer"><i class="fab fa-dribbble"></i></a>
                {% endif %}
                
                {% if member.email %}
                <a href="mailto:{{ member.email }}" aria-label="Email"><i class="fas fa-envelope"></i></a>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

<!-- Join Team Section - Unchanged -->
<section class="py-5">
  <div class="container">
    <div class="join-section text-center p-5">
      <h2 class="h2 mb-4">{{ join_section_title|default:"Join Our Team" }}</h2>
      <p class="lead mb-4">{{ join_section_text|default:"We're always looking for talented individuals to join our growing team." }}</p>
      <a href="{{ careers_url|default:'/careers' }}" class="btn btn-danger btn-lg">{{ join_button_text|default:"View Open Positions" }}</a>
    </div>
  </div>
</section>

{% endblock %}