{% extends "core/base.jinja" %}
{% from "core/macros.jinja" import user_profile_link %}
{% from "pedagogy/macros.jinja" import display_star %}

{% 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 class="ue-details-container">
        <div class="grade">
          <p>{% trans %}Global grade{% endtrans %}</p>
          <p>{% trans %}Utility{% endtrans %}</p>
          <p>{% trans %}Interest{% endtrans %}</p>
          <p>{% trans %}Teaching{% endtrans %}</p>
          <p>{% trans %}Work load{% endtrans %}</p>
        </div>
        <div class="grade-stars">
          <p>{{ display_star(object.grade_global_average) }}</p>
          <p>{{ display_star(object.grade_utility_average) }}</p>
          <p>{{ display_star(object.grade_interest_average) }}</p>
          <p>{{ display_star(object.grade_teaching_average) }}</p>
          <p>{{ display_star(object.grade_work_load_average) }}</p>
        </div>
        <div class="ue-infos">
          <p><b>{% trans %}Objectives{% endtrans %}</b></p>
          <p>{{ object.objectives|markdown }}</p>
          <p><b>{% trans %}Program{% endtrans %}</b></p>
          <p>{{ object.program|markdown }}</p>
          <p><b>{% trans %}Earned skills{% endtrans %}</b></p>
          <p>{{ object.skills|markdown }}</p>
          <p><b>{% trans %}Key concepts{% endtrans %}</b></p>
          <p>{{ object.key_concepts|markdown }}</p>
          <p><b>{% trans %}UE manager: {% endtrans %}</b>{{ object.manager }}</p>
        </div>
      </div>

      <br>
      {% if object.has_user_already_commented(user) %}
        <div id="leave_comment_not_allowed">
          <p>{% trans %}You already posted a comment on this UE. If you want to comment again, please modify or delete your previous comment.{% endtrans %}</p>
        </div>
      {% elif user.has_perm("pedagogy.add_uecomment") %}
        <details class="accordion" id="leave_comment">
          <summary>{% trans %}Leave comment{% endtrans %}</summary>
          <div class="accordion-content">
            <form action="{{ url('pedagogy:ue_detail', ue_id=object.id) }}" method="post" enctype="multipart/form-data">
              {% csrf_token %}
              <div class="leave-comment-grid-container">
                <div class="form-stars">
                  {{ form.author.errors }}
                  {{ form.ue.errors }}

                  {{ form.author }}
                  {{ form.ue }}

                  <div class="input-stars">
                    <label for="{{ form.grade_global.id_for_label }}">{{ form.grade_global.label }} :</label>
                    {{ form.grade_global.errors }}
                    {{ form.grade_global }}
                  </div>

                  <div class="input-stars">
                    <label for="{{ form.grade_utility.id_for_label }}">{{ form.grade_utility.label }} :</label>
                    {{ form.grade_utility.errors }}
                    {{ form.grade_utility }}
                  </div>

                  <div class="input-stars">
                    <label for="{{ form.grade_interest.id_for_label }}">{{ form.grade_interest.label }} :</label>
                    {{ form.grade_interest.errors }}
                    {{ form.grade_interest }}
                  </div>

                  <div class="input-stars">
                    <label for="{{ form.grade_teaching.id_for_label }}">{{ form.grade_teaching.label }} :</label>
                    {{ form.grade_teaching.errors }}
                    {{ form.grade_teaching }}
                  </div>

                  <div class="input-stars">
                    <label for="{{ form.grade_work_load.id_for_label }}">{{ form.grade_work_load.label }} :</label>
                    {{ form.grade_work_load.errors }}
                    {{ form.grade_work_load }}
                  </div>
                </div>
                <div class="form-comment">
                  <label for="{{ form.comment.id_for_label }}">{{ form.comment.label }} :</label>
                  {{ form.comment.errors }}
                  {{ form.comment }}
                </div>
              </div>
              <p><input type="submit" value="{% trans %}Comment{% endtrans %}" /></p>
            </form>
          </div>
        </details>
      {% endif %}
      <br>

      {% if comments %}
        <h2>{% trans %}Comments{% endtrans %}</h2>
        {% for comment in comments %}
          <div id="{{ comment.id }}" class="comment-container">

            <div class="grade-block">
              <div class="grade-type">
                <p>{% trans %}Global grade{% endtrans %}</p>
                <p>{% trans %}Utility{% endtrans %}</p>
                <p>{% trans %}Interest{% endtrans %}</p>
                <p>{% trans %}Teaching{% endtrans %}</p>
                <p>{% trans %}Work load{% endtrans %}</p>
              </div>
              <div class="grade-stars">
                <p>{{ display_star(comment.grade_global) }}</p>
                <p>{{ display_star(comment.grade_utility) }}</p>
                <p>{{ display_star(comment.grade_interest) }}</p>
                <p>{{ display_star(comment.grade_teaching) }}</p>
                <p>{{ display_star(comment.grade_work_load) }}</p>
              </div>
              <div class="grade-extension"></div>
            </div>

            <div class="comment">
              <div class="anchor">
                <a href="{{ url('pedagogy:ue_detail', ue_id=ue.id) }}#{{ comment.id }}"><i class="fa fa-paragraph"></i></a>
              </div>
              {{ comment.comment|markdown }}
            </div>

            <div class="info">
              {% if comment.is_reported %}
                <p class="status-reported">
                  {% trans %}This comment has been reported{% endtrans %}
                </p>
              {% endif %}

              {% if comment.author_id == user.id or user.has_perm("pedagogy.change_comment") %}
                <p class="actions">
                  <a href="{{ url('pedagogy:comment_update', comment_id=comment.id) }}">
                    {% trans %}Edit{% endtrans %}
                  </a>
              {% endif %}
              {% if comment.author_id == user.id or user.has_perm("pedagogy.delete_comment") %}
                <a href="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}">
                  {% trans %}Delete{% endtrans %}
                </a>
                </p>
              {% endif %}
            </div>

            <div class="comment-end-bar">
              <div class="report">
                <p>
                  <a href="{{ url('pedagogy:comment_report', comment_id=comment.id) }}">
                    {% trans %}Report this comment{% endtrans %}
                  </a>
                </p>
              </div>

              <div class="date"><p>{{ comment.publish_date.strftime('%d/%m/%Y') }}</p></div>

              <div class="author"><p>{{ user_profile_link(comment.author) }}</p></div>
            </div>

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

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