{% extends 'main/base.html' %} 
{% load static %}

{% block scripts %}
<script src="{% static 'course/course_info.js' %}" defer></script>
{% endblock scripts %}

{% block title %} 
{{each_one.course_name}} 
{% endblock %}

{% load humanize %} 
{% block content %} 

<!-- Modal -->
<div class="modal fade" id="questionBankStartModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Activate?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="noti-form">
                {% csrf_token %}
                <div class="modal-body" id="modal-body-confirm"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
                    <button type="submit" id="start-button" class="btn btn-success">Yes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="container">
    <div class="row mb-5 fields mt-5">
        <div class="col-md-6">
            <section id="bc">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            {% if request.user.userprofile.student_id == "" and request.user.userprofile.instructor_id != "" %}
                            <a href="{% url 'main:home' %}">Instructor Home</a>
                            {% elif request.user.userprofile.instructor_id == "" and request.user.userprofile.student_id != "" %}
                            <a href="{% url 'main:home' %}">Student Home</a>
                            {% else %}
                            <a href="{% url 'main:home' %}">TA Home</a>
                            {% endif %}
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">
                            {{each_one.course_name}}
                        </li>
                    </ol>
                </nav>
            </section>
                        <ul class="list-group list-group-flush mt-5">
                            <h3 class="text-info">Course Info</h3>
                            <li class="list-group-item text-secondary">
                                Course Instructors:
                                <span class="float-right">{{instructors}}</span>
                            </li>
                            <li class="list-group-item text-secondary">
                                Course Student:
                                <span class="float-right">{{students}}</span>
                            </li>
                            <li class="list-group-item text-secondary">
                                Course Name:
                                <span class="float-right"
                                    >{{each_one.course_name}}</span
                                >
                            </li>
                            <li class="list-group-item text-secondary">
                                Description:
                                <span class="float-right"
                                    >{{each_one.description}}
                                </span>
                            </li>
                        </ul>

                        <div class="pt-4">
                            <!-- instructor -->
                            {% if request.user.userprofile.student_id == "" and request.user.userprofile.instructor_id != "" %}
                            <a
                                href="{% url 'course:course_edit' each_one.course_id %}"
                                class="btn btn-secondary float-left px-4"
                                >Update</a>
                            <a
                                href="{% url 'course:course_delete' each_one.course_id %}"
                                class="btn btn-danger float-right px-4"
                                >Delete</a>
                            <!-- student -->
                            {% elif request.user.userprofile.instructor_id == "" and request.user.userprofile.student_id != "" %}
                            <a
                                href="{% url 'course:course_register' each_one.course_id %}"
                                class="btn btn-secondary float-right px-4"
                                >Register for a course</a>
                            <!-- instructor and student -->
                            {% else %}
                            <a
                                href="{% url 'course:course_edit' each_one.course_id %}"
                                class="btn btn-secondary float-left px-4"
                                >Update</a>
                            <a
                                href="{% url 'course:course_delete' each_one.course_id %}"
                                class="btn btn-danger float-right px-4"
                                >Delete</a>
                            <a
                                href="{% url 'course:course_register' each_one.course_id %}"
                                class="btn btn-secondary float-right px-4"
                                >Register for a course</a>
                            {% endif %}
                        </div>
        </div>
		<div class="col-md-6">

			<h4 class="text-info mb-0">Available Question Banks</h4>
            <p class="text-muted mb-3">These question banks will appear in your homepage once activated.</p>
            {% for qb in open_qbs %}
            <hr />
            <button
                class="btn btn btn-link modal-button"
                data-pk="{{qb.question_bank_id}}"
                data-question-bank="{{qb.topic}}"
                data-num-attempts="{{qb.number_of_attempts}}"
                data-start-date="{{qb.start_date}}"
                data-end-date="{{qb.end_date}}"
                data-frequency="{{qb.frequency}}"
                data-toggle="modal" 
                data-target="#questionBankStartModal">{{qb.topic}}
            </button><br>
            {% endfor %}

            {% if upcoming_qbs %}
            <h5 class="text-muted mb-0 mt-3">Upcoming Question Banks</h5>
            <p class="text-muted mb-3">These question banks will appear in your homepage inactive until their open dates.</p>
            {% for qb in upcoming_qbs %}
            <hr />
            <button
                class="btn btn btn-link modal-button"
                data-pk="{{qb.question_bank_id}}"
                data-question-bank="{{qb.topic}}"
                data-num-attempts="{{qb.number_of_attempts}}"
                data-start-date="{{qb.start_date}}"
                data-end-date="{{qb.end_date}}"
                data-frequency="{{qb.frequency}}"
                data-toggle="modal" 
                data-target="#questionBankStartModal">{{qb.topic}}
            </button><br>
            {% endfor %}
            {% endif %}

			<hr>
		</div>
    </div>
</div>

{% endblock %}