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

{% block body %}
    {% include 'base/nav-bar.html' %}
    <div id="wrap">
        <div id="main">
            <div class="container">
                <h2 class="header">{{ head }}</h2>
                <div class="row form">
                {% csrf_token %}
                    {% for att in attendance_list %}
                        <div class="col-xs-6 col-sm-4 col-md-2 btn names {% if att.attendance %}btn-success{% else %}btn-danger{% endif %}"
                             id="{{ att.user.username }}_div" style="white-space: normal">
                            <p class="link">{{ att.user.first_name }} {{ att.user.last_name }}</p>
                        </div>
                    {% endfor %}
                    <p class="col-xs-12 col-md-12"></p>
                </div>
            </div>
        </div>
    </div>

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

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

        .save-btn {
            padding: 10px 0;
        }

        .names {
            height: 80px;
        }



        .form {
            margin: 30px 0;
        }
        .header {
            padding-top: 20px;
            text-align: center;
        }

        .link {
            height: 100%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
{% endblock %}