{% extends "base.html" %}
{% load static i18n wagtailcore_tags wagtailimages_tags %}

{% block title %}{{ page.title }}{% endblock %}

{% block body_class %}template-homepage{% endblock %}

{% block extra_css %}

{% endblock extra_css %}

{% block content_class %}prose{% endblock content_class %}

{% block content %}
  <h1 class="not-prose text-3xl mb-4 text-gray-700">
    <a href="{% slugurl 'courses' %}" class="font-bold hover:underline">{% trans "Courses" %}</a>
     &raquo; {{ page.title }}
  </h1>

  {% if page.course_image %}
    {% image page.course_image original alt=page.title class="w-full h-auto rounded-lg mb-4" %}
  {% endif %}

  <p class="not-prose text-gray-600 mb-6 text-lg">
    {{ page.description }}
  </p>

  {{ page.body|richtext }}

  {% if user_has_access %}
    {% if user_purchase_id %}
      <a href="{% url 'mock_refund_purchase' purchase_id=user_purchase_id %}" class="mt-4 inline-block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">{% trans "Refund Purchase" %}</a>
    {% endif %}
    <h2 class="not-prose text-2xl mt-8 mb-4 text-gray-700 font-semibold">{% trans "Modules" %}</h2>
    <ul class="list-disc list-inside">
      {% for module in page.get_children.specific.live %}
        <li>
          <a href="{{ module.url }}" class="text-blue-600 hover:underline">{{ module.title }}</a>
        </li>
      {% empty %}
        <li>{% trans "No modules yet." %}</li>
      {% endfor %}
    </ul>
  {% elif not user.is_authenticated %}
    {# If the user is not authenticated, we can prompt them to log in or sign up. #}
    <div class="not-prose mt-8 p-4 bg-blue-100 border-l-4 border-blue-500 text-blue-700">
      <p>{% trans "You need to be logged in to access this course. Please log in or sign up to view the modules." %}</p>
      <a href="{% url 'account_login' %}?next={{ request.path }}" class="mt-4 inline-block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">{% trans "Login" %}</a>
      <a href="{% url 'account_signup' %}?next={{ request.path }}" class="mt-4 inline-block bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition ml-2">{% trans "Sign Up" %}</a>

    </div>
  {% else %}
    <div class="not-prose mt-8 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700">
      <p>{% trans "You don't have access to this course. Please purchase it to view the modules." %}</p>
      <a href="{% url 'mock_purchase_course' course_id=page.id %}" class="mt-4 inline-block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">{% trans "Purchase Course" %}</a>
    </div>
  {% endif %}
{% endblock content %}