{% extends 'base/base.html' %}
{% load static %}
{% block title %} Attendance {% endblock %}

{% block body %}
    {% include 'base/nav-bar.html' %}
    <div id="wrap">
        <div id="main">
            <div class="container">
                <h1 style="text-align: center; margin: 20px;">{{ head }}</h1>
                <div class="row form">
                    {% for data in data_list %}
                        <h2 class="header col-md-12 col-xs-12">{{ data.1 }}</h2>
                        <h3 class="col-md-12 col-xs-12">{{ data.2 }}</h3>
                        {% for user_info in data.0 %}

                            <div class="col-xs-6 col-sm-4 col-md-2 btn names btn-success" style="white-space: normal">
                                <a class="link" href="{% url 'attendance_report_year' head user_info.0.id %}">
                                    {{ user_info.0.first_name }} {{ user_info.0.last_name }} - {{ user_info.3 }}%
                                </a>
                            </div>

                        {% endfor %}
                    {% endfor %}
                    <p class="col-xs-12 col-md-12"></p>
                </div>
            </div>
        </div>
    </div>

    {% include 'base/footer.html' %}

    <style>
        .btn {
            margin: 10px;
        }

        .header {
            padding-top: 20px;
            text-align: center;
        }

        .names {
            height: 80px;
        }

        .names p {
            margin: 16px 0;
        }

        .form {
            margin: 30px 0;
        }

        .link {
            height: 100%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .link:hover {
            color: black;
        }
    </style>
{% endblock %}