{% extends "base/base.html" %}
{% comment %}
    SPDX-License-Identifier: AGPL-3.0-or-later
    Copyright (C) 2022 Brennen Chiu
    Copyright (C) 2023-2026 Colin B. Macdonald
    Copyright (C) 2024 Aden Chan
    Copyright (C) 2025 Bryan Tanady
    Copyright (C) 2025 Aidan Murphy
{% endcomment %}
{% load static %}
{% block title %}
    Profile - {{ user.username }}
{% endblock title %}
{% block page_heading %}
    Profile - {{ user.username }}
{% endblock page_heading %}
{% block main_content %}
    <div class="container">
        <div class="row d-flex justify-content-left align-items-center h-100">
            <div id="profile-card" class="col-4">
                <div class="card">
                    <div class="card-body text-center">
                        <div class="mt-3 mb-4">
                            <img src="{% static 'defaultUserIcon.png' %}"
                                 class="rounded-circle img-fluid"
                                 style="width: 100px" />
                        </div>
                        <!-- we use django.contrib.auth's first_name field; last_name unused -->
                        <h3 class="mb-2">{{ user.first_name }}</h3>
                        <p class="mb-2">{{ user.username }}</p>
                        <p class="text-muted mb-4">
                            Groups: {{ user_groups }}
                            <span class="mx-2">|</span>
                            <a href="mailto:{{ user.email }}">{{ user.email }}</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-8 align-self-start">
                <div class="card mb-4">
                    <div class="card-body">
                        <a href="{% url 'progress_marking_task_filter' %}?username={{ user.username }}">marking tasks</a>
                    </div>
                </div>
                <div class="card">
                    <h6 class="card-header">User groups:</h6>
                    <div class="card-body">
                        <form method="post" action="{% url 'profile' user.username %}">
                            {% csrf_token %}
                            <fieldset>
                                {% for g in all_groups %}
                                    <div class="form-check">
                                        <!-- autocomplete means the buttons reset on ctrl-R, perhaps Firefox-specific -->
                                        <input class="form-check-input"
                                               type="checkbox"
                                               id="{{ g.name }}"
                                               name="{{ g.name }}"
                                               autocomplete="off"
                                               {% if g.checked %}checked{% endif %}
                                               {% if g.disabled %}disabled{% endif %} />
                                        <label class="form-check-label" for="{{ g.name }}">{{ g.label }}</label>
                                    </div>
                                {% endfor %}
                                <p>
                                    <small class="text-muted">
                                        (Some choices imply others; read more about
                                        <a href="https://plom.readthedocs.io/en/latest/marking.html#permissions-and-lead-markers">user groups in Plom&apos;s documentation</a>.)
                                    </small>
                                </p>
                            </fieldset>
                            <button type="submit"
                                    class="btn btn-secondary"
                                    name="todo_needed_or_not">Change groups</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock main_content %}