{% extends "base_generic.html" %}

{% block header %}
<style>
::-webkit-scrollbar {
    width: 11px;
}
  
/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px lightgrey; 
    border-radius: 25px;
}
  
/* Handle */
::-webkit-scrollbar-thumb {
    background: lightgrey; 
    border-radius: 15px;
}
.settings {
    top: 40%;
    height: 60%;
}
.footer {
    display: none;
}
.addUser {
    color: white;
    width: 10%;
    height: 35%;
    background-color: grey;
    margin: 1px;
    padding: 2px;
    font-size: 20px;
    border-radius: 10px;
}

.back {
    position: abosolute;
    left: .75%;
    top: 35%;
    height: 50px;
    float: left;
    text-align: center;
    padding: 10px;
}
.back a {
    text-decoration: none;
    color: white;
}
.settings {
    position: abosolute;
    right: .75%;
    top: 35%;
    height: 50px;
    float: right;
    text-align: center;
    padding: 10px;
}
.settings a {
    text-decoration: none;
    color: white;
}
.signup {
    position: abosolute;
    left: .75%;
    top: 35%;
    height: 50px;
    float: right;
    text-align: center;
    padding: .5%;
}
.signup a {
    text-decoration: none;
    color: white;
}

.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: center;
    overflow-y: auto;
}

.class {
    width: 46%;
    margin: 2%;
    float: left;
}
.exercises {
    width: 100%;
    background-color: black;
    overflow-y: auto;
    height: 270px;
    color: white;
    border-radius: 30px;
}
.exercise {
    float: left;
    width: 100%;
    margin: 1% 0;
    padding: 2%;
    border-color: white;
    border-width: 1px;
    border-style: solid;
    border-radius: 30px;
}
.btn {
    color: white;
    width: 27%;
    height: 40px;
    background-color: grey;
    opacity: .7;
    margin: auto;
    padding: auto;
}
.edit {
    margin: 5px;
}

</style>


{% if user.is_authenticated and user.is_superuser %}
{{ request.user.username }}'s Classes
<a href="{% url 'logout' %}">
    <div class="addUser back">Logout</div>
</a>
<a href="{% url 'classes' %}">
    <div class="addUser signup">Manage Classes</div>
</a>
<a href="{% url 'exercises' %}">
    <div class="addUser signup">Manage Exercises</div>
</a>
<a href="{% url 'students' %}">
    <div class="addUser signup">Manage Users</div>
</a>
<a href="{% url 'signupAdmin' %}">
    <div class="addUser signup">Create Admin</div>
</a>
<a href="{% url 'settings' setting.pk %}">
    <div class="addUser signup">Site Settings</div>
</a>

{% else %}
  <p>You are not logged in: <a href="{% url 'login' %}">login</a></p>
{% endif %}
{% endblock %}


{% block body %}
{% if user.is_authenticated and user.is_superuser %}
<div class="form-background">
    {% for class in classes %}
    <div class="class">
        <div>
            <h2>{{ class.name }}</h2>
            <a href="{% url 'classes_update' class.pk %}"><button type="submit" class="btn edit">Edit Class</button></a>
            <a href="{% url 'gradebook' class.pk %}"><button type="submit" class="btn edit">Gradebook</button></a>
            <a href="{% url 'gradebook_email' class.pk %}"><button type="submit" class="btn edit">Email Grades</button></a>
        </div>
        <div class="exercises">
            {% for exercise in class.exercises.all %}
                <div class="exercise">
                    <h3>{{exercise.name}}</h3>
                    <form method="POST" action="{% url 'submission_details' class.pk exercise.pk %}">
                        {% csrf_token %}
                        <button class="btn">Submissions</button>
                    </form>
                    <a href="{% url 'exercises_update' exercise.pk %}"><button type="submit" class="btn">Edit</button></a>
                </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}
{% endblock %}