{% extends "base.html" %}
{% block content %}
<div class="max-w-4xl mx-auto space-y-6">
  <!-- Team Header -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="bg-irish-green p-6">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-4 md:mb-0">
          <h1 class="text-2xl md:text-3xl font-bold text-white">{{ team.name }}</h1>
          <div class="flex items-center space-x-2 text-green-100">
            <span><i class="fas fa-trophy mr-1"></i> Rank #{{ team_rank }}</span>
            <span class="hidden md:inline">•</span>
            <span><i class="fas fa-star mr-1"></i> {{ total_points }} Points</span>
            <span class="hidden md:inline">•</span>
            <span><i class="fas fa-users mr-1"></i> {{ team_members|length }} Members</span>
          </div>
        </div>
        <div>
          {% if not user %}
            <a href="/auth/login?next=/teams/{{ team.id }}" class="bg-white text-irish-green font-medium py-2 px-4 rounded-md hover:bg-opacity-90">
              Login to Join
            </a>
          {% elif not is_team_member %}
            <div class="my-4 p-4 bg-gray-100 rounded">
              <h3 class="text-xl font-semibold mb-2">Join This Team</h3>
              
              {% if is_open %}
                <p class="mb-3">This is an open team. You can join immediately.</p>
                <form action="/teams/join/{{ team.id }}" method="post">
                  <button type="submit" class="bg-irish-green text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition">
                    Join Team
                  </button>
                </form>
              {% else %}
                <p class="mb-3">This is a closed team. You need to request to join and be approved by a team captain.</p>
                <a href="/teams/{{ team.id }}/join" class="inline-block bg-irish-green text-white py-2 px-6 rounded-md hover:bg-opacity-90 transition">
                  Request to Join
                </a>
              {% endif %}
            </div>
          {% else %}
            <button class="bg-white text-irish-green font-medium py-2 px-4 rounded-md hover:bg-opacity-90">
              <i class="fas fa-share-alt mr-1"></i> Share Team
            </button>
          {% endif %}
        </div>
      </div>
    </div>
    
    <!-- Team Stats -->
    <div class="p-6">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <h3 class="text-sm font-medium text-gray-500 mb-1">POINTS THIS MONTH</h3>
          <p class="text-2xl font-bold">{{ points_this_month }}</p>
          <p class="text-sm {% if point_change_positive %}text-green-600{% else %}text-red-600{% endif %}">
            <i class="fas {% if point_change_positive %}fa-arrow-up{% else %}fa-arrow-down{% endif %} mr-1"></i> 
            {{ point_change|abs }} from last month
          </p>
        </div>
        <div>
          <h3 class="text-sm font-medium text-gray-500 mb-1">BEST PERFORMANCE</h3>
          <p class="text-2xl font-bold">1st Place</p>
          <p class="text-sm text-gray-600">August 12, 2023</p>
        </div>
        <div>
          <h3 class="text-sm font-medium text-gray-500 mb-1">TEAM FOUNDED</h3>
          <p class="text-2xl font-bold">{{ days_ago }} days ago</p>
          <p class="text-sm text-gray-600">{{ founded_date }}</p>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Team Members & Performance -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Team Members -->
    <div class="bg-white rounded-lg shadow-md p-6">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-semibold text-irish-green">Team Members</h2>
        <button class="text-irish-green hover:text-opacity-80">
          <i class="fas fa-user-plus"></i> Invite
        </button>
      </div>
      
      <div class="space-y-4">
        {% for member in team_members %}
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <div class="w-10 h-10 rounded-full bg-gray-200 mr-3 overflow-hidden">
              {% if member.user.picture %}
              <img src="{{ member.user.picture }}" alt="User" class="w-full h-full object-cover">
              {% else %}
              <div class="w-full h-full bg-irish-green flex items-center justify-center text-white text-sm">
                {{ member.user.username[0]|upper }}
              </div>
              {% endif %}
            </div>
            <div>
              <p class="font-medium">
                <a href="/auth/user/{{ member.user.id }}" class="hover:text-irish-green">{{ member.user.username }}</a>
              </p>
              <p class="text-xs text-gray-500">Joined {{ member.joined }}</p>
            </div>
          </div>
          {% if member.is_admin %}
          <span class="bg-golden-ale text-black-stout text-xs px-2 py-1 rounded-full">Captain</span>
          {% else %}
          <span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">Member</span>
          {% endif %}
        </div>
        {% endfor %}
      </div>
    </div>
    
    <!-- Performance Chart -->
    <div class="bg-white rounded-lg shadow-md p-6">
      <h2 class="text-xl font-semibold text-irish-green mb-4">Team Performance</h2>
      
      <!-- Placeholder for a chart - in real app, use Chart.js or similar -->
      <div class="bg-gray-100 p-4 rounded-lg h-64 flex items-center justify-center">
        <div class="text-center">
          <i class="fas fa-chart-line text-5xl text-irish-green mb-2"></i>
          <p class="text-gray-500">Performance chart would appear here</p>
        </div>
      </div>
      
      <div class="mt-4 space-y-3">
        <div class="flex justify-between items-center">
          <p>Last quiz night</p>
          <p class="font-medium">{{ performance.last_quiz }}</p>
        </div>
        <div class="flex justify-between items-center">
          <p>Average per quiz</p>
          <p class="font-medium">{{ performance.average }}</p>
        </div>
        <div class="flex justify-between items-center">
          <p>Best streak</p>
          <p class="font-medium">{{ performance.best_streak }}</p>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Recent Activity -->
  <div class="bg-white rounded-lg shadow-md p-6">
    <h2 class="text-xl font-semibold text-irish-green mb-4">Recent Activity</h2>
    
    <div class="space-y-4">
      {% for activity in activities %}
        {% if activity.type == 'points' %}
        <div class="flex items-start">
          <div class="bg-green-100 p-2 rounded-full mr-3">
            <i class="fas fa-trophy text-irish-green"></i>
          </div>
          <div>
            <p class="font-medium">Earned {{ activity.points }} points in "{{ activity.event }}"</p>
            <p class="text-sm text-gray-600">{{ activity.date }}</p>
          </div>
        </div>
        {% elif activity.type == 'join' %}
        <div class="flex items-start">
          <div class="bg-blue-100 p-2 rounded-full mr-3">
            <i class="fas fa-user-plus text-blue-700"></i>
          </div>
          <div>
            <p class="font-medium">{{ activity.user }} joined the team</p>
            <p class="text-sm text-gray-600">{{ activity.date }}</p>
          </div>
        </div>
        {% elif activity.type == 'achievement' %}
        <div class="flex items-start">
          <div class="bg-golden-ale bg-opacity-20 p-2 rounded-full mr-3">
            <i class="fas fa-medal text-golden-ale"></i>
          </div>
          <div>
            <p class="font-medium">Achieved {{ activity.achievement }} in "{{ activity.event }}"</p>
            <p class="text-sm text-gray-600">{{ activity.date }}</p>
          </div>
        </div>
        {% endif %}
      {% endfor %}
    </div>
    
    <div class="mt-6 text-center">
      <a href="#" class="text-irish-green hover:underline">View Full History</a>
    </div>
  </div>
  
  <!-- Team Management -->
  {% if is_user_admin %}
  <div class="bg-white rounded-lg shadow-md p-6">
    <h2 class="text-xl font-semibold text-irish-green mb-4">Team Management</h2>
    
    <div class="space-y-6">
      {% if is_user_owner %}
        <div class="bg-irish-green bg-opacity-10 p-3 rounded-md mb-4">
          <p class="text-irish-green font-medium">You are the owner of this team</p>
        </div>
      {% elif is_user_admin %}
        <div class="bg-golden-ale bg-opacity-10 p-3 rounded-md mb-4">
          <p class="text-golden-ale font-medium">You are an admin of this team</p>
        </div>
      {% endif %}
      
      <form action="/teams/{{ team.id }}/update" method="post">
        <div class="mb-4">
          <label for="team_name" class="block text-sm font-medium text-gray-700 mb-2">Team Name</label>
          <div class="flex">
            <input type="text" id="team_name" name="team_name" value="{{ team.name }}" class="flex-grow border border-gray-300 rounded-l-md px-3 py-2">
            <button type="submit" class="bg-irish-green text-white px-4 py-2 rounded-r-md">Save</button>
          </div>
        </div>
        
        <div class="mb-4">
          <label class="block text-sm font-medium text-gray-700 mb-2">Team Privacy</label>
          <div class="flex items-center">
            <input type="checkbox" id="is_public" name="is_public" class="mr-2" 
                  {% if team.is_public %}checked{% endif %}>
            <label for="is_public">Make team publicly joinable (no invitation needed)</label>
          </div>
        </div>
      </form>
    </div>
  </div>
  {% endif %}
  
  <!-- Leave team option - only for members -->
  {% if is_team_member and not is_user_owner %}
  <div class="bg-white rounded-lg shadow-md p-6 mt-6">
    <h2 class="text-xl font-semibold text-irish-green mb-4">Team Membership</h2>
    <p class="mb-4">You are currently a member of this team.</p>
    <form action="/teams/{{ team.id }}/leave" method="post">
      <button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md">
        Leave Team
      </button>
    </form>
  </div>
  {% endif %}
</div>
{% endblock %}
