{% extends "base_dashboard.html" %}
{% load static %}
{% block title %}
    View Bughunt
{% endblock title %}
{% block description %}
    View detailed information about the Bughunt, including the hunt name, duration, description, and domain URL. Check the status and participate in the event.
{% endblock description %}
{% block keywords %}
    View Bughunt, Bughunt Details, Hunt Information, Hunt Description, Domain URL, Participate in Bughunt
{% endblock keywords %}
{% block og_title %}
    View Bughunt - Detailed Hunt Information
{% endblock og_title %}
{% block og_description %}
    Access comprehensive details about the Bughunt, including the name, duration, description, and domain URL. Stay informed and get ready to participate.
{% endblock og_description %}
{% block content %}
    <section>
        {% include "includes/user_sidenav.html" %}
    </section>
    <link href="{% static 'mdeditor/css/editormd.min.css' %}" rel="stylesheet">
    <link href="{% static 'mdeditor/css/editormd.preview.css' %}"
          rel="stylesheet">
    <main>
        <article id="banner"
                 class="jumbotron jumbotron-fluid h-[400px] bg-cover bg-no-repeat bg-center bg-[url('https://i.postimg.cc/FzSHSbhQ/img-soccer.jpg')]">
            <div class="italic pl-4 mt-4 text-gray-100">
                <h1 class="text-5xl italic">
                    {{ hunt.domain.organization.name }}
                    <span class="inline-block px-2 py-1 text-xs font-bold text-center text-gray-100 align-baseline bg-primary-500 rounded">{{ hunt.domain.name }}</span>
                </h1>
                <p class="lead mt-5">{{ hunt.name }} / {{ hunt.starts_on|date:'Y-m-d H:i' }} - {{ hunt.end_on|date:'Y-m-d H:i' }}</p>
            </div>
            {% if hunt_active %}
                <a href="{% url 'submit_bug' %}">
                    <button class="start-btn bg-red-600 text-white font-bold py-2 px-4 rounded mt-10 ml-6 hover:bg-red-700 transition-transform duration-300">
                        Start
                    </button>
                </a>
            {% else %}
                {% if hunt_completed %}
                    <a href="{% url 'hunt_results' %}">
                        <button class="start-btn bg-red-600 text-white font-bold py-2 px-4 rounded mt-10 ml-6 hover:bg-red-700 transition-transform duration-300">
                            View Results
                        </button>
                    </a>
                {% else %}
                    <button class="time-remaining-btn bg-red-600 text-white font-bold py-2 px-4 rounded mt-10 ml-6 hover:bg-red-700 transition-transform duration-300">
                        Time Remaining: {{ time_remaining }}
                    </button>
                {% endif %}
            {% endif %}
        </article>
    </main>
    <div id="content">
        <textarea>{{ hunt.description }}</textarea>
    </div>
    <div>Hunt URL: {{ hunt.domain.url }}</div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
            crossorigin="anonymous"></script>
    <script src="{% static 'mdeditor/js/editormd.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/marked.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/prettify.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/raphael.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/underscore.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'mdeditor/js/lib/jquery.flowchart.min.js' %}"></script>
    <script>
        $(function () {
            editormd.markdownToHTML("content", {
                emoji: true,
                taskList: true,
                tex: true,
                flowChart: true,
                sequenceDiagram: true,
            });

            $(".reference-link").each(function (i, obj) {
                console.log(obj)
            })
        })
    </script>
{% endblock content %}