{% extends 'base_with_nav.html' %}

{% load static %}

{% block head %}
    <link rel='stylesheet' href="{% static 'css/detail.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 %}
<a href="{% url 'main:index' %}"><button class="btn btn-secondary float-left m-md-2">Back</button></a>
<div class="col-md-4 col-12 m-auto mt-md-3 p-md-5 {% if status == 'available' %}available{% elif status == 'completed' %}completed{% else %}locked{% endif %}">
    {% if status == 'blocked' %}
        <h1>This challenge is unavailable. Please try again later.</h1>
    {% elif status == 'completed' %}
        <h1>{{ challenge.name }}</h1>
        <div class="text-left pt-md-2">{{ challenge.description | safe }}</div>
        <hr>
        <h3>Solved!</h3>
    {% elif status == 'locked' %}
        <h1>This challenge is unavailable. Please try again later.</h1>
    {% elif status == 'available' %}
        <h1>{{ challenge.name }}</h1>
        <div class="text-left pt-md-2">{{ challenge.description | safe }}</div>
        <hr>
        <input type="text" id="{{ status.0.id }}" placeholder="Enter the flag here"/>
        <input type="submit" value="Submit" onclick="checkFlag({{ status.0.id }})" />
    {% else %}
        <h1>There's an error with this challenge. Please contact the organizers.</h1>
    {% endif %}
</div>
{% endblock %}