{% extends 'base_with_nav.html' %}

{% load static %}

{% block head %}
    <link rel='stylesheet' href="{% static 'css/index.css' %}">
    <script>
        function checkFlag(challenge_id) {
            $.ajax({
                type : 'POST',
                url: "{% url 'main:validate_flag' %}",
                data: {
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                    dataType: 'json',
                    challenge_id: challenge_id,
                    flag: $("#" + challenge_id).val(),
                },
                success: function(data) {
                    if (data.result == "success") {
                        $("#box" + challenge_id).removeClass("available").addClass("completed");                        
                    } else {
                        $("#" + challenge_id).css("background-color", "red");
                    }
                },
                failure: function() {
                    $("#" + challenge_id).css("background-color", "red");
                }
            });
        }
    </script>
{% endblock %}

{% block main %}
    <h1 class="border-bottom p-md-2">Fall Hoco Scavenger Hunt 2021</h1>
    {% for category, challenges in categories.values %}
        <div class="col">
            <div class="row">
                <h1 class="ml-3">{{ category.name }}</h1>
                <p style="cursor: pointer;" onclick="document.getElementById('c-{{ category.id }}').style.display = document.getElementById('c-{{ category.id }}').style.display === 'none' ? 'flex' : 'none'" class="ml-auto mr-3 btn btn-primary">toggle</p>
            </div>
            <div class="row">
                <p class="ml-2 font-italic">{{category.description}}</p>
            </div>
            <div id="c-{{ category.id }}" class='row'>
                {% for challenge, status in challenges.items %}
                    {% if status.0.unblocked %}
                        <a href="challenge/{{ status.0.id }}" class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
                            <div id="box{{ status.0.id }}" class="box {% if status.1 == 'available' %}available{% elif status.1 == 'completed' %}completed{% else %}locked{% endif %} p-3">
                                <div class="centered-div">
                                    <h4>{{ status.0.name }}</h4>
                                    <p>Points: {{ status.0.points }}</p>
                                </div>
                                <div class="{% if status.1 == 'completed' %}center{% else %}left{% endif %}-div">
                                    {% if status.0.exclusive %}
                                        <p>This challenge's points are only available to the first class to complete it.</p>
                                        <p>{{ status.0.short_description }}</p>    
                                    {% elif status.1 == 'locked' %}
                                        <p>This challenge was exclusive and has already been completed by another class.</p>
                                    {% elif status.1 == 'completed' %}
                                        <h3>Solved!</h3>
                                    {% else %}
                                        <p>{{ status.0.short_description }}</p>
                                    {% endif %}
                                </div>
                                {% if status.1 == 'available' %}
                                    <hr>
                                    <input type="text" id="{{ status.0.id }}" placeholder="Enter the flag here"/>
                                    <input type="submit" value="Submit" onclick="checkFlag({{ status.0.id }})" />
                                {% endif %}
                            </div>
                        </a>
                    {% else %}
                        <div class='col-lg-3 col-md-4 col-sm-6 col-xs-12'>
                            <div id="box{{ status.0.id }}" class="box locked p-3">
                                <div class="centered-div">
                                    <h4>{{ status.0.name }}</h4>
                                    <p>Points: {{ status.0.points }}</p>
                                </div>
                                <div class="centered-div">
                                    <p>This challenge is currently unavailable.</p>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
{% endblock %}