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

{% block title %} Application {% endblock %}






{% block body %}
    {% include 'base/nav-bar.html' %}

    <script>
        function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
        }

        window.onclick = function (event) {
            if (!event.target.matches('.dropbtn')) {

                var dropdowns = document.getElementsByClassName("dropdown-content");
                var i;
                for (i = 0; i < dropdowns.length; i++) {
                    var openDropdown = dropdowns[i];
                    if (openDropdown.classList.contains('show')) {
                        openDropdown.classList.remove('show');
                    }
                }
            }
        }
    </script>
    <br>


    <div id="wrap">

        <div id="main">
            <!-- content goes here -->
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <h1 id="page-header">Applications</h1>
                    </div>
                    <div class="col-md-12 table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="thead-default">
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Batch</th>
                                <th>Date</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for object in object_list %}
                                <tr class="click"
                                    onclick="window.location='{% url 'join_detail' object.id %}';">
                                    <th scope="row">{{ object.name }}</th>
                                    <td>{{ object.email }}</td>
                                    <td>{{ object.batch }}</td>
                                    <td>{{ object.date }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                        <p class="text-muted">{{ count }} unapproved applications.</p>
                        <div class="buttons">
                            <div class="dropdown">
                                <button onclick="myFunction()" class="dropbtn"><i class="fa fa-calendar-o"></i> Year
                                    <span class="fa fa-caret-down"></span></button>
                                <div id="myDropdown" class="dropdown-content">
                                    <a href="#">Year</a>
                                    <span class="empty">&nbsp;</span>
                                    <a href="{% url 'join_list' %}?year=1">1st year</a>
                                    <a href="{% url 'join_list' %}?year=2">2nd year</a>


                                </div>
                            </div>
                            <a href="{% url 'join_list' %}?list=approved">
                                <button id="approve" class="btn btn-success card-link">Approved</button>
                            </a>
                            <a href="{% url 'join_list' %}?list=rejected">
                                <button id="reject" class="btn btn-danger card-link">Rejected</button>
                            </a>
                            <a href="{% url 'join_mail_all' %}">
                                <button class="btn btn-primary card-link">Mail all</button>
                            </a>


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

{% block css %}

    <style>
        #page-header {
            margin: 30px;
            text-align: center;
        }

        .container-fluid {
            margin: 0 6%;
        }

        .click {
            cursor: pointer;
        }

        .buttons {
            margin-left: 800px;
        }

        body {
            font-family: Tahoma, Geneva, sans-serif;
            font-size: 14px;
        }

        .dropbtn {
            padding: 10px 16px;
            font-size: 13px;
            border: none;
            cursor: pointer;
            border-radius: 3px;
            outline: none;
            font-family: inherit;
            color: #ffffff;
            background-color: #337ab7;
            border-color: #2e6da4;
        }

        .dropbtn:hover, .dropbtn:focus {
            color: #ffffff;
            background-color: #286090;
            border-color: #204d74;
        }

        .dropdown {
            position: inherit;
            display: inline-block;
            margin-left: 0px;

        }

        .dropdown-content {
            display: none;
            position: inherit;
            background-color: #f9f9f9;
            min-width: 160px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            border: 1px solid #DCDCDC;
            border-radius: 4px;
        }

        .dropdown-content a {
            color: #424242;
            padding: 6px 16px;
            text-decoration: none;
            display: block;
        }

        .empty {
            display: block;
            border-bottom: 1px solid #ccc;
            padding: 0;
            line-height: 0;
        }

        .dropdown a:hover {
            background-color: #f1f1f1
        }

        .show {
            display: block;
        }

    </style>
{% endblock %}