{% extends 'vulnerabilities/base.html' %}
{% load static %}
{% load crispy_forms_tags %}

{% block inner %}

<nav class="navbar navbar-expand-md navbar-light bg-transparent border-bottom">
  <div class="container-fluid justify-content-between">
    {# The navbar "burger" menu which appears on small screens #}
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarLevelSupportedContent" aria-controls="navbarLevelSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-end" id="navbarLevelSupportedContent">
      <div class="navbar-nav mx-3">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item me-2">
            <button class="btn btn-warning" hx-get="{%block hint_url %}{% endblock %}" hx-trigger="click once" hx-target="#hintContent" data-bs-toggle="modal" data-bs-target="#hintModal">
              <i class="fa-regular fa-lightbulb"></i> Request hint
            </button>
          </li>
          <li class="nav-item me-2">
            <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#storyModal">
              <i class="fa-solid fa-book"></i> Revisit the Story
            </button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

{% if completed %}
<div class="alert alert-success alert-dismissible fade show" role="alert">
  You have already completed this level!
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}

{% if error_msg %}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  {{ error_msg }}
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}

{% if info_msg %}
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
  {{ info_msg }}
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}

{% if note_msg %}
<div class="alert alert-info alert-dismissible fade show" role="alert">
  {{ note_msg }}
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}

{% block level_content %}
{{ block.super }}
{% endblock %}

<!-- Story Modal -->
<div class="modal fade" id="storyModal" tabindex="-1" aria-labelledby="storyModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="storyModalLabel">{% block level_title %}{% endblock %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="story-container fs-5 text-justify">
          {% block level_description %}
          {% endblock %}
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Hint Modal -->
<div class="modal fade" id="hintModal" tabindex="-1" aria-labelledby="hintModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="hintModalLabel">Hint</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- Placeholder where the hint will be displayed once requested -->
        <div id="hintContent">Your hint will appear here...</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra %}
{{ block.super }}

{% comment %}
Show the storyModal first time the page is opened.
After that, set a cookie, so any further reloads don't cause it to reopen.
The cookie will expire after 1 day.
{% endcomment %}
<script src="{% static 'js/story_modal.js' %}"></script>
{% endblock extra %}

{% comment %}
vi: ft=htmldjango
{% endcomment %}