{% extends "core/base.jinja" %}
{% from 'core/macros.jinja' import paginate_alpine %}

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

{% block description -%}
  {% trans %}A guide of courses available at UTBM.{% endtrans %}
{%- endblock %}

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

{% block additional_js %}
  <script type="module" src="{{ static('bundled/pedagogy/guide-index.js') }}"></script>
{% endblock %}

{% block head %}
  {{ super() }}
  <meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=2">
{% endblock head %}

{% block content %}
  {% if user.has_perm("pedagogy.add_ue") %}
    <div class="action-bar">
      <p>
        <a href="{{ url('pedagogy:ue_create') }}">{% trans %}Create UE{% endtrans %}</a>
      </p>
      <p>
        <a href="{{ url('pedagogy:moderation') }}">{% trans %}Moderate comments{% endtrans %}</a>
      </p>
    </div>
    <br/>
  {% endif %}
  <div class="pedagogy" x-data="ue_search" x-cloak>
    <form id="search_form">
      <div class="search-form-container">
        <div class="search-bar">
          <input
            id="search_input"
            class="search-bar-input"
            type="text"
            name="search"
            x-model.debounce.500ms="search"
          />
        </div>
        <div class="radio-department">
          <div class="radio-guide">
            {% set departments = [
            ("EDIM", "EDIM"), ("ENERGIE", "EE"), ("IMSI", "IMSI"),
            ("INFO", "GI"), ("GMC", "MC"), ("HUMA", "HUMA"), ("TC", "TC")
            ] %}
            {% for (display_name, real_name) in departments %}
              <input
                type="checkbox"
                name="department"
                id="radio{{ real_name }}"
                value="{{ real_name }}"
                x-model="department"
              />
              <label for="radio{{ real_name }}">{% trans %}{{ display_name }}{% endtrans %}</label>
            {% endfor %}
          </div>
        </div>
        <div class="radio-credit-type">
          <div class="radio-guide">
            {% for credit_type in ["CS", "TM", "EC", "QC", "OM"] %}
              <input
                type="checkbox"
                name="credit_type"
                id="radio{{ credit_type }}"
                value="{{ credit_type }}"
                x-model="credit_type"
              />
              <label for="radio{{ credit_type }}">{% trans %}{{ credit_type }}{% endtrans %}</label>
            {% endfor %}
          </div>
        </div>

        <div class="radio-semester">
          <div class="radio-guide">
            <input type="checkbox" name="semester" id="radioAUTUMN" value="AUTUMN" x-model="semester"/>
            <label for="radioAUTUMN"><i class="fa fa-leaf"></i></label>
            <input type="checkbox" name="semester" id="radioSPRING" value="SPRING" x-model="semester"/>
            <label for="radioSPRING"><i class="fa-regular fa-sun"></i></label>
          </div>
        </div>
      </div>
    </form>
    <table id="ue-list">
      <thead>
        <tr>
          <td>{% trans %}UE{% endtrans %}</td>
          <td>{% trans %}Title{% endtrans %}</td>
          <td>{% trans %}Department{% endtrans %}</td>
          <td>{% trans %}Credit type{% endtrans %}</td>
          <td><i class="fa fa-leaf"></i></td>
          <td><i class="fa-regular fa-sun"></i></td>
          {%- if user.has_perm("pedagogy.change_ue") -%}
            <td>{% trans %}Edit{% endtrans %}</td>
          {%- endif -%}
          {%- if user.has_perm("pedagogy.delete_ue") -%}
            <td>{% trans %}Delete{% endtrans %}</td>
          {% endif %}
        </tr>
      </thead>
      <tbody :aria-busy="loading">
        <template x-for="ue in ues.results" :key="ue.id">
          <tr
            @click="window.location.href = ue.detail_url"
            class="clickable"
            :class="{closed: ue.semester === 'CLOSED'}"
          >
            <td><a :href="`/pedagogy/ue/${ue.id}`" x-text="ue.code"></a></td>
            <td class="title"
                x-text="ue.title + (ue.semester === 'CLOSED' ? ' ({% trans %}closed ue{% endtrans %})' : '')"
            ></td>
            <td x-text="ue.department"></td>
            <td x-text="ue.credit_type"></td>
            <td><i :class="ue.semester.includes('AUTUMN') && 'fa fa-leaf'"></i></td>
            <td><i :class="ue.semester.includes('SPRING') && 'fa-regular fa-sun'"></i></td>
            {%- if user.has_perm("pedagogy.change_ue") -%}
              <td><a :href="ue.edit_url">{% trans %}Edit{% endtrans %}</a></td>
            {%- endif -%}
            {%- if user.has_perm("pedagogy.delete_ue") -%}
              <td><a :href="ue.delete_url">{% trans %}Delete{% endtrans %}</a></td>
            {%- endif -%}
          </tr>
        </template>
      </tbody>
    </table>
    {{ paginate_alpine("page", "maxPage()") }}
  </div>
{% endblock content %}