{% extends 'base/base.html' %}

{% block title %} {{ object.name }} {% endblock %}

{% load static %}

{% block script %}
    <!-- Latest compiled and minified JavaScript -->
{% endblock %}

{% block body %}
    {% include 'base/nav-bar.html' %}
    <div id="wrap">
        <div id="main">
            <!-- content goes here -->

            <div class="container">
                <div class="row">

                    <div class="col-md-8">
                        <h3>Team details</h3>
                        <div class="card mb-3">
                            <img class="card-img-top img-fluid" src="/static/media/{{ object.image }}">
                            <div class="card-block">
                                <h4 class="card-title">{{ object.name }}</h4>
                                <p class="card-text">{{ object.description }}</p>
                                <p class="card-text">
                                    <small class="text-muted">
                                        Added by : {{ object.created_by.first_name }} {{ object.created_by.last_name }}
                                    </small>
                                </p>
                                {% if edit_permission %}
                                    <a href="{% url 'team_update' object.id %}">
                                        <button type="submit" class="btn btn-primary add-btn">Update</button>
                                    </a>
                                    <a href="{% url 'team_delete' object.id %}">
                                        <button type="submit" class="btn btn-danger add-btn">Delete</button>
                                    </a>
                                {% endif %}
                            </div>
                        </div>

                        <div class="card student-form" id="student-form" style="display: none">
                            <div class="card-block">
                                <form class="form-group col-md-6" action="" method="post">
                                    {% csrf_token %}
                                    <div class="dropdown">
                                        <input id="search" onkeyup="myFunction()" class="form-control"
                                               data-toggle="dropdown" placeholder="Search..." autocomplete="off">
                                        <input type="hidden" id="search-id" name="user_id">
                                        <div class="dropdown-menu" id="search-results">
                                            {% for user in all_users %}
                                                <p onclick="addText({{ user.id }}, '{{ user.first_name }} {{ user.last_name }}')"
                                                   class="dropdown-item">{{ user.first_name }} {{ user.last_name }}</p>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <small id="emailHelp" class="form-text text-muted">Search for a student above.
                                    </small>
                                    <button type="submit" class="btn btn-secondary add-btn">Add</button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <ul class="list-group col-md-4">
                        <div class="margin-20"></div>
                        <li class="list-group-item justify-content-between">
                            <h5>Team members</h5>
                            <span class="badge badge-default badge-pill">{{ user_count }}</span>
                        </li>
                        {% for resp in responsibility_list %}
                            <li class="list-group-item justify-content-between">
                                <a class="link" href="{% url 'profile' resp.user.id %}">
                                    {{ resp.user.first_name }} {{ resp.user.last_name }}
                                </a>
                                <form method="post" action="{% url "team_member_delete" resp.id %}">
                                    {% csrf_token %}
                                    <button type="submit" class="close">×</button>
                                </form>
                            </li>
                        {% endfor %}
                        {% if edit_permission %}
                            <div onclick="showForm()" class="col-md-6 offset-md-3">
                                <button class="btn btn-secondary add-btn">
                                    Add student
                                </button>
                            </div>
                        {% endif %}
                    </ul>

                </div>
            </div>

        </div>
    </div>
    {% include 'base/footer.html' %}

    <style>
        .container {
            margin-top: 50px;
        }

        .add-btn {
            margin-top: 20px;
        }

        .margin-20 {
            margin: 24px;
        }

        .link {
            text-decoration: none !important;
            color: black;
        }

    </style>

    <script>
        function showForm() {
            var form = document.getElementById('student-form');
            if (form.style.display === 'none') {
                form.style.display = 'block';
            }
            else {
                form.style.display = 'none';
            }
        }

        function myFunction() {
            // Declare variables
            var input, filter, items, i;
            input = document.getElementById('search');
            filter = input.value.toUpperCase();
            items = document.getElementsByClassName('dropdown-item');

            // Loop through all list items, and hide those who don't match the search query
            for (i = 0; i < items.length; i++) {
                if (items[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    items[i].style.display = "";
                } else {
                    items[i].style.display = "none";
                }
            }
        }

        function addText(id, name) {
            var inp1 = document.getElementById('search');
            var inp2 = document.getElementById('search-id');
            inp1.value = name;
            inp2.value = id;
        }
    </script>
{% endblock %}