{% extends "base.html" %}
{% load static %}
{% load has_group %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-6">
        <div class="card">
            <div class="card-header">
                <h4 class=" ">Link trainer to you</h4>
            </div>
            <div class="card-body">
                    {% for trainer in trainers_list %}
                        {% if trainer != gymnast.user %}
                            <div class="form-group row mb-0">
                                <div class="col-md-8 ml-3">
                                    {{ trainer.first_name }} {{ trainer.last_name }}
                                </div>
                                <div class="col-md-3">
                                    <input type="checkbox" name="checkbox" class="trainer_check" data-trainer="{{ trainer.id }}" {% if trainer.id in already_linked %}checked{% endif %}/>
                                </div>
                                <hr />
                            </div>
                        {% endif %}
                    {% endfor %}
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    $(document).ready(function() {

        $('.trainer_check').change(function() {
            if(this.checked) {
                $.ajax({
                    url: "{% url 'link_trainer_to_gymnast' gymnast.id %}",
                    method: "POST",
                    data: {
                        trainer_id: $(this).data("trainer"),
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function(data) {
                    }
                });
            } else {
                $.ajax({
                    url: "{% url 'unlink_trainer_to_gymnast' gymnast.id %}",
                    method: "POST",
                    data: {
                        trainer_id: $(this).data("trainer"),
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function(data) {
                    }
                });
            }
        });

    });
</script>
{% endblock %}