{% extends "base.html" %}
{% block content %}
<div class="max-w-4xl">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;">
<div>
<h1 style="margin:0;">{{ team.name }}</h1>
<p class="text-muted" style="margin:0.25rem 0 0;">
<span class="badge">{{ role }}</span>
<span class="badge badge-secondary">{{ team.tier }}</span>
</p>
</div>
<div style="display:flex;gap:0.5rem;">
<a href="{{ url_for('teams.team_analytics', team_id=team.id) }}" class="btn btn-outline btn-sm">📊 Analytics</a>
<a href="{{ url_for('teams.list_teams') }}" class="btn btn-outline btn-sm">← Back</a>
{% if role == 'owner' %}
<button data-onclick="confirmDelete()" class="btn btn-sm btn-danger">Delete Team</button>
{% endif %}
</div>
</div>
<!-- Invite Member -->
{% if role in ('owner', 'admin') %}
<div class="card" style="margin-bottom:1.5rem;">
<h2>Invite Member</h2>
<form method="POST" action="{{ url_for('teams.invite_member', team_id=team.id) }}" style="display:flex;gap:0.5rem;margin-top:0.75rem;">
<input type="email" name="email" class="form-control" placeholder="colleague@example.com" required style="flex:1;">
<select name="role" class="form-control" style="width:auto;">
<option value="member">Member</option>
<option value="viewer">Viewer</option>
{% if role == 'owner' %}
<option value="admin">Admin</option>
{% endif %}
</select>
<button type="submit" class="btn">Invite</button>
</form>
</div>
{% endif %}
<!-- Members -->
<div class="card" style="margin-bottom:1.5rem;">
<h2>Members</h2>
<div style="margin-top:0.75rem;">
{% for member in members %}
<div style="display:flex;justify-content:space-between;align-items:center;padding:0.75rem 0;
{% if not loop.last %}border-bottom:1px solid var(--border);{% endif %}">
<div>
<strong>{{ member.name or member.invited_email or 'Pending' }}</strong>
{% if member.email %}<span class="text-muted"> ({{ member.email }})</span>{% endif %}
<span class="badge">{{ member.role }}</span>
{% if member.status == 'pending' %}<span class="badge badge-warning">Pending</span>{% endif %}
</div>
{% if role in ('owner', 'admin') and member.role != 'owner' and member.status == 'active' %}
<div style="display:flex;gap:0.25rem;">
<form method="POST" action="{{ url_for('teams.update_member_role', team_id=team.id, member_id=member.id) }}" style="display:inline;">
<select name="role" class="form-control" style="width:auto;padding:0.25rem 0.5rem;" data-onchange="this.form.submit()">
<option value="member" {% if member.role == 'member' %}selected{% endif %}>Member</option>
<option value="viewer" {% if member.role == 'viewer' %}selected{% endif %}>Viewer</option>
{% if role == 'owner' %}
<option value="admin" {% if member.role == 'admin' %}selected{% endif %}>Admin</option>
{% endif %}
</select>
</form>
<form method="POST" action="{{ url_for('teams.remove_member', team_id=team.id, member_id=member.id) }}">
<button class="btn btn-sm btn-danger" data-onclick="return confirm('Remove {{ member.name or member.invited_email }}?')">Remove</button>
</form>
</div>
{% endif %}
</div>
{% endfor %}
</div>
</div>
<!-- Team Sites -->
<div class="card" style="margin-bottom:1.5rem;">
<div style="display:flex;justify-content:space-between;align-items:center;">
<h2>Team Sites ({{ team_site_count }})</h2>
{% if role != 'viewer' %}
<a href="{{ url_for('user_sites.new_site') }}" class="btn btn-sm">+ New Site</a>
{% endif %}
</div>
{% if team_sites %}
<div style="margin-top:0.75rem;">
{% for site in team_sites %}
<div style="display:flex;justify-content:space-between;align-items:center;padding:0.75rem 0;
{% if not loop.last %}border-bottom:1px solid var(--border);{% endif %}">
<div>
<strong>{{ site.name }}</strong>
<span class="text-muted"> — {{ site.token }}</span>
</div>
<div style="display:flex;gap:0.25rem;">
<a href="{{ url_for('user_sites.view_submissions', site_id=site.id) }}" class="btn btn-sm btn-outline">Submissions</a>
<a href="{{ url_for('user_sites.site_analytics_view', site_id=site.id) }}" class="btn btn-sm btn-outline">Analytics</a>
<a href="{{ url_for('user_sites.edit_site', site_id=site.id) }}" class="btn btn-sm btn-outline">Settings</a>
</div>
</div>
{% endfor %}
</div>
{% else %}
<p class="text-muted" style="margin-top:0.75rem;">No team sites yet.</p>
{% endif %}
</div>
<!-- Team Billing -->
<div class="card">
<h2>Team Billing</h2>
<p class="text-muted">Current tier: <strong>{{ team.tier }}</strong></p>
{% if role == 'owner' %}
<div style="margin-top:0.75rem;">
{% if team.tier == 'teams' %}
<a href="{{ url_for('billing.upgrade', target='teams_plus') }}" class="btn btn-sm">Upgrade to Teams Plus ($99/mo)</a>
{% elif not team.stripe_subscription_id %}
<a href="{{ url_for('billing.upgrade', target='teams') }}" class="btn btn-sm">Subscribe to Teams ($49/mo)</a>
{% else %}
<span class="badge">Active Subscription</span>
{% endif %}
</div>
{% endif %}
</div>
</div>
<!-- Delete confirmation modal -->
<div id="deleteModal" class="modal" style="display:none;">
<div class="modal-content">
<h2>Delete Team</h2>
<p>This will delete the team and remove all members. Team sites will become personal sites.</p>
<div style="display:flex;gap:0.5rem;margin-top:1rem;">
<form method="POST" action="{{ url_for('teams.delete_team_view', team_id=team.id) }}">
<button class="btn btn-danger">Delete</button>
</form>
<button class="btn btn-outline" data-onclick="document.getElementById('deleteModal').style.display='none'">Cancel</button>
</div>
</div>
</div>
<script src="/static/js/teams-manage-inline.js"></script>
{% endblock %}