{% 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 %}