{% from "pedagogy/macros.jinja" import display_star %}

{% if is_fragment %}

  <hx-partial id="ue-grade">
    {% include "pedagogy/fragments/ue_details/grade.jinja" %}
  </hx-partial>

  <hx-partial id="comment-form">
    {% include "pedagogy/fragments/ue_details/form.jinja" %}
  </hx-partial>

  <hx-partial id="comments" hx-swap="innerMorph">
    {% include "pedagogy/fragments/ue_details/comments.jinja" %}
  </hx-partial>

{% else %}
  {% extends "core/base.jinja" %}

  {% block additional_css %}
    <link rel="stylesheet" href="{{ static('pedagogy/css/pedagogy.scss') }}">
  {% endblock %}

  {% block title %}
    {% trans %}UE Details{% endtrans %}
  {% endblock %}

  {% block content %}

    <div class="pedagogy">
      <div id="ue_detail">
        <button onclick='(function(){
                         // If comes from the guide page, go back with history
                         if (document.referrer.replace(/\?(.+)/gm,"").endsWith(`{{ url("pedagogy:guide") }}`)){
                         window.history.back();
                         return;
                         }
                         // Simply goes to the guide page
                         window.location.href = `{{ url("pedagogy:guide") }}`;
                         })()' hidden>{% trans %}Back{% endtrans %}</button>

        <h1>{{ object.code }} - {{ object.title }}</h1>
        <br>
        <div class="ue-quick-info-container">
          <div class="hours-cm">
            <b>{% trans %}CM: {% endtrans %}</b>{{ object.hours_CM }}
          </div>
          <div class="hours-td">
            <b>{% trans %}TD: {% endtrans %}</b>{{ object.hours_TD }}
          </div>
          <div class="hours-tp">
            <b>{% trans %}TP: {% endtrans %}</b>{{ object.hours_TP }}
          </div>
          <div class="hours-te">
            <b>{% trans %}TE: {% endtrans %}</b>{{ object.hours_TE }}
          </div>
          <div class="hours-the">
            <b>{% trans %}THE: {% endtrans %}</b>{{ object.hours_THE }}
          </div>

          <div class="department">
            {{ object.department }}
          </div>
          <div class="credit-type">
            {{ object.credit_type }}
          </div>
          <div class="semester">
            {{ object.get_semester_display() }}
          </div>
        </div>

        <br>

        <div id="ue-grade">
          {% include "pedagogy/fragments/ue_details/grade.jinja" %}
        </div>

        <br>

        <div id="comment-form">
          {% include "pedagogy/fragments/ue_details/form.jinja" %}
        </div>

        <div id="comments">
          {% include "pedagogy/fragments/ue_details/comments.jinja" %}
        </div>

      </div>
    </div>
  {% endblock %}
{% endif %}