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

{% block scripts %}
    <script src="{% static 'main/home.js' %}" defer></script>
    <link rel="stylesheet" href="../../static/css/home.css">
{% endblock scripts %}

{% block title %}
Home
{% endblock %} 

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

<section class="d-flex justify-content-between m-4">
    <section>
        <div class="d-flex flex-wrap">
            {% if courses %}
            {% for each in courses %}
                <div class="card course-card m-3">
                    <img
                        src="../../static/cardImage.jpg"
                        alt="..."
                        style="height:40%"
                    />
                    <div class="card-body">
                        <a class="card-title stretched-link" href="{% url 'course:each-courses' each.course_id %}" style="text-decoration:none">{{ each.name }}</a>
                        <p class="card-title course-card-id">{{ each.course_id }}</p>
                    </div>
                </div>
            {% endfor %} 
            {% endif %}
            <!-- STUDENT'S NEW COURSE CARD -->
            {% if request.user.userprofile.student_id != "" %}
                <div class="card course-card m-3">
                    <div class="card-body">
                        <h5 class="card-title course-card-id">New Course</h5>
                        <p class="card-text ">
                            If you have an access code that you received from
                            your instructor, enter it here.
                        </p>
                        <form id="cr-form">
                            <input type="text" id="cr-code" name="cr-code" style="width : 100%;" required>
                            <div class="d-grid gap-2 mt-2">
                                <button
                                    type="submit"
                                    class="btn btn-primary">Register
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            {% endif %}
            <!-- INSTRUCTOR'S CREATE COURSE CARD -->
            {% if request.user.userprofile.instructor_id != "" %}
                <div class="card course-card m-3">
                    <div class="card-body">
                        <h5 class="card-title course-card-id">Create Course</h5>
                        <p class="card-text">
                            Press here to create a new course.
                        </p>
                        <div class="d-grid gap-2 mt-2">
                            <a href="{% url 'course:course-create' %}" class="btn btn-primary">Create</a>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </section>
    {% if request.user.userprofile.student_id != "" %}
    <!-- Today's Question Section -->
        <section class="col-3 d-flex m-2 justify">
            <div class="calendar flex-fill light">
                <div class="calendar_header">
                    <h1 class = "header_title">New Questions</h1>
                </div>
                <div class="calendar_plan">
                    <div class="cl_plan">
                        <div class="cl_title">Today</div>
                        <div class="cl_copy">{{ today }}</div>
                    </div>
                </div>
                <div class="calendar_events">
                    {% if questions_to_display %}
                        {% for q, noti in questions_to_display.items %}
                            <hr />
                            <div class="event_item">
                                <div class="ei_Dot dot_active"></div>
                                <div class="ei_Title">{{ q.text }}</div>
                                <div class="ei_Copy">
                                    <a class="stretched-link" 
                                    href="{% url 'course:questions:question-view' pk=q.section.course.course_id id=q.section.section_id qid=q.question_id %}"
                                    ></a>
                                    <b>{{ q.section.course }}:</b> {{ q.section }}
                                    <br />
                                    Set Reminder: {{noti.time_to_send}}
                                </div>
                            </div>
                        {% endfor %}
                    {% endif %}
                </div>
            </div>
        </section>
    {% endif %}
</section>
{% endblock %} 

{% block notloggin %}
<!-- DEFAULT (not logged in) -->
<header
    class="py-5 intro-image"
    style="position:fixed; background-image: linear-gradient(to right, #011029 18%, transparent 70%), url('../../static/cardImage.jpg'); background-size: cover; background-repeat:no-repeat; background-position:50% 69%;" 
>
<div style="position:fixed; top:30%; left:5%">
    <h1 style="margin-left:25%; color:white;">
        Learning.
    </h1>
    <h1 style="color:white;">
        One question, at a time
    </h1>
    <li class="btn btn-primary btn-square-md" style =" border-color:#f1c300; margin-left:17%; margin-top:10%; background-color:#f1c300; color:#011029;  width:55%; letter-spacing: 2px;font-weight:800;font-family: Montserrat,helvetica;font-size:14px;">
        <a class="nav-link" href="/login">LOGIN</a>
    </li>
    <div id="timerbox" style="top:72%; left:5%; position:fixed; margin-right:20px">
        <svg xmlns="http://www.w3.org/2000/svg" width="40%" height="40%" fill="currentColor"style = "position:relative; left:34%;" class="bi bi-calendar-week" viewBox="0 0 16 16">
            <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
            <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
          </svg>
          <div style="top:80%; margin-top:13px; position:fixed;white-space: pre">
            <h4>  Scheduled reminders for questions 
help learning by building consistency</h4>
        </div>
    </div>
    <div id="timerbox2" style="top:72%; left:40%; position:fixed; margin-right:20px">
        <svg xmlns="http://www.w3.org/2000/svg" width="40%" height="40%" fill="currentColor"style = "position:relative; left:34%;" class="bi bi-alarm" viewBox="0 0 16 16">
            <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
            <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
          </svg>
          <div style="top:80%; margin-top:13px; position:fixed;white-space: pre">
            <h4>   Questions are not timed or graded,
for a stress-free learning environment
            </h4>
        </div>
    </div>
</div>
<div id="timerbox3" style="top:72%; left:77%; position:fixed;">
    <svg xmlns="http://www.w3.org/2000/svg" width="40%" height="40%" fill="currentColor"style = "position:relative; left:34%;" class="bi bi-speedometer2" viewBox="0 0 16 16">
        <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
        <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
      </svg>
      <div style="top:80%; margin-top:13px; position:fixed;white-space: pre">
        <h4>Accelerate your learning through 
   instant feedback on responses.</h4>
    </div>
</div>
</div>
</header>

{% endblock %}