Christian Krakau-Louis
243 lines
10 KiB
HTML
243 lines
10 KiB
HTML
{% 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>
|
|
<p class="text-green-100 mb-1">{{ team.league.name if team.league else "Default League" }}</p>
|
|
<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 %}
|