{% extends "base_generic.html" %}
{% block header %}
<style>
.form-background {
    width: 90%;
    height: 960px;
    margin: 5%;
    padding: 10px;
    background-color: whitesmoke;
    border-radius: 30px;
    border-width: 3px;
    border-style: solid;
    border-color: grey;
    text-align: left;
    overflow-y: auto;
}
.addUser {
    color: white;
    width: 10%;
    height: 35%;
    background-color: grey;
    margin: 1px;
    padding: 2px;
    opacity: .7;
    font-size: 20px;
    border-radius: 10px;
}
.back {
    position: abosolute;
    left: .75%;
    top: 35%;
    height: 50px;
    float: left;
    text-align: center;
    padding: 10px;
}
.class {
    text-align: left;
    margin: 50px 50px;
    clear: both;
}
.class h2 {
    font-size: 40px;
    float: left;
    width: 40%;
    text-align: center;
}
.btn {
    border-style: solid;
    border-color: black;
    border-width: 3%;
    padding: 1%;
    margin: 0 1%;
    background-color: grey;
    float: left;
}
.btn a {
    color: white;
    text-decoration: none;
    font-size: 28px;
}
.grades {
    width: 100%;
    border-collapse: collapse;
}
.grades, th, td {
    border: 1px solid black;
}
</style>
{{classes.name}}'s Gradebook
{% endblock %}


{% block body %}
<script type="text/javascript">
$("document").ready(function(){
    $('.grades td').each(function () {
        if ($(this).text() == '1') {
            $(this).css("background-color","green");
        }
    });
    $('.grades td:contains(0)').css("background-color","red");
    $('.grades tr:last').children().css("background-color","white");
});
</script>

<div class="form-background">
    <p>{{email_description}}</p>
    <table class="grades">
    {% for grade in grades %}
    <tr>
        {% for entry in grade%}
            <td>{{entry}}</td>
        {% endfor %}
    </tr>
    {% endfor %}
    </table>
</div>
{% endblock %}