{% extends "cuhasc/base.html" %}

{% block title %}Team "{{ team.name }}"{% endblock %}

{% block content %}
<h1>Team "{{ team.name }}"</h1>
<p><a href="{% url 'edit_team' team.id team.token %}">Change team name</a></p>
<p>
    Share this link with your team members. 
    Make sure they understand what they should do with it and why!
</p>
<a href="{{ member_url }}">{{ member_url }}</a>

{% if team_culture_profile_svg %}
<div class="mt-4">
    <h2>Team Culture Profile</h2>
    <label>
        <input type="checkbox" id="toggle-member-labels"> Show member names
    </label>
    <div id="team-plot">
        {{ team_culture_profile_svg }}
    </div>
</div>
<script>
    document.getElementById('toggle-member-labels').addEventListener('change', function () {
        const vis = this.checked ? 'visible' : 'hidden';
        document.querySelectorAll('#team-plot .member-label').forEach(function (el) {
            el.setAttribute('visibility', vis);
        });
    });
</script>
{% endif %}

{% if sections_by_chapter %}
<div class="mt-4">
    <h2>Handbook</h2>
    {% for chapter, sections in sections_by_chapter.items %}
    <h3>{{ chapter }}</h3>
    <ul>
        {% for section in sections %}
        <li><a href="{% url 'handbook_section' section.slug %}">{{ section.title }}</a></li>
        {% endfor %}
    </ul>
    {% endfor %}
</div>
{% endif %}
{% endblock %}